My bootstrap carousel isn’t working!

Asked

Viewed 2,234 times

1

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/js/bootstrap.min.js">
<link rel="stylesheet" type="text/css" href="bootstrap/js/jquery.min.js">
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="imagens/banner.jpg" alt="banner">
            </div>
            <div class="item">
                <img src="imagens/banner-02.jpg" alt="banner">
            </div>
        </div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</body>

css html5 bootstrap

  • Denied will close your question. You have to say what is happening, what the problem, what the mistake, put in a Fiddle to test...

  • It is not passing to the other image, this q is happening.

  • I’ve put jQuery first and nothing!

  • Is that you are calling the Bootstrap JS and jQuery file as CSS styles.

1 answer

4


You are calling JS files as CSS Styles. Change this:

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/js/bootstrap.min.js">
<link rel="stylesheet" type="text/css" href="bootstrap/js/jquery.min.js">

For this reason:

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

Recalling that the jquery.min.js must always come first.

You have to put the ID of the DIV as #myCarousel. 

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

In place of: carousel-example-generic

  • I already fixed it and it didn’t work :(

  • See if the console gives any error.

  • so I put this there and it worked in parts, like when I wait a little bit the change image, but when I press the arrow to the side no change

  • There’s a way you can put it on Jsfiddle for me to see ?

  • I found the problem.

  • Dude, I took this test to see http://www.cnv.com.br/teste/teste.html

  • I edited my question with the problem resolution.

  • 1

    Now it worked! Thank you!

Show 3 more comments

Browser other questions tagged css html5 bootstrap

You are not signed in. Login or sign up in order to post.