Un mini-slider/diaporama

Je ne sais pas vous mais moi, quand on me demande de faire une galerie de photos ou d'images simple, ça m'ennuie de charger un plugin de carousel complet, complexe et lourd.
Alors, j'ai fait mon propre constructeur vanilla ultra-light (~9Ko minifié, 18Ko non-minifié).

Ultra-light en poids = un peu moins de fonctionnalités !

• Forcément infinite-loop (pour l'instant !);
• Une seule diapo visible (pour toujours... !);

Ce mini-slider n'a pas pour vocation de remplacer les Flickity, Slick ou autre Tiny-slider (qui a ma préférence en ce moment) mais juste de faire des diaporamas simples et légers.

Disponible sur Github

Fonctionnalités disponibles

• Boutons prev/next : par défaut;
• Déplacement par balaiement du doigt sur mobiles : par défaut;
• Navigation/pagination : facultatif(voir data-attributes);
• Déplacement par scroll horizontal avec deux doigts sur le pad d'un ordi portable : facultatif (voir data-attributes);
• Déplacement par molette de souris : facultatif (voir data-attributes);
• Autoplay : facultatif, se déclenche lorsque le diaporama est dans le viewport, se met en pause quand il sort du viewport et au survol du diaporama (voir data-attributes);
• Transition Fade : facultatif, déplacement horizontal par défaut (voir data-attributes);
• Fonctions publiques : on peut déclencher prev/next, gotoSlide, destroy et restore depuis l'extérieur.

Installation

Charger la CSS de base dans le header.
Télécharger _mini-slider.scss

Charger le constructeur javascript avant fermeture du body.
Télécharger mini-slider.js

Déclarer les mini-sliders au onDomLoad par exemple ou après un chargement AJAX :

var miniSlider = document.querySelectorAll('.mini-slider');
if(miniSlider){
  for(var i=0; i<miniSlider.length; i++){
    miniSlider[i].miniSlider = new MiniSlider(miniSlider[i]);
  }
}

En déclarant les mini-sliders de la sorte, on peut à tout moment récupérer l'objet MiniSlider avec la syntaxe suivante (pour appeler les fonctions publiques par ex - voir plus bas) :

document.querySelector(ELT).miniSlider.nextSlide();

Structure HTML requise

<div class="mini-slider">
  <div class="slider">
    <ul class="slider-carousel">
      <li class="slide">
        Ce qu'on veut comme contenu !
        Mais des <img class="full" prendront tout l'espace disponible en largeur
        et centrés en hauteur.
        Après tout, ce plugin est destiné aux diaporamas !
        Les <li> sont en position:relative.
        Un <div class="content"> aura par défaut une position absolute 
        (width et height: 100%; top et left: 0).
      </li> 
      etc.
    </ul>
  </div>
</div>

data-attributes

• data-wheel : 1 pour activer molette souris, absent ou 0 pour ne pas activer.
• data-pad : 1 pour activer les deux doigts sur un pad, absent ou 0 pour ne pas activer.
• data-nav : 1 pour afficher la navigation "bullets", absent ou 0 pour ne pas activer.
• data-slide : number, pour aller directement à la slide correspondante (valeur 0 pour la première).
• data-autoplay : 1 pour activer autoplay, absent ou 0 pour ne pas activer.
  L'autoplay n'est déclenché que lorsque le slider est visible et mis en pause lorsqu'il n'est pas visible.
  Il est mis en pause au survol du slider.
  Et supprimé dès qu'on clique sur prev/next/bullet.
• data-autoplay-tempo : number, tempo entre chaque défilement en millisecondes (4000 par défaut si pas saisi).
• data-fade : 1, pour activer transition fade, absent ou 0 pour ne pas activer.

Structure HTML finale

Le plugin rajoute des éléments au DOM :
boutons prev, next, navigation, ID unique, data-index à chaque slide, largeur du .slider, classe .active au slider, aria attributes :

<div class="mini-slider">
  <div class="slider active">
    <ul class="slider-carousel" id="slider-l7yiz2r21kc8zuju4" style="width: 900%;">
      <li class="slide" data-index="0">
        <img src="img/rock-loeb_01.jpg" alt="" class="full">
      </li>
      <li class="slide" data-index="1">
        <img src="img/rock-loeb_02.jpg" alt="" class="full">
      </li>
      etc.
    </ul>
  </div>
  <div class="nav" aria-label="Carousel navigation">
    <button class="nav-item" data-index="0" aria-controls="slider-l7yiz2r21kc8zuju4" aria-label="Carousel page 1"></button>
  etc.
  </div>
  <button class="arrow prev" aria-controls="slider-l7yiz2r21kc8zuju4"></button>
  <button class="arrow next" aria-controls="slider-l7yiz2r21kc8zuju4"></button>
</div>

Pour la version Fade, on clone chaque slide en plus et on rajoute la classe .fade au .slider-carousel :

<div class="mini-slider">
  <div class="slider active">
    <ul class="slider-carousel fade" id="slider-l800i7x92e9wnkf7i" style="width: 700%;">
      <li class="slide" data-index="0" style="visibility: hidden;">
        <img src="img/rock-loeb_02.jpg" alt="" class="full">
      </li>
      etc.
      <li class="slide slide-fade" data-index="0" style="width: 14.2857%;">
        <img src="img/rock-loeb_02.jpg" alt="" class="full">
      </li>
      etc.
    </ul>
  </div>
</div>

Les slide originaux sont conservés et uniquement masqués avec un visibility:hidden pour que .slider-carousel conserve la bonne hauteur puisque les .slide-fade sont en position absolute.

CSS

Les styles de base sont contenus dans le fichier /src/scss/components/_mini-slider.scss

Chaque éléments peut bien sûr être modifié dans vos fichiers CSS, en voici la liste :

• .mini-slider : conteneur principal, nom de classe obligatoire.
•   .slider : conteneur du slider, nom de classe obligatoire.
•     .slider-carousel : l'élément qui se déplace de gauche à droite et vice-versa, nom de classe obligatoire.
•       .slide : chaque slide, nom de classe obligatoire.
•         img.full : image pleine largeur.
•         .content : contenu en absolute par-dessus l'image.
•   .nav : la navigation "bullet".
•     .nav-item : chaque "bullet"
•   .arrow : les flèches (de base, de simples carrés noirs à gauche et à droite à l'extérieur du slider en desktop et des ronds à l'intérieur pour mobiles.
    &.prev pour précédent
    &.next pour suivant

Fonctions publiques

Passer à la slide suivante :

document.querySelector(ELT).miniSlider.nextSlide();

Revenir à la slide précédente :

document.querySelector(ELT).miniSlider.prevSlide();

Aller à la slide N :

document.querySelector(ELT).miniSlider.gotoSlide(N-1);

Destroy le plugin :

document.querySelector(ELT).miniSlider.destroy();

Restaurer le plugin après un destroy :

document.querySelector(ELT).miniSlider.restore();

Exemple

Transition par défaut, navigation-bullet, autoplay et pad activés.

Exemple transition Fade

Transition Fade, autoplay.

Voilà, c'est tout.