Question

我正在尝试将自动滚动配置为在按钮点击事件上激活 - 但每张幻灯片只有1张卡片。

以下是我在jsfiddle中工作的当前示例。我如何配置滑块以获取2张卡，但是是1张幻灯片的宽度？我已尝试配置项目 - 但似乎没有生效。

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

$(document).ready(function() {

var owl = $('.owl-carousel');
owl.owlCarousel();
// Go to the next item
$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})


});

.holder {
  width: 500px;
  border: 1px sold grey;
}

.owl-carousel .item {
  height: 10rem;
  background: #4DC7A0;
  padding: 1rem;
  border: 1px solid red;
}

.owl-theme .owl-controls .owl-page {
  display: inline-block;
}

.owl-theme .owl-controls .owl-page span {
  background: none repeat scroll 0 0 #869791;
  border-radius: 20px;
  display: block;
  height: 12px;
  margin: 5px 7px;
  opacity: 0.5;
  width: 12px;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<script src="http://yourjavascript.com/32081255412/owl-carousel.js"></script>

<div class="owl-carousel">
  <figure>
    <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
  </figure>
  <figure>
    <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
  </figure>
  <figure>
    <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
  </figure>
  <figure>
    <img src="http://i.imgur.com/RGGxODF.jpg" class="img-responsive" alt="...">
  </figure>  
</div>


<button class="customPrevBtn">prev</button>
<button class="customNextBtn">next</button>

猫头鹰旋转木马 - 自动滚动并设置它有2张牌

0 个答案: