Search code examples
jquerycsstwitter-bootstrapcarousel

Bootstrap Carousel not sliding from one picture to the next

The carousel will not slide from one picture to the next.

Here 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" />
<meta name="viewport" content="width=device-width, initialscale=1.0" />
<title>Economic Prosperity - The No.1 Minecraft Economy Server!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<style>

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 400px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

</style>
</head>
<body>

    <div class=" navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a href="#" class="brand">Economic Prosperity</a>

                        <ul class="nav pull-left">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Forum</a></li>
                            <li><a href="#">Vote</a></li>
                            <li><a href="#">Donate</a></li>
                            <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Server Status:</b></a></li>
                            <li><a href="#" style="color:#00CC00"><b>Online</b></a></li>
                        </ul>

                        <div class="nav pull-right">
                        <a class="btn btn-primary">Log In</a>
                        </div>
                </div>    
            </div>
        </div>
    <div class="container" style="width:100%;"> <!--Start of Carousel -->
        <section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">



            <div class="active item">
                <img src="http://fc07.deviantart.net/fs71/f/2010/299/f/6/minecraft_cave_by_harryisland-d31jtwd.jpg" alt="Slide1" />
            </div>
            <div class="item">
                <img src="http://fc05.deviantart.net/fs70/i/2013/066/6/d/minecraft_grass_background_by_lastvoltage-d5x9vzb.png" alt="Slide2" />
            </div>
            <div class="item">
                <img src="http://img16.imageshack.us/img16/4206/tapeta16x9.png" alt="Slide3" />
            </div><div class="carousel-caption" >
            <h1 style="color:#999">EcoPro - The No.1 Server dedicated to Economy!</h1>
            <p class="lead">Sell your items, trade with players, sell on the auction and even set up your own shop in a city!</p>

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

    <div class="hero-unit" style="width:90%; margin-right:auto; margin-left:auto;"> <!-- Start Hero -->
    <h2>What is EcoPro all about?</h2>
    <p>We aim to provide the best server out there with the sole main aim of gaining wealth to purchase benefits. Our server is not just your standard server, we put effort, time and skill into the creation of it. The sole aim of this server is to entertain YOU as best it can. The server is 100% non profit, so all of the donations recieved go straight back into the server to add to the quality of your gaming experience!
    <p><a href="#" class="btn btn-info">Tell me more!</a></p>
    </div> <!-- End Hero Unit -->

    <div class="container" style="width:400px; float:left; margin-left:2%"> <!-- Server Features -->

    <div class="well">

        <h3>The Server's main Features:</h3>
        <p>
        <li>Economy (Duh!)</li>
        <li>Custom World</li>
        <li>Cities</li>
        <li>Wealth based ranks</li>
        <li>McMMo + Spells + Shops + More!</li>
        </p>

    </div>
    </div> <!-- End server features -->

    <div class="container">

    <img src="" width="140px" height="140px" class="img-circle" />

    </div>


<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script>
// Load this when the DOM is ready
$(function(){
  // You used .myCarousel here. 
  // That's the class selector not the id selector,
  // which is #myCarousel
  $('#myCarousel').carousel();
});
</script>

</body>
</html>

I need only for the buttons to work, I have looked at this for ages and cannot figure out what is wrong. I have also looked at other answers and they have not helped.

Solution

  • You had included two jQuery files, you need to remove one.

    Also you need to put the div with a class carousel-caption within the div which contains the items, although I am not sure about that.

    As long as you don't want the slider to move on its own, you can also remove the javascript at the bottom of the page as well.

    With this changes, the slider seems to be working, you can look at the code at JS Bin, also look at the full screen demo