There is a site with a slider.
The slide uses the SlidesJS library. Slider structure:

<div id="slider"> <div class="slide"> <div class="slide-img"> <img src="" alt="" /> </div> </div> <div class="slide"> <div class="slide-img"> <img src="" alt="" /> </div> </div> <div class="slide"> <div class="slide-img"> <img src="" alt="" /> </div> </div> <div class="slide"> <div class="slide-img"> <img src="" alt="" /> </div> </div>

There was the following problem the script works through once - we go to the page it shows just a column of pictures. We update time 4-5 and only after that the script is processed and the slider is formed. If after this, once again refresh the page, a column of pictures reappears.

  • And where and how do you connect it? - Dmitry Kalinin
  • <script type = "text / javascript" src = "/ media / js / index.js"> </ script> Right before <div id = "slider"> - votanko
  • one
    Try adding to <head> ... </ head> - Dmitry Kalinin
  • four
    mmm, well, I would, on the contrary, advise before closing the body, i.e. ... <script type = "text / javascript" src = "/ media / js / index.js"> </ script> </ body> In general, the problem is that you don’t have time to build a DOM tree, but the code slider is already starting to work. - Andrei Talanin
  • Put it in the end - everything seems to have worked, it is very strange that such a joint appears only in opera and firefox sometimes. In chrome, everything is fine. - votanko

1 answer 1

Plug in the scripts at the end of the body and run the initialization in JS :

 $( window ).load(function() { // Run code });

The slider will be initialized immediately after the page is fully loaded, if the page is written qualitatively (0-2 seconds for loading), then this solution will be optimal.

Otherwise, the best ones are to connect initialization for loading into the body :

 <body onload="yourFunction();"> //Some code </body>
  • I connected it at the end of the code and it all worked, thank you. - votanko