Jssor - как предотвратить краткий показ последнего слайда при загрузке?

Question

У меня установлен слайдер Jssor для отображения 2 слайдов, и проблема в том, что последний слайд кратко отображается при загрузке в Internet Explorer 9. Как я могу предотвратить это краткое появление последнего слайда? (Я знаю, что отображается последняя сторона, а не второй слайд, потому что я пробовал другие номера слайдов). http://www.jssor.com/demos/content-slider.html - это шаблон, который я использовал для простого создания слайдера. Я думаю, что я вызвал эту проблему при изменении шаблона, но пока не нашел его. Это мой контейнер для слайдов:

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

Answer 1

Если вы используете версию jquery, слайдер jssor инициализирует и форматирует пользовательский интерфейс после загрузки документа. Перед инициализацией он сохраняет первоначальный вид необработанного HTML.

Чтобы изменить внешний вид необработанного HTML, вы можете указать 'position: absolute; верх:... px; слева:... px; ' для любого слайда / миниатюры, чтобы показать / скрыть его.

Следующий код покажет первый слайд и скроет другие слайды. И вы можете скрыть миниатюры перед инициализацией по стилю 'position: absolute; верх: 0px; слева: -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>

Пожалуйста, смотрите http://www.jssor.com/testcase/content-slider.source.html