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'ai pu ajouter une barre de progression et un défilement automatique. J'aurais souhaité pouvoir ajouter un système de Pause au survol... ou de bouton Play-Pause... Hélas... Avis, donc, aux adeptes de la programmation .js ! Je suis preneur de toute solution...

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 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 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 */

/* 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 {
	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*/
}
.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 {
	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 */

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

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

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

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

function Progression() {
  $(".barre-progression").width(progressionWidth + "%");
  if(progressionWidth < 100) { // tant que %<100 augmentation d'1/100
    progressionWidth += 1;
  } 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 (sauf si vous me proposez une solution Play-Pause... clin ) 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 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: none;">
<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 class="barre-progression">
</div>

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

<div class="dot-container">
<span class="dot" 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...

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 à 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. 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 sur le forum de ce site ou directement pour toute question ou aide pour utiliser ce procédé, ou bien pour me proposer une amélioration bienvenue....

Index |Info | Imprimer | Permalien

Les 8 derniers articles

adHoc

Module DerniersMaj

adHoc

Module HasardMaj

adHoc

Module Tri IndexMaj

adHoc

Module de TéléchargementsMaj

adHoc

Module de LiensMaj

adHoc

Module de Nouvelles-BlogMaj

adHoc

Fork et Extraction de boîte

adHoc

Fork et pack ''Hasard'' et ''Derniers''

Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels