how to add class on body if owl first item active and remove class if last item is active?

Question

I tried a lot to add a class on the body when owl first item is active and remove when the last child is active.

$('.slider2').owlCarousel({


    loop: false,
    items: 1,
    responsiveClass: true, autoplayHoverPause: true,
    autoplay: false,
    slideSpeed: 800,
    paginationSpeed: 900,
    autoplayTimeout: 3000,
    navText: ["<img src='images/left.png'>", "<img src='images/right.png'>"],
    onChanged: onChangedCallback
});
function onChangedCallback(event) {
    if ($(".slider2 .owl-item:first-child").hasClass("active")) {
        $("body").addClass("back");
    }

    else if ($(".slider2 .owl-item").last().hasClass("active")) {
        $("body").removeClass("next");
    }

}

Answer 1

You use the wrong callback function of Owl. If you use instead of onChange -> onDragged it works.

 $('.slider2').owlCarousel({ loop: false, items: 1, responsiveClass: true, autoplayHoverPause: true, autoplay: false, slideSpeed: 800, paginationSpeed: 900, autoplayTimeout: 3000, navText: ["<img src='images/left.png'>", "<img src='images/right.png'>"], responsive: { 0: { items: 1 }, 360: { items: 1 }, 768: { items: 2 }, 1200: { items: 5 } }, onDragged: onChangedCallback }); function onChangedCallback(event) { if ($(".slider2 .owl-item").first().hasClass("active")) { $("body").removeClass("red"); $("body").addClass("blue"); } else if ($(".slider2 .owl-item").last().hasClass("active")) { $("body").addClass("red"); $("body").removeClass("blue"); } }

 .red { background: red; } .blue { background: blue; } .carousel-wrap { margin: 90px auto; padding: 0 5%; width: 80%; position: relative; } /* fix blank or flashing items on carousel */ .owl-carousel .item { position: relative; z-index: 100; -webkit-backface-visibility: hidden; } /* end fix */ .owl-nav > div { margin-top: -26px; position: absolute; top: 50%; color: #cdcbcd; } .owl-nav i { font-size: 52px; } .owl-nav .owl-prev { left: -30px; } .owl-nav .owl-next { right: -30px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css"> <body class="blue"> <div class="carousel-wrap"> <div class="slider2 owl-carousel"> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> <div class="item"><img src="http://placehold.it/150x150"></div> </div> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>

how to add class on body if owl first item active and remove class if last item is active?

Question

1 answers

solution1
0 ACCPTED 2019-09-11 07:21:37

how to add class on body if owl first item active and remove class if last item is active?

Question

1 answers

solution1 0 ACCPTED 2019-09-11 07:21:37

solution1
0 ACCPTED 2019-09-11 07:21:37