0

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
user3465377
  • 33
  • 9
  • Could you setup a codepen.io for this please as there is several external resources to be added before I can see it and fiddle with it, or a live site would work fine – Spade Jun 25 '15 at 19:48
  • `` *must* go after `jQuery`. Also, don't duplicate `jQuery` includes, use one :) – Morpheus Jun 25 '15 at 20:09

1 Answers1

1

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.

Community
  • 1
  • 1
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
  • @Coading Enthusiast i tried your suggestion but still its not working. I am still not able to switch to another slide. – user3465377 Jun 25 '15 at 20:38
  • @coading I tried your suggestion but I am still not able to click on next or previous slides. More I am getting error in console like "not allowed to load local resources" Not allowed to load local resource: file:///G:/carousel/index.html – user3465377 Jun 25 '15 at 21:10
  • @user3465377 edited answer with a link that has a fix for that problem – Coding Enthusiast Jun 27 '15 at 09:33