Easy Slider 1.7 возникли проблемы, пожалуйста, помогите мне

Question

Я работаю на сайте http://thesunkissedgirls.com.au/

и с помощью Easy Slider 1.7, но у меня возникают проблемы с тем, что когда я перезагружаю страницу, все слайдеры загружаются под первым слайдером, а затем запускаются.

Я использую этот код:

<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true,
            numeric: true,
            speed: 500,
            pause: 5000,
            controlsShow: false
        });
    }); 
</script>

, пожалуйста, помогите мне исправить эту ошибку.

спасибо.

Answer 1

Просто поместите скрипт easySlider рядом с div слайдера в теле или лучше после него.

<div id="slider">
        <ul>

<li><a href="?id=1"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>

<li><a href="?id=2"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>         
<li><a href="?id=3"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>

<li><a href="?id=4"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>

<li><a href="?id=5"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>         
</ul>

<!--  Slider ends  -->  
</div>


<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true,
            controlsShow: true,
            prevId: 'prevBtn',
            nextId: 'nextBtn',
            pause: 5000
        });
    }); 
</script>

Answer 2

Перед инициализацией слайдера небольшая задержка.Вы можете попытаться скрыть все изображения, кроме первого, перед инициализацией слайдера:

Что-то вроде $('#slider li:not(:first)').hide(); должно сработать.Не забудьте показать их снова после инициализации слайдера.То же самое можно сделать с помощью CSS и класса тела.

ОБНОВЛЕНИЕ Вот что я хотел бы попробовать:

Добавить класс в контейнер и первый элемент списка:

<div id="slider" class="loading">
    <ul>
        <li class="first">
            <a href="http://thesunkissedgirls.com.au/models">
                <img src="http://thesunkissedgirls.com.au/wp-content/uploads/2011/06/slider_262.jpg" alt="slide1" />
            </a>
        </li>
        <li>
        […]
        </li>
    </ul>
</div>

Добавьте немного CSS, чтобы скрыть все элементы, кроме первого, если оболочка имеет класс .loading:

#slider.loading li { display: none; }
#slider.loading li.first { display: block; }

И, наконец, удалите класс .loading, как только все будет установлено–Up:

<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider")
            .easySlider({
                auto: true, 
                continuous: true,
                numeric: true,
                speed: 500,
                pause: 5000,
                controlsShow: false
            })
            .removeClass('loading');
    }); 
</script>