CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapthumbnails
user3465377
user3465377

Reputation: 33

bootstrap thumbnails not working

I am trying to create a carousel for thumbnails. the Carousel is made but its not functioning. like I am not able to click on next and previous buttons and the buttons are shown on top of the carousel each side. please help me out. following is my code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>

         <link href="css/bootstrap.min.css" rel="stylesheet">
         <link href="css/carousel.css" rel="stylesheet">
         </head>
<body>
        <div class="container-fluid">
        <div class="row">
        <div class="col-md-12">
            <div class="well"> 
                <div id="myCarousel" class="carousel slide">

                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- Carousel items -->
                <div class="carousel-inner">

                <div class="item active">
                    <div class="row-fluid">
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                      <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="1.jpg" alt="Image" style="max-width:100%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                <div class="item">
                    <div class="row-fluid">
                        <div class="col-md-3"><a href="1.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="2.jpg" class="thumbnail"><img src="2.jpg" alt="Image" style="max-width:100%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                <div class="item">
                    <div class="row-fluid">
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                        <div class="col-md-3"><a href="3.jpg" class="thumbnail"><img src="3.jpg" alt="Image" style="max-width:100%;" /></a></div>
                    </div><!--/row-fluid-->
                </div><!--/item-->

                </div><!--/carousel-inner-->

                <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
                </div><!--/myCarousel-->

            </div><!--/well-->   
        </div>
    </div>
</div>

        <script src="/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="/js/lightbox.min.js"></script>
        <script src="/js/jquery-1.11.3.min.js"></script>
        <script src="/js/carousel.js"></script>
</body>
</html>

Upvotes: 0

Views: 2439

Answers (1)

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

Working bootply right here

Your code works fine, I believe your problem is coming from the js files. You are duplicating JQuery. check your console, you are probably having the error:

Uncaught Error: Bootstrap's JavaScript requires jQuery

You should Include your files in this order:

  • jQuery
  • Bootstrap

  • Your Javascript

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/lightbox.min.js"></script>
<script src="/js/carousel.js"></script>

Edit: in the comment he mentioned the resources could not load. Getting the error:

not allowed to load resources ....

That is an issue with chrome. Someone had the same issue here.

Upvotes: 1

Related Questions