Question

我目前正在使用猫头鹰传送带制作带图片的幻灯片。但是现在的问题是，我想在两侧进行导航（而不是在幻灯片的顶部）。

下面是我的脚本：

$('.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',
    ....
});

猫头鹰轮播2旁边的导航箭头

1 个答案: