CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcarousel
Warre Buysse
Warre Buysse

Reputation: 1345

Bootstrap carousel doesn't want to slide

Morning,

I have a carousel with 3 rows, each containing 8 thumbnails. I used this carousel to build it, but for some reason it won't work.

http://bootsnipp.com/snipps/thumbnail-carousel?codekitCB=399456659.566563

My code:

<div class="container">
<div id="myCarousel" class="matrix matrix-scroller carousel slide">
<!-- Carousel items -->

    <div class="row">
        <div class="carousel-inner">
            <ul class="unstyled inline">
                <div class="item active">
                    <div class="row">
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="1" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square magenta span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="2" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                        <li class="square magenta text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                    </div>
                </div>
            </ul>
        </div>
        <!-- carousel nav-->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev" ></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next" ></a>
        <!--/carousel-->
    </div><!--/row-->
</div><!--/myCarousel-->

Upvotes: 0

Views: 221

Answers (1)

Simon Staton
Simon Staton

Reputation: 4505

Thought I would put it into an answer and provide code, but I would assume it is because you are nesting a <ul> directly inside "carousel-inner" when it should move directly onto an "item".

Also you didn't include it in your code so just want to make sure you are including bootstrap and jquery in your page and also adding this line as well as the needed css:

<script type="text/javascript">
$(document).ready(function() {
    $('#myCarousel').carousel({
    interval: 10000
    })
});
</script>

Try this and see if it works:

<div class="container">
<div id="myCarousel" class="matrix matrix-scroller carousel slide">
<!-- Carousel items -->

    <div class="row">
        <div class="carousel-inner">
             <div class="item active">
                <div class="row">
                     <ul class="unstyled inline">
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="1" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square magenta span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" data="1" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span txt-data="2" class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" data="2" src="images/content/dummy-man01.png"/></a></li>
                        </ul>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                     <ul class="unstyled inline">
                        <li class="square magenta text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square yellow span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        </ul>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                     <ul class="unstyled inline">
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square orange span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square green span1"><a href="#"><img class="square_image" alt="" src="images/content/dummy-man01.png"/></a></li>
                        <li class="square green text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square orange text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        <li class="square cyan text-holder span1"><img alt="" src="images/layout/square-transparent.png" /><span class="text"><a href="#">“Duis id aliquam purus. nulla sodales auctor pretium.” <i class="lees-meer">lees meer &raquo;</i></a></span></li>
                        </ul>
                    </div>
                </div>
            </ul>
        </div>
        <!-- carousel nav-->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev" ></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next" ></a>
        <!--/carousel-->
    </div><!--/row-->
</div><!--/myCarousel-->

Upvotes: 2

Related Questions