CODEWITHSUNDEEP
javascriptjqueryowl-carousel
SUN
SUN

Reputation: 973

Owl Slider clicking on next previous triggers all other slider to slide

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>

Upvotes: 0

Views: 2575

Answers (1)

ReSedano
ReSedano

Reputation: 5060

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>

Upvotes: 1

Related Questions