Owl 侧边的轮播 2 导航箭头

Question

我目前正在使用 owl 轮播制作带有图片的幻灯片。但现在的问题是，我想在两侧进行导航（而不是在幻灯片顶部）。

下面是我的脚本：

$('.teamc').owlCarousel({
items: 4,
margin: 20,
autoHeight : true,
autoWidth: true,
center: true,
nav: true,
loop: true,
autoplay:true,
navText: ['<div class="customNextBtn" style="float:left; margin-left:33px"></div>', '<div class="customPreviousBtn" style="float:right; margin-right:33px"></div>'],
responsiveClass: true,
responsive: {
  0: {
    center: true,
    items: 1,
    margin: 20,
    autoHeight : true,
    autoWidth: true,
    nav: false,
    loop: true
  },
  600: {
    center: true,
    items: 4,
    margin: 20,
    autoHeight : true,
    autoWidth: true,
    nav: false,
    loop: true
  },
  1000: {
    center: true,
    items: 4,
    margin: 20,
    autoHeight : true,
    autoWidth: true,
    nav: true,
    loop: true
  }
}});

Here is the sample picture of what I want it to be:

Answer 1

如果你有这个：

<div class="main-content">
  <div class="owl-carousel owl-theme">
    <div class="item">...</div>
    <div class="item">...</div>
    ...
 </div>
 <div class="owl-theme">
    <div class="owl-controls">
        <div class="custom-nav owl-nav"></div>
    </div>
</div>

您应该在 js 中添加以下代码：

$('.main-content .owl-carousel').owlCarousel({
    .... ,
    navContainer: '.main-content .custom-nav',
    ....
});

Owl 侧边的轮播 2 导航箭头

Owl carousel 2 nagivation arrows on side

javascript

owl-carousel