Ce que j'apprends chaque jour

Modification de "carousel-caption" de Bootstrap

Juillet 2017

Il s'agit ici de déplacer la position de "carousel-caption" afin de la positionner en dehors de l'image par exemple.

Nous pouvons ainsi, placer un texte plus important sous le "carousel" ou sur le côté.

Dans l'exemple ci-dessous nous avons choisi de positionner cet élément à droite de l'image lors d'une visualisation sur PC qui deviendra sous le "carousel" lors de la visualisation sur smartphone.

 

Éléments complémentaires à ajouter

A placer à l'endroit souhaité :

&alt;div class="col-md-4 container-fluid">
&alt;div class="new-caption-area">&alt;/div>
&alt;/div>					

Ajouter les codes CSS dans la partie "head" :

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

.new-caption-area h3 {
text-align: left;
	font-size: 1.5em;
	color: rgb(105, 0, 0);
}

Placer en fin de page le script suivant :

			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');
    });
});