I was googling for a code and I reached this Stack Overflow page.
Owl Carousel on change not working
I tried running the code in answer and it will log something in console in every slide change.
But after few slide changes, the console's height is crossed the content. Normally the console should be shown front side and the page should be scrollable and the content should be pushed to backward but it is not happening.
I then tried on MSE and the issue is here.
There are many sites that make use of Snippet not only Stack Overflow.
Here is a sample code to reproduce the issue. Try changing the slide for 4-5 times.
var owl; $(document).ready(function(){ owl = $(".owl-carousel").owlCarousel({ autoplay: true, autoplaySpeed: 300, loop: true, navSpeed: 300, items: 1, margin: 2 }); owl.on('changed.owl.carousel', function(e) { console.log("test"); }); });body { margin: 0; padding: 0; } .owl-carousel .item { height: 120px; background: #4DC7A0; padding: 1rem; list-style: none; margin: 10px; text-align: center; color: white; font-size: 20px; line-height: 120px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script> <!-- Set up your HTML --> <div class="owl-carousel"> <div class="item"> slide1 </div> <div class="item"> slide2 </div> <div class="item"> slide3 </div> <div class="item"> slide4 </div> <div class="item"> slide5 </div> <div class="item"> slide6 </div> <div class="item"> slide7 </div> <div class="item"> slide8 </div> <div class="item"> slide9 </div> </div>credit for code : Dekel
