My carousel with bootstrap is not working!

Navigation
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>

    
asked by anonymous 22.12.2016 / 14:42

1 answer

5

You are calling the 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>

Remembering that jquery.min.js should always be first.

You have to put the DIV ID as #myCarousel. 

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

Instead of: carousel-example-generic

    
22.12.2016 / 14:48
Possibility to view doc, docx in browser What is the correct way to choose the types of columns? [closed]