Owl Carousel - автопрокрутка и настройка на 2 карты - PullRequest
Новая
       19

Owl Carousel - автопрокрутка и настройка на 2 карты

0 голосов
/ 27 апреля 2018

Я пытаюсь настроить автоматическую прокрутку, чтобы она активировалась при событиях нажатия кнопки, но при этом на слайде была только 1 карта.

Ниже приведен пример с которым я работал в jsfiddle. Как мне настроить слайдер на 2 карты, но при ширине 1 слайда? Я пытался настроить элементы, но, похоже, это не сработало.

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

http://jsfiddle.net/s10bgckL/4284/

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