如何使用按钮next/pre制作owl轮播

Question

我需要做一个滑块与猫头鹰旋转木马，我希望它成为这样的形象

​

js代码：

    $('.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>

风格：

#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;

我怎么才能把它做成这样的图像，然后把那个圆圈和next/prev按钮放进去呢？

Answer 1

更改您的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="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>

将此代码添加到JS：

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

示例https://codepen.io/victoriya-dev/pen/XWXPxXq