Question

我目前正在我的网站http://www.ambassadorsofnowhere.com上使用jQuery carouses。但是当第一页加载时，轮播首先显示所有图片，一秒钟后消失，然后工作正常。以前有人有这个问题吗？您可以在下面看到轮播中的图像列表

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

Answer 1

好吧，这个CSS解决方案可以解决这个问题：

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

尝试一下，并最终根据您的需求进行调整，这只是为了向您展示原则。

Answer 2

你可以设置display：none用于列表项除了第一项然后调用之前jQuery carousel设置显示要阻止的项

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

jQuery Carousel首先显示所有图片然后工作正常

2 个答案: