CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Kendrick
Kendrick

Reputation: 11

Bootstrap Carousel is not changing pictures or sliding

my Bootstrap carousel is not changing pictures. It's not sliding automatically or allowing me to choose another picture. It's only showing the active picture at any given time. 

<!--HTML Code-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootsrtap </title>
    <meta name="description" content="Hello World">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <!--My Links-->
    <link href="css/boostrap.mincss" rel= "stylesheet">
    <link href="css/styles.css" rel = "sylesheet">  

    <style >
    .grey{
            background-color: #000;
            padding: 20px;
    }
    </style>


</head>

<body>
<!--Presumably this is where the problem is-->
        <div id= "myCaroussel" class = "carousel"> 

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

            <div class= "carousel-inner">

                <div class = "item ">
                    <img src="ottawa_option.jpg" alt = "Ottawa" class = "img-responsive">
                </div> 

                <div class = "item ">
                    <img src="toronto_option.jpg" alt = "Toronto" class = "img-responsive">
                </div>  

                <div class = "item active ">
                    <img src="vancouver_option.jpg" alt = "Vancouver" class = "img-responsive">
                </div>      

                <!--<div class= "row"> <div class= "well"> This be first Row</div>
                <div class= "row"> <div class= "well">This be second Row</div>
                <div class= "row"> <div class= "well">This be third Row</div> -->

        </div>  

     </div>



        <div class="grey">

            <div class= "container">
                <div class="well"> This</div>
            </div>  

    <footer>
        <div class="container">
            <hr>

            <p>
                <small><a href="http://facebook.com/askorama">Like me</a> On facebook</small></p>
            <p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p>
            <p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small>

            </p>
        </div> <!-- end container -->
    </footer>

I tried fooling around with adding jQuery scripts and so on, but nothing yet seems to work. This for stakcoverflow purpose only

The source of the pics is not the issue, as I can display them all at once, or individually, but not as a carousel slide.

Upvotes: 0

Views: 7384

Answers (2)

Tanvir
Tanvir

Reputation: 1695

I think you have missed to add jquery and bootstrap.js.Please follow "macro Del Valle"'s answer or you can add them from the corresponding site.

Then if you want it to auto slide then add slider class.

Your code:

<div id= "myCaroussel" class= "carousel">

Updated Code:

<div id="myCaroussel" class="carousel slide" data-ride="carousel">

Hope it will solve your problem.

Upvotes: 1

M -
M -

Reputation: 28482

Place this at the end of your <body> tag:

<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.4/js/bootstrap.min.js"></script>

Upvotes: 2

Related Questions