Весь слайдер прыгает под нагрузкой - AnythingSlider

Question

Я использую AnythingSlider для размещения контента на этом сайте для нового сайта:

http://sitedev.lcadfiles.com/interactive_barrett.html

Когда ползунок сначала загружается на заданную страницу, происходит небольшой скачок (весь ползунок, стрелки и т. Д. Сдвигаются на несколько пикселей перед тем, как занять правильное положение). После приземления все вроде работает нормально. Сдвиг, похоже, не зависит от браузера, так как он происходит на моих старых и более новых машинах с 4 разными браузерами (и разными версиями браузера).

Есть ли что-то, что я установил неправильно? Я предполагаю, что это может быть где-то глобально, как что-нибудь что угодно. (Или, может быть,.css - хотя это кажется менее вероятным), но я не видел ничего, что выделялось.

Answer 1

Была такая же проблема. Быстрый обходной путь (работает для меня).

например. у вас есть HTML-код, как показано ниже, добавьте style="visibility:hidden;" в ваш контейнер anythingslider.

<div id="slider_nest" style="visibility:hidden;">
    <ul id="your_anythingslider">
    ...
    </ul>
</div>

в коде js измените стиль на видимый, когда документ будет готов. например.(JQuery)

jQuery(document).ready(function($) {
    $('#slider_nest').css('visibility', 'visible');
    ...
    $('#your_anythingslider').anythingslider();
    ...
}

Надеюсь, поможет!

Обновление: добавьте ползунок маски с загрузчиком GIF.

например. в HTML у вас будет что-то вроде ниже:

<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center;     display:block; height:568px; width:1050px; margin:0 auto;">
</div>
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;">
    <ul id="your_anythingslider">
    ...
    </ul>
</div>

Теперь в JS (JQuery):

jQuery(document).ready(function($) {
    $('#slider_mask').hide();
    $('#slider_nest').css({'display':'block'});
    ...

Answer 2

О боже, это наконец решило нашу проблему! Спасибо.

Так как я использую плагин Wordpress для пользовательской темы, мне пришлось настроить его примерно так:

Добавьте это перед шорткодом в файле header.php:

<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;">
</div>

Добавьте это в раздел файла header.php:

<script type="text/javascript"> 
    $(document).ready(function(){
    $('#slider_mask').hide();           
    $('.anythingSlider').css({'display':'block'});
}

Добавьте это в файл CSS:

.anythingSlider {display:none;}