How to make a owl carousel with button next/pre

Question

I need to make a slider with owl carousel and I want it becomes like this image

js code :

    $('.owl-carousel').owlCarousel({
    rtl: true,
    autoplay: true,
    autoplayTimeout: 6000,
    autoplayHoverPause: false,
    loop: true,
    autoWidth: true,

    items: 3,
    nav:true,
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    smartSpeed: 900 ,

    margin:10,
    center:true,

});

Html :

                    <div class="owl-carousel owl-theme" id="owl-demo">

                    <div>
                        <img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 1">
                    </div>
                    <div>
                        <img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide2">
                    </div>
                    <div>
                        <img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide3">
                    </div>
                    </div>

style:

#owl-demo .owl-item div{
padding:5px;

}

#owl-demo .owl-item img{
display: block;
width: 100%;
height: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

how could I make this like that image and put that circle and next/prev button?

Answer 1

Change your html, add block navigation

<div class="owl-carousel owl-theme" id="owl-demo">
    <div>
      <img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 1">
    </div>
    <div>
      <img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 2">
    </div>
    <div>
      <img src="{{ asset('image/UserPanel/carosel-head.png')}}" alt="slide 3">
    </div>
</div>
<div class="owl-carousel__nav">
  <div class="owl-carousel__prev">prev</div>
  <div class="owl-carousel__next">next</div>
</div>

Add to JS this code:

  $('.owl-carousel__next').click(() => owl.trigger('next.owl.carousel'))
  
  $('.owl-carousel__prev').click(() => owl.trigger('prev.owl.carousel'))

Example https://codepen.io/victoriya-dev/pen/XWXPxXq