CODEWITHSUNDEEP
jqueryhtmlcarousel
bluetint
bluetint

Reputation: 13

Bootstrap Carousel Not Working

I'm struggling with Bootstrap carousel on my site. I've followed the instructions and looked for answers here and I'm still stuck, seems like everything I've done is ok..yet it clearly isn't! My carousel is not working. Why isn't it working?

I've been sitting on this so long and getting nowhere so I will really appreciate your help guys.

Many thanks!

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Hello World!</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Catamaran:300,400,100' rel='stylesheet' type='text/css'>

<script src="js/bootstrap-carousel.js"></script>


<script type="text/javascript">

$(document).ready(function() {
    $('#myCarousel').carousel({
    //options here
    });
});

</script> 
    <!-- Custom styles for this template go here -->

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    </head>

    <body>

        <div class="nav">

            <div class="logoimg">

                <img src="img/logo3.png">


            </div>

            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="about.html">About</a>
                </li>
                <li><a href="faq.html">FAQ</a>
                </li>
                <li><a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>


        <!-- Carousel -->

        <div id="carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="img/slide1.jpg" alt="Slide 1">
                </div>

                <div class="item">
                    <img src="img/slide2.jpg" alt="Slide 2">
                </div>

                <div class="item">
                    <img src="img/slide3.jpg" alt="Slide 3">
                </div>
            </div>


            <!-- Controls -->
            <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


        <!-- Carousel End-->


    </body>

    </html>

Upvotes: 1

Views: 4901

Answers (2)

Bettelbursche
Bettelbursche

Reputation: 443

The order is also important. First you must include jquery and then bootstrap, otherwise it will not work.

This is the correct order:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>

Upvotes: 0

Nicholas Hazel
Nicholas Hazel

Reputation: 3750

Very simply put, you didn't include the jQuery library. Here is the error console is showing:

ReferenceError: $ is not defined

9 times out of 10 this can be solved by loading jQuery in the head of your document. Like so:

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:300,400,100' rel='stylesheet' type='text/css'>
<!-- This is the important part -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

In essence, vanilla javascript has NO idea what this code means, as it is specific to jQuery syntax:

$(document).ready(function() {
    $('#myCarousel').carousel({
    //options here
    });
});

Therefore your carousel is never loaded or rendered and only the plain HTML is being shown.

Upvotes: 1

Related Questions