Ce que j'apprends chaque jour

Insérer le Carousel de Bootstrap ainsi qu'une vidéo

 Janvier 2017

Exemple du Carousel modifié


Les modifications réalisées ici ont était faites sur la base des sites web suivants :

La principale modification consiste à avoir la légende sous l'image, les autres modifications sont d'ordre esthétique.



Code HTML

<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 entre les balises "style" en haut de page

.bs-example, .new-caption-area {
    width: 100%;
	max-width: 650px;
    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 dans un balise "script"

			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.


Insérer une video dans une page Bootstrap



Intégrer facilement une vidéo de votre choix de manière responsive grâce à la classe "embed-responsive" de Bootstrap.


Les étapes

Dans un premier temps il nous faut définir une div class "embed-responsive-16by9" qui accueillera la vidéo dans votre fichier HTML. On notera que "16by9" est le ratio de la vidéo

<div class="embed-responsive embed-responsive-16by9">
...
</div>

Dans cette balise de class "embed-responsive" nous allons insérer le "code d'intégration" fourni par YouTube en y ajoutant la class "embed-responsive-item"


<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="640" height="360" src="https://www.youtube.com/embed/..." frameborder="0" allowfullscreen></iframe>
</div>