jQuery Carousel сначала показывает все изображения, а затем работает нормально

В настоящее время я использую jQuery на своем веб-сайте http://www.ambassadorsofnowhere.com. Но при загрузке первой страницы карусель сначала показывает все картинки, которые исчезают через секунду и потом нормально работает. У кого-нибудь была эта проблема раньше? Ниже вы можете увидеть список изображений в карусели

            <div id="slider">
            <ul id="mycarousel" class="jcarousel-skin-carousel">
                <li><img src="<?php echo base_url(); ?>img/1.jpg" width="800" height="300" alt="" /></li>
                <li><img src="<?php echo base_url(); ?>img/2.jpg" width="800" height="300" alt="" /></li>
                <li><img src="<?php echo base_url(); ?>img/3.jpg" width="800" height="300" alt="" /></li>
            </ul>
        </div>

carousel jquery
person Bert Carremans    schedule 07.04.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Что ж, это решение CSS сделает свое дело:

div.slider {
    max-width: 300px;
    overflow: hidden;
}

Попробуйте и, в конце концов, адаптируйте его к своим потребностям, это просто для того, чтобы показать вам принцип.

person Artefact2    schedule 07.04.2011
comment
к сожалению, это не работает. Все картинки по-прежнему отображаются и исчезают через секунду - person Bert Carremans; 08.04.2011

arrow_upward
0
arrow_downward

вы можете установить display:none для элементов списка, кроме первого элемента, а затем перед вызовом карусели jQuery установить отображение элементов для блокировки

 <div id="slider">
        <ul id="mycarousel" class="jcarousel-skin-carousel">
            <li><img src="<?php echo base_url(); ?>img/1.jpg" width="800" height="300" alt="" /></li>
            <li style="display:none"><img src="<?php echo base_url(); ?>img/2.jpg" width="800" height="300" alt="" /></li>
            <li style="display:none"><img src="<?php echo base_url(); ?>img/3.jpg" width="800" height="300" alt="" /></li>
        </ul>
    </div>
<script>
jQuery("#slider ul li").css("display:block");
\\ carousel call
</script>
person Masood S    schedule 07.04.2011
comment
Сначала кажется, что это решение работает, но теперь другие картинки больше не отображаются в последовательности, только первая - person Bert Carremans; 08.04.2011