Carousels - Slideshow de textes (quote slideshow)

→ Un Slideshow de textes... (quote slideshow)

C'est le type de fonctionnement ci-dessous, totalement responsive si son contenu l'est... bien sûr. On peut y placer du texte, pour un édito, mais aussi des images... sa hauteur s'adapte à son contenu. La durée d'affichage des "slides" est paramétrable.

Un exemple fonctionne dans la partie démo de ce site.

Il est issu de ce tutoriel : https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp . J'avais pu ajouter une barre de progression et un défilement automatique dans sa première version. En m'y replongeant après long temps de réflexion... j'ai pu ajouter un système, finalement simple à réaliser, de bouton Play/Pause... Voir ci-dessous et sujet de cette mise à jour du 08/08/2024.

Faux Texte 1

Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

puzzle

Pour mettre en place ce procédé, dans une page ou une boîte, il faudra déclarer le style au début du code source encadré des balises [style type="text/css"]...[/style] ou bien appelé, comme c'est le cas sur ce site dans un fichier spécifique nommé ici quoteslide.css (décrit plus bas) et placé dans le dossier skin/css d'adHoc ainsi :


 <link charset="utf-8" href="skin/css/quoteslide.css" rel="stylesheet" />

Et un script .js à la fin du code source (inhabituel mais indispensable...) encadré des balises [script]...[/script] ou bien appelé, comme c'est le cas sur ce site dans un fichier spécifique nommé ici quoteslide.js (décrit plus bas) et placé dans le dossier skin/js d'adHoc ainsi :


<script charset="utf-8" type="text/javascript" src="skin/js/quoteslide.js"></script>

Vous pouvez télécharger ces deux fichiers ici : quoteslide.zip.

Ci-dessous, le contenu du fichier quoteslide.css commenté le plus possible. Vous pouvez vous en inspirer. Veuillez laisser cependant les références à ses origines et à mon site SVP.


/* D'après le tutoriel trouvé ici : */
/* https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp */
/* Adaptations, ajout de la barre de progression Jean-Denis https://adhoc.71site.fr avril 2021 */
/* Ajout du bouton Play/Pause août 2024 */

/* Quoteslideshow "container" */
.quoteslideshow-container {
	position: relative;
	background: rgba(0,0,0,.6); /*couleur fond*/
	border-radius: 10px 10px 0 0; /*arrondis haut*/
}

/* Citations */
.mesCitations {
	display: none;
	padding: 30px 80px; /*marges intérieures*/
	text-align: center; /*alignement*/
}

/* Boutons de navigation */
.prev, .next, .pause {
	cursor: pointer;
	position: absolute;
	top: 50%; /*position*/
	width: auto;
	margin-top: -30px; /*marge extérieure haute*/
	padding: 16px; /*marges intérieures*/
	color: #111; /*couleur*/
	font-weight: bold; /*gras police*/
	font-size: 20px; /*taille police*/
	border-radius: 3px; /*arrondis*/
	user-select: none;
	background: rgba(255,255,255,.6); /*couleur fond*/
}

.pause {
	position: relative;
	padding: 0 100px; /*marges intérieures*/
}

.prev {left:0; margin-left:1%;} /*position et marge à gauche*/
.next {right:0; margin-right:1%;} /*position et marge à droite*/

/* Boutons de navigation au survol */
.prev:hover, .next:hover, .pause:hover {
	background-color: rgba(120,120,120,0.8); /*couleur fond*/
	color: #fff; /*couleur*/
}

/* Barre de progression */
.barre-progression {
	width: 0; /* !!! IMPORTANT : Laisser à 0 !!! */
	height: 1px; /*hauteur*/
	background-color: rgba(102, 158, 185, .5) /*couleur : #669EB9*/;
}

/* Bulles de pagination "container" */
.dot-container {
	text-align: center; /*alignement*/
	padding: 10px; /*marges intérieures*/
	background: rgba(0,0,0,0.8); /*couleur fond*/
	border-radius: 0 0 10px 10px; /*arrondis bas*/
	border-bottom: 2px solid #669EB9; /*bordure : épaisseur nature couleur*/
}

/* Bulles de pagination */
.dot {
	cursor: pointer;
	height: 15px; /*hauteur*/
	width: 15px; /*largeur*/
	margin: 0 2px; /*marges extérieures*/
	background-color: #d6af84; /*couleur*/
	border-radius: 50%; /*arrondis*/
	display: inline-block;
	transition: background-color 0.2s ease; /*transition : fond temps type*/
}

/* Bulles de pagination active */
.dot.active {background-color: #669EB9;} /*couleur*/
/* Bulles de pagination au survol */
.dot:hover {background-color: #00FFFF;} /*couleur*/

/* Éléments de la citation */
.titre {
	font-weight: bold; /*gras police*/
	font-size: 24px; /*taille police*/
	color:#669EB9; /*couleur*/
	text-align:left; /*alignement*/
	padding-left:20px; /*marge intérieure gauche*/
}
.citation {
	font-style: italic;
	text-align:justify; /*alignement*/
	text-justify: auto;
	color:inherit; /*couleur*/
}
.signature {
	color: #d6af84; /*couleur*/
}

Ci-dessous, le contenu du fichier quoteslide.js commenté le plus possible. Vous pouvez vous en inspirer. Veuillez laisser cependant les références à ses origines et à mon site SVP.


/* D'après le tutoriel trouvé ici : */
/* https://www.w3schools.com/howto/howto_js_quotes_slideshow.asp */
/* Adaptations, ajout de la barre de progression Jean-Denis https://adhoc.71site.fr avril 2021 */
/* Ajout du bouton Play/Pause août 2024 */

var progressionWidth = 0; // mise à zéro progression

var valeurPause = 0; // mise à zéro pause : pas de pause

var slideIndex = 1;
  showSlides(slideIndex); // slideIndex début

function Pause() { // clic sur bouton Play/Pause
  if(valeurPause === 0) { // fait passer la valeurPause de 0 à 1 et inversement
    valeurPause = 1;
  } else {
    valeurPause = 0;
  }
}

function plusSlides(n) {
  progressionWidth = 0; // remise à zéro progression
  valeurPause = 0; // remise à zéro pause : pas de pause
  showSlides(slideIndex += n); // slideIndex prev ou next
}

function currentSlide(n) {
  progressionWidth = 0; // remise à zéro progression
  valeurPause = 0; // remise à zéro pause : pas de pause
  showSlides(slideIndex = n); // slideIndex clic sur "dot"
}

function Progression() {
  $(".barre-progression").width(progressionWidth + "%");
  if(progressionWidth < 100) { // tant que %<100 augmentation d'1/100
    if(valeurPause === 0) { // valeurPause = 0 donc pas de pause, on incrémente
      progressionWidth += 1; // augmentation d'1/100
    } else { // valeurPause = 1 donc pause on n'incrémente pas
      progressionWidth += 0; // sur pause pas d'augmentation d'1/100
    }    
  } else { // sinon slideIndex suivant et remise à zéro progression
    showSlides(slideIndex += 1);
    progressionWidth = 0;
  }
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mesCitations");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

window.onload = function () { setInterval(Progression, 70);} // régler durée affichage en équivalent 1/10ème de seconde (ex: 50 = 5 secondes)

A priori, la seule modification à faire sur ce fichier est de paramétrer la durée d'affichage des "slides" texte dans la dernière ligne :
setInterval(Progression, 70)
Vous entrez la valeur souhaitée en dixièmes de seconde (par exemple 50 = 5 secondes).

Enfin, ci-dessous, le code html à placer dans votre code source où vous souhaitez que le slider s'affiche. C'est un code simplifié.... juste pour en montrer la structure.


<div class="quoteslideshow-container">

<div class="mesCitations" style="display: block;">
<p class="titre">Titre 1</p>
<p class="citation">Contenu 1</p>
<p class="citation"><img alt="mon_image" src="images/mon_image.gif.png" style="border:0px solid;margin:0px;width:20%;" /></p>
<p class="signature">Signature 1</p>
</div><!-- fin mesCitations -->

<div class="mesCitations" style="display: none;">
<p class="titre">Titre 2</p>
<p class="citation">Contenu 2</p>
<p class="signature">Signature 2</p>
</div><!-- fin mesCitations -->

<div class="mesCitations" style="display: none;">
<p class="titre">Titre 3</p>
<p class="citation">Contenu 3</p>
<p class="signature">Signature 3</p>
</div><!-- fin mesCitations -->

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div style="text-align:center;padding-bottom:10px;">
<a class="pause" onclick="Pause()">❮❮❯❯</a>
</div>

<div class="barre-progression">
</div>

</div><!-- fin quoteslideshow-container -->

<div class="dot-container">
<span class="dot active" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span> 
<span class="dot" onclick="currentSlide(3)"></span> 
</div><!-- fin dot-container -->

Il vous faudra autant de blocs [div class="mesCitations" style="display: none;"]...[/div][!-- fin mesCitations --] que de "slides" souhaités.
ATTENTION !! le premier "slide" doit s'ouvrir ainsi : [div class="mesCitations" style="display: block;"]

Vous ajoutez dans la partie [div class="dot-container"]...[/div][!-- fin dot-container --] autant de ligne numérotées [span class="dot" onclick="currentSlide(N)"][/span] que nécessaire en conservant la première ligne ainsi [span class="dot active" onclick="currentSlide(1)"][/span].

Vous gérez le contenu comme vous l'entendez en utilisant (ou pas...) les "class" titre, citation, signature ... ou bien en en créant d'autres que vous pouvez "styler" dans le fichier de style quoteslide.css...

NB : une astuce fort utile afin de gérer le contenu plus facilement dans l'éditeur de texte Whizziwig d'adHoc (rappel : les autres éditeurs ne respecteront pas votre code, ils sont donc absolument à proscrire pour ce procédé !) :

Pour voir et travailler dans l'éditeur de texte tous les "slides" : les ouvrir, dans le code source, provisoirement ainsi : [div class="mesCitations" style="display: block;"]. Puis quand votre travail est prêt, à part pour le premier "slide", replacer, dans le code source, les autres ouvertures de balises [div class="mesCitations" style="display: none;"]

Vous pouvez utiliser d'autres caractères que ❮ et ❯ pour les flèches de navigation et le bouton Play/Pause. Les polices de caractères standards proposent d'autres solutions : < > , « » , ◄► ... Il serait possible aussi d'utiliser une police d'icône Font Awesome ( https://fontawesome.com/ ) par exemple...

Me contacter directement sur ce site pour toute question ou aide pour utiliser ce procédé, ou bien pour me proposer une autre amélioration bienvenue....

Index |Info | Imprimer | Permalien

Les 10 derniers articles

adHoc

Module Formulaire

adHoc

Module Message

Carousels

Slideshow de textes (quote slideshow)

adHoc

Module Derniers

adHoc

Module Hasard

adHoc

Module Tri Index

adHoc

Module de Nouvelles-Blog

adHoc

Module de Téléchargements

adHoc

Module de Liens

adHoc

Fork et Extraction de boîte

Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels