Rectangle 27 0

jquery Jssor how to prevent last slide showing briefly on load?


<!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 970px; 
            height: 255px; overflow: hidden;">
            <div style="position: absolute; top: 0px; left: 0px;">
                <img src="/includes/jssor/country_en_nolink.jpg" alt="description" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" />
                <img style="position: absolute; top: 0px; left: -300px;" u="thumb" src="/includes/jssor/country_en_nolink_thumb.jpg" />
            </div>
            <div style="position: absolute; top: -255px; left: 0px;">
                <a href="/pb/index.html"><img src="/includes/jssor/KM-Banner-970x255.jpg" alt="description 2" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" /></a>
                <img style="position: absolute; top: 0px; left: -300px;" u="thumb" src="/includes/jssor/KM-Banner-970x255-thumb.jpg" />
            </div>
        </div>

If you use jquery version, jssor slider will initialize and format ui after document load. Before the initialization, it keeps the original look of the raw html.

Thank you very much for making Jssor Slider the most useful, easiest to use responsive slider I've seen, and for letting me know how to avoid showing the last slide first. I especially value the many useful, well documented code samples.

The following code will show first slide and hide other slides. And you can hide thumbnails before the initialization by style 'position: absolute; top: 0px; left: -300px;'.

To modify the look of raw html, you can specify 'position: absolute; top: ...px; left: ...px;' for any slide/thumbnail to show/hide it.

Note