CODEWITHSUNDEEP
jqueryjssor
user3911303
user3911303

Reputation: 13

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

I have Jssor Slider set to display 2 slides, and the problem is that the last slide displays briefly on load in Internet Explorer 9. How can I prevent this brief appearance of the last slide? (I know it's displaying the last side rather than the second slide because I've tried other numbers of slides). http://www.jssor.com/demos/content-slider.html is the template I used to easily create my slider. I'm thinking I caused this problem when modifying the template but have yet to find it. This is my Slides Container: 

            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 970px; 
                height: 255px; overflow: hidden;">
                <div>
                    <img src="/includes/jssor/country_en_nolink.jpg" alt="description" style="position: absolute; top: 0px; left: 0px; width: 970px; height: 255px;" />
                    <img u="thumb" src="/includes/jssor/country_en_nolink_thumb.jpg" />
                </div>                 
                <div>                        
                    <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 u="thumb" src="/includes/jssor/KM-Banner-970x255-thumb.jpg" />
                </div>
            </div>

Upvotes: 1

Views: 382

Answers (1)

jssor
jssor

Reputation: 6985

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.

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

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;'.

        <!-- 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>

Please see http://www.jssor.com/testcase/content-slider.source.html

Upvotes: 1

Related Questions