I am using owl slider in my page. I have total 4 owl slider which comes dynamically on page. Problem is if I click on particular slider next then it also slides other 3 sliders blocks as well. below is my complete code. For understanding purpose here I have kept only 2 sliders.
<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var category1 = $(".category-block-inner");
category1.owlCarousel({
pagination: false,
items: 2,
itemsDesktop: [1199, 2],
itemsDesktopSmall: [1024, 2],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
});
$(".next").click(function () {
$(category1).trigger('owl.next');
});
$(".previous").click(function () {
$(category1).trigger('owl.prev');
});
});
</script>
Owl-carousel allows you to customize the "next- prev" buttons with a simple option:
navText: ["yourPrevButton","yourNextButton"]
Also html is permitted, so you can do everything you want. See all the options: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
For your problem, you have to do multiple owl-carousel instance, not only 1. A solution could be to create a loop of owl-carousel istances ( be careful : this solution works only if all carousel have same options.
Joining these 2 points you have a solution like this:
$(".category-block-inner").each(function(){ $(this).owlCarousel({ dots:false, // your pagination? items: 2, nav:true, navText: ["MyPrevButton","MyNextButton"], itemsDesktop: [1199, 2], itemsDesktopSmall: [1024, 2], itemsTablet: [768, 1], itemsMobile: [479, 1], }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/> <div class="category-block-inner owl-carousel owl-theme"> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> </div> <div class="category-block-inner owl-carousel owl-theme"> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> <div class="item">boxes</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.