0

I am using Flexslider to display items and their respective images.

What happens is that on page load, all li's are displayed first like a list with bullets. After a second, the plugin gets applied.

I tried hiding the original list (without plugin applied) through CSS but didn't work.

Edit: I also tried document.ready. That didn't help either.

Edit: I am also OK with the solution that suggests to hide the content unless the plugin is applied.

Let me know if any other details are needed. Excuse me for English is not my first language.

Here is my code.

HTML:

<div id="slider" class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
    </ul>
</div>

<div id="carousel" class="flexslider">
      <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

JS:

$(window).load(function() {

$('#carousel').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   itemWidth: 210,
   itemMargin: 5,
   asNavFor: '#slider'
});

$('#slider').flexslider({
   animation: "slide",
   controlNav: false,
   animationLoop: false,
   slideshow: false,
   sync: "#carousel"
});

});
Mehdi Bouzidi
  • 1,937
  • 3
  • 15
  • 31
Shailesh Hatte
  • 1
  • 4

2 Answers2

0

Try using document ready event instead of window load -

jQuery(document).ready(function ($) {
Nikhil G
  • 2,096
  • 14
  • 18
0

The problem here is the fact that you are performing the plugin initialization at the $(window).load(...) event. The thing with load event is that it waits until all the content and all the images on the pages are fully fetched. You probably need here an $(document).ready(...) event handler. This will execute more early and you'll hopefully won't see any blinks.

$(document).ready(function() {
  $('#carousel').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider',
  });

  $('#slider').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: '#carousel',
  });
});

You can read more here about the $(document).ready(...) event. It is useful in a lot of the contexts. You'll have a good amount of benefit from reading about the DOMContentLoaded, which is a modern alternative to the jQuery's ready and it is preferred these days.

Andrei Glingeanu
  • 622
  • 6
  • 17