Création d'un carousel avec Bootstrap 3

La vidéo suivante explique comment crée un carousel avec bootstrap

Fichier index.html :

 <!DOCTYPE html>
<html>
<head>
	<meta	charset="UTF-8">
	<meta name="viewport" content="width=device-width, init-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
	<title>Apprendre DEV</title>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container">

        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">Apprendre DEV</a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bar-nav-principale" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="glyphicon glyphicon-menu-hamburger color-mob-navbar"></span>
          </button>
              
        </div>

        <div class="collapse navbar-collapse" id="bar-nav-principale">    
            <ul class="nav navbar-nav">
                <li class="active">  <a href="index.html">Accueil<span class="sr-only">(current)</span></a> </li>
                <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
                   <ul class="dropdown-menu">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">JAVA</a></li>
                        <li><a href="#">C</a></li>
                        <li><a href="#">C++</a></li>
                        <li><a href="#">C#</a></li>
                    </ul>
                </li>
                <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Framework PHP <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Symfony</a></li>
                        <li><a href="#">Laravel</a></li>
                        <li><a href="#">Cakephp</a></li>
                        <li><a href="#">Yii</a></li>
                    </ul>
                </li>
                <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Framework JS <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Backbone.js</a></li>
                        <li><a href="#">AngularJS</a></li>
                        <li><a href="#">React</a></li>
                        <li><a href="#">Meteor</a></li>
                    </ul>
                </li>
                <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CMS <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Drupal</a></li>
                        <li><a href="#">Wordpress</a></li>
                        <li><a href="#">Joomla</a></li>
                        <li><a href="#">Prestashop</a></li>
                    </ul>
                </li>
                <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ERP<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Odoo</a></li>
                        <li><a href="#">Dolibarr</a></li>
                    </ul>
                </li>
                <li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Logiciel<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Adobe Premier</a></li>
                        <li><a href="#">Illustrator</a></li>
                        <li><a href="#">InDesign</a></li>
                        <li><a href="#">Gimp</a></li>
                        <li><a href="#">Sublimtext</a></li>
                        <li><a href="#">Notepad++</a></li>
                    </ul>
                </li>
                                                            
            </ul>
        </div>    
    </div>    
</nav>

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/drupal-8_carousel.png" alt="apprendre drupal8">
      <div class="carousel-caption">
        Drupal8 Devenir le Maitre
      </div>
    </div>
    <div class="item">
      <img src="img/JAVA_carousel.jpg" alt="apprendre JAVA">
      <div class="carousel-caption">
        Apprendre la POO avec JAVA
      </div>
    </div>
    <div class="item">
      <img src="img/gimp_carousel.png" alt="apprendre gimp">
      <div class="carousel-caption">
        FAire ces premiers pas avec Gimp
      </div>
    </div>
    <div class="item">
      <img src="img/laravel_carousel.png" alt="apprendre laravel">
      <div class="carousel-caption">
        Découvrir les secrets de Laravel
      </div>
    </div>
    <div class="item">
      <img src="img/prestashop_carousel.png" alt="apprendre prestashop">
      <div class="carousel-caption">
        Votre premier E-commerce en 2 click
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-appdev" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Précédent</span>
  </a>
  <a class="right carousel-control" href="#carousel-appdev" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Suivant</span>
  </a>
</div>

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

</body>
</html> 

Fichier style.css :

 .color-mob-navbar{
	color: white;
}
.position-carousel{
	margin-top: -20px;
}