owl carousel behaving vertically when the page is first loaded

Question

when the page is first visited it would be like this after refresh it behaves normally as horizontal slider,it also react like this in desktop screens after refresh or resize only it behaves properly

<div class="owl-carousel slider">
    <div class="item slider-items">
        <img src="./assets/images/bp5c.png"alt=''>
    </div>
    <div class="item slider-items">
        <img src="./assets/images/bp5r.png"alt=''>
    </div>
    <div class="item slider-items">
        <img src="./assets/images/bp5l.png"alt=''>
    </div>
</div>

$(document).ready(function() {
    if ($('.owl-carousel').length) {
    $('.owl-carousel').owlCarousel({
      loop: true,
      items: 1,
      autoWidth: true,
      margin: 10,
      center: true,
      smartSpeed: 1500,
      autoplay: true,
      autoplayTimeout: 3000,
      autoplayHoverPause: true,
      responsive: {
        1000: {
          items: 3,
          margin:94
        },
      }
    });
  }
}

Apply a loader till the page load fully and once it's loaded remove the loader. The current glitch you have is occurring when the page load takes a bit more time. — Alive to die - Anant, Jul 20 '23 at 07:29
use this answer and see it's working or not: https://stackoverflow.com/questions/9630904/how-to-detect-if-a-page-has-fully-rendered-using-jquery — Alive to die - Anant, Jul 20 '23 at 07:30
even when page is completely loaded it happens, when i resize it fixes automatically — Rameez Hameed, Jul 20 '23 at 07:58

owl carousel behaving vertically when the page is first loaded

0 Answers0