7

I am trying to configure auto scroll to be activated on button click events - but also to have only 1 card per slide.

Below is the current sample I've got working in the jsfiddle. How would I go about configuring the slider to take 2 cards, but be the width of 1 slide? I've tried configuring the items - but it doesn't appear to take affect.

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>
The Old County
  • 89
  • 13
  • 59
  • 129

0 Answers0