owl carousel flashing on page load

Question

I have several owl carousels running. When it first loads the carousel flashes at full width until the jquery kicks in and then resizes everything. Is there anyway to stop this? Here's my code:

Html

 <?php $k='1'; do { ?>
 <div id="owlslide<?php echo $k;?>">
     <?php do { ?>
       <div class="owlItem ">
         <-- some other stuff -->
       </div>
     <?php  } while();?>
 </div>
 <?php $i++; } while();?>

Jquery (owl)

 $(document).ready(function(){
<?php $i='1'; do { ?>
 $("#owlslide<?php echo $i;?>").owlCarousel({
  autoPlay: false, //Set AutoPlay to 3 seconds
  paginationNumbers: true,
   itemsCustom : [
    [0, 1],
    [450, 1],
    [600, 2],
    [700, 2],
    [1000, 3],
    [1200, 4],
    [1400, 4],
    [1600, 5]
  ],        
  });
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?>

});

You can add some loader to page and just remove that after all jquery completes. — Harsh Sanghani, Dec 02 '15 at 11:46

score 11 · Accepted Answer · answered Dec 02 '15 at 23:28

You can hide the carousel items with display: none; in your CSS, then show them after the carousel has initialized by binding a handler to the initialized.owl.carousel event. I find it's best to combine it with a placeholder that has a loader gif to further reduce page jump.

var carousel = $('#owlslide');
carousel.on({

    'initialized.owl.carousel': function () {
         carousel.find('.item').show();
         carousel.find('.loading-placeholder').hide();
    }

}).owlCarousel(options);

Note that you have to bind the handler before you initialize the carousel.

I couldn't get `initialized.owl.carousel` to work so I set style `.rotating-item { display:none }` and then after the owlCarousel jquery used the following to show `$('#rotator .rotating-item').show();` — Nick W, Aug 20 '19 at 10:15

Kamlesh Helaiya · Answer 2 · 2018-08-10T13:19:16.473

3

still not a best solution, but if you set the opacity to 0, it will work at some level and all the items will not be there on page load.

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
}

edited Aug 10 '18 at 13:19

answered Aug 10 '18 at 12:57

Kamlesh Helaiya

31
2

score 1 · Answer 3 · answered Sep 05 '17 at 22:30

If you are using OwlCarousel2, the plugin attaches the CSS class .owl-loaded to the .owl-carousel after it has finished rendering the carousel items. Simply set display: none on the container and reset display: block on the appended class.

i.e. In your CSS file:

.owl-carousel {
    display: none; 
}

.owl-carousel.owl-loaded {
    display: block;
}

score 1 · Answer 4 · answered Nov 14 '19 at 09:38

1

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
    visibility:hidden;
    height:0;
}

Try this.

answered Nov 14 '19 at 09:38

Shurvir Mori

2,288
1
17
29

score 1 · Answer 5 · answered Jul 01 '20 at 12:50

Hello beloved developers,

I'm using Bootstrap 4 framework, so I added a .d-block class next to .owl-carousel class, and then I added a .d-none in all clild elements, except the 1rst one (I want the 1rst visible from the beginning).

So on init, you will need to run jQuery:

 var heroslider = $('#hero-slider');
    
    heroslider.on('initialize.owl.carousel', function(event) {
       $('#top-news').find(".owl-dot").eq(0).addClass("active");
       heroslider.find(".slider-item").removeClass('d-none');
    });

  heroslider.owlCarousel({
     loop: false,
     rewind: true,
     responsiveClass: true,
     margin: 0,
     dots: true,
     smartSpeed: 900,
     autoHeight: true,
     autoplay: true,
     autoplayTimeout: 8000,
     autoplayHoverPause: true,
     responsive:{
         0:{
             items:1,
             nav:false
         },
         600:{
              items:1,
              nav:false
         },
         1000:{
              items:1,
               nav:false
         }
      }
   });

It is not working. When page is loading lot of space is there vertically. — Khushbu Vaghela, Dec 07 '21 at 07:47

score 1 · Answer 6 · answered Jul 09 '21 at 04:54

Create a mask or an empty div to hide the complete slider block/div and add funtion to hide mask and show the slider on iniliatize event of owl carousel

    $('.my-carousel').owlCarousel({
        items: 1,
        lazyLoad: true,
        onInitialized: showSlider
    });

    // Call back function onInitialized
    function showSlider(e) {
        $(".my-carousel-mask").hide();
        $(".my-carousel-gallery").show();
    }

score 0 · Answer 7 · edited Apr 25 '16 at 14:30

0

$('.item').trigger('initialized.owl.carousel').show();

edited Apr 25 '16 at 14:30

gvlasov

18,638
21
74
110

answered Apr 25 '16 at 14:11

oliver taylor

1

2

Welcome to Stackoverflow. Thank you for your answer to this question. To Improve this answer explain why this will solve the OP's problem and where in their example code they should put this. For more information about writing good answers, see https://stackoverflow.com/help/how-to-answer – Peter Campbell Apr 25 '16 at 14:36

score 0 · Answer 8 · answered Oct 06 '17 at 11:27

0

Just hide images on loading and will auto show when loading complete!

.owl-carousel.loading{

 display:none;

}

answered Oct 06 '17 at 11:27

Pan Bouradas

179
1
6

owl carousel flashing on page load

8 Answers8