Ce que j'apprends chaque jour

Modification du Carousel de Bootstrap

Juillet 2017


Code HTML

Copier le code HTLM ci-dessous à l'endroit où vous souhaitez mettre votre diaporama

<div class="bs-example well bg-10">
    <div id="carousel-example-captions" class="carousel slide" data-ride="carousel" data-interval="10000"  data-wrap="false">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
        <li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
	<li data-target="#carousel-example-captions" data-slide-to="3" class=""></li>
	<li data-target="#carousel-example-captions" data-slide-to="4" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="..."  alt="">
          <div class="carousel-caption">
            <h3><strong>...</strong></h3>
            <p>...</p>
          </div>
        </div>
        <div class="item">
          <img src="..."  alt="">
          <div class="carousel-caption">
            <h3><strong>...</strong></h3>
            <p>...</p>
          </div>
        </div>
        <div class="item">
          <img src="..." alt="">
          <div class="carousel-caption">
            <h3><strong>...</strong></h3>
            <p>...</p>
          </div>
        </div>
	<div class="item">
          <img src="..." alt="">
          <div class="carousel-caption">
            <h3><strong>...</strong></h3>
            <p>...</p>
          </div>
        </div>
	<div class="item">
          <img src="..." alt="">
          <div class="carousel-caption">
            <h3><strong>...</strong></h3>
            <p>...</p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
  	<div class="new-caption-area"></div>
</div>

Code CSS

A placer le code CSS ci-dessous entre les balises "style" en haut de page

.bs-example, .new-caption-area {
    width: 100%;
	max-width: 800px;
    margin: auto;
    color: #000;
  }

.new-caption-area h3 {
text-align: center;
	font-size: 1.5em;
	color: rgb(105, 0, 0);
}
.bg-10 { 
      background-color: #DCDCDC; /* Gainsboro*/
      
  }

Code javascript

A mettre en fin de page la balise "script" ci-dessous

			jQuery(function ($) {
    $('.carousel').carousel();
    var caption = $('div.item:nth-child(1) .carousel-caption');
    $('.new-caption-area').html(caption.html());
    caption.css('display', 'none');

    $(".carousel").on('slide.bs.carousel', function (evt) {
        var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
        $('.new-caption-area').html(caption.html());
        caption.css('display', 'none');
    });
});

Les options du diaporama

data-interval

Pour définir le temps entre deux slides en milliseconde. La valeur par défaut et de 5000 soit 5s.

Si vous fixez la valeur par "false" le diaporama ne sera plus automatique.

data-wrap

Pour définir si le diaporama doit faire voir les slides en permanence ou s’il doit s'arrêter au dernier slide.

Soit "true" pour un cycle continu ou "false" pour arrêter au dernier slide.