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>