CODEWITHSUNDEEP
jquerycarousel
Bert Carremans
Bert Carremans

Reputation: 1733

jQuery Carousel shows all pictures first and then works fine

I am currently using jQuery carouses on my website http://www.ambassadorsofnowhere.com. But when the first page loads, the carousel first shows all pictures, which disappear after a second and then it works fine. Did anyone have this problem before? Below you can see the list of images in the 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><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>

Upvotes: 1

Views: 1538

Answers (2)

Masood S
Masood S

Reputation: 11

you can set display:none for list items except first item then before call jQuery carousel set display of items to block

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

Upvotes: 0

Artefact2
Artefact2

Reputation: 7644

Well, this CSS solution will do the trick :

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

Try it out, and eventually adapt it to your needs, this is just to show you the principle.

Upvotes: 1

Related Questions