Home/ Questions/Q 7441247
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:58:49+00:00

Not sure why the plugin is behaving this way but whenever I refresh the

  • 0

Not sure why the plugin is behaving this way but whenever I refresh the page with the carousel plugin, the containing div is blank for like 5-seconds then the carousel will begin to function normally–sliding through.

I created a slimmed down version just to see if there were other things getting in the way of things. Here’s what I have:

<html>
    <head>

        <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
        <link rel="stylesheet" href="css/carousel.css" type="text/css">

        <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>

        <script type="text/javascript" src="scripts/bootstrap-transition.js"></script>
        <script type="text/javascript" src="scripts/bootstrap-carousel.js"></script>

        <script type="text/javascript">
            $(function() {
                $('#myJumbotron').carousel();
            }); 

        </script>

    </head>

    <body>

        <!-- JUMBOTRON
===================================================================== -->
        <div class="container">
            <div class="row">
                <section class="span16">

                    <div id="myJumbotron" class="carousel">
                        <div class="carousel-inner">

                            <div class="item">
                                <img src="images/jumbotron.jpg" alt="Featured specials" />
                            </div>

                            <div class="item">
                                <img src="http://placehold.it/940x380" alt="Featured specials" />
                            </div>

                            <div class="item">
                                <img src="images/jumbotron.jpg" alt="Featured specials" />
                            </div>

                        </div>
                        <a class="left carousel-control" href="#myJumbotron" data-slide="prev">&lsaquo;</a>
                        <a class="right carousel-control" href="#myJumbotron" data-slide="next">&rsaquo;</a>
                    </div>

                </section>
            </div>
        </div>

    </body>

</html>

I used the SimpLESS tool to only compile the carousel.less file to its own carousel.css file and the bootstrap.min.css is unmodified as well.

You can see what’s happening when going here: furnitureroadshow.com. Any help on this would be much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    add for the first item class “active” in html, now you are waiting for 1 cycle .

    EX:

                           <div class="item active">
                            <img src="images/jumbotron.jpg" alt="Featured specials" />
                        </div>

                        <div class="item">
                            <img src="http://placehold.it/940x380" alt="Featured specials" />
                        </div>
......
    • 0