SliderJis

Sliderjis vous permet de faire défiler vos photos de plusieurs façons. Vous pourrez choisir le nombre d'images visibles ainsi que le nombre d'images qui défilent mais pas seulement. SliderJis vous donne la possibilité de faire défiler vos images horizontalement ou verticalement et vous permet aussi de faire défiler des images qui utilisent toute la largeur de l'écran. De plus, dans tous les cas de figure, vous pourrez rajouter du texte à vos images mais aussi un système de pagination customizable.

Ce slider est développé sur la base d'un tutoriel de Grafikart. Pour toute question, remarque, rapport de bug, n'hésitez pas à me laisser un message : jis@jisdev.com

Télécharger le fichier sliderjis.js

Comment ça marche ?

SliderJis fonctionne avec un fichier Js (sliderjis.js) et un code HTML particulier.

Il faut d'abord inclure ce fichier js dans la balise <head> de votre page web.

<script src="/votre_chemin/sliderjis.js" async></script>

Côté HTML, on aura besoin d'une div avec un Id particulier qui représentera votre slider.

<div id="mon_slider"></div>

Ensuite, il faudra définir chaque slide (élément du slider). Selon le résultat que l'on souhaite, cette définition pourra changer (voir les exemples ci-dessous)

Par exemple:
<div class="slide">
 <img src="img/sport1.jpg" alt="Vive le crocket">
 <div class="wrapper" data-preset="preset1_TL_rgba(255,215,0,0.8)_rgba(0,0,0,0.8)"></div>
 <div class="title" >Mon titre 1</div>
 <div class="description" data-settings='{"fontFamily":"fantasy"}'>Ici une description pour tester le carousel</div>
</div>

Enfin, il faudra, en utilisant la fonction onReady(), créer une nouvelle instance de la classe SliderJis en définissant toutes les options dont on a besoin pour ce slider.

let onReady = function () {

 new SliderJis(document.querySelector('#mon_slider'), {
  itemsToScroll: 2,
  itemsVisible: 3,
  infinite: true,
 })

}

if (document.readyState !== 'loading') {
 onReady()
}

document.addEventListener('DOMContentLoaded', onReady)

Quelques exemples...

Slider simple

top

Ici un slider simple avec navigation (boutons fléchés) qui affiche les slides 3 par 3, les fait défiler 2 par 2. Les boutons fléchés s'affichent dès lors qu'il y a des slides à faire défiler.

Code HTML :

<div id="slider1">

 <div class="slide">
  <img src="img/Sliderjis/img/sport1.jpg" alt="Vive le crocket">
 </div>

 <div class="slide">
  <img src="img/Sliderjis/img/telephone_maison.jpg" alt="Le body c'est super">
 </div>

 [...]

 <div class="slide">
  <img src="img/Sliderjis/img/sport2.jpg" alt="Le body c'est super">
 </div>

</div>

Code JS :

let onReady = function () {
 new SliderJis(document.querySelector('#slider1'), { 
  itemsToScroll: 2,
  itemsVisible: 3,
 })
}

Bon à savoir :

Le nombre d'éléments visibles (itemsVisible) ne peut pas être supérieur au nombre d'éléments total
Ce slider ne retaille pas les photos. Il est donc préférable d'utiliser des photos de même taille.

Slider en boucle avec pagination

top

Ici un slider avec navigation et une pagination (puces carrées avec numéro) qui affiche les slides 2 par 2, les fait défiler 2 par 2 et boucle quand on arrive en bout de slide.

Code HTML :

<div id="slider2">

 <div class="slide">
  <img src="img/Sliderjis/img/sport1.jpg" alt="Vive le crocket">
 </div>

 <div class="slide">
  <img src="img/Sliderjis/img/telephone_maison.jpg" alt="Le body c'est super">
 </div>

 [...]

 <div class="slide">
  <img src="img/Sliderjis/img/sport2.jpg" alt="Le body c'est super">
 </div>

</div>

Code JS :

let onReady = function () {
 new SliderJis(document.querySelector('#slider2'), {
  itemsToScroll: 2,
  itemsVisible: 2,
  loop: true,
  pagination: true
 })
}

Bon à savoir :

Un slider ne peut pas être à la fois en boucle (loop: true) et infini (infinite: true). Cela déclenchera une erreur.
Quand la pagination est activée (pagination: true), la configuration par défaut de la pagination est : shape: circle, number: false

Slider infini avec texte classique

top

Ici un slider avec navigation et pagination simple (puces rondes sans numéro) qui affiche les slides 3 par 3, les fait défiler 3 par 3 à l'infini.

Mon titre 1

Une petite description

Mon titre 2

Mais une description un peu plus longue est aussi possible

Mon titre 3

Plus la description est longue, plus la hauteur du bandeau blanc qui la contient sera importante.

Mon titre 4

Une petite description

Mon titre 5

Une petite description

Mon titre 6

Une petite description

Mon titre 7

Une petite description

Mon titre 8

Une petite description

Mon titre 9

Une petite description

Code HTML :

<div id="slider3">

 <div class="slide">
  <img src="img/Sliderjis/img/sport1.jpg" alt="Vive le crocket">
  <div class="wrapper"></div>
  <div class="title">Mon titre 1</div>
  <div class="description">Une petite description</div>
 </div>

 <div class="slide">
  <img src="img/Sliderjis/img/telephone_maison.jpg" alt="Le body c'est super">
  <div class="wrapper"></div>
  <div class="title">Mon titre 2</div>
  <div class="description">Mais une description un peu plus longue est aussi possible</div>
 </div>

 [...]

 <div class="slide">
  <img src="img/Sliderjis/img/sport5.jpg" alt="Vive le crocket">
  <div class="wrapper"></div>
  <div class="title">Mon titre 9</div>
  <div class="description">Une petite description</div>
 </div>

</div>

Code JS :

let onReady = function () {
 new SliderJis(document.querySelector('#slider3'), {
  itemsToScroll: 3,
  itemsVisible: 3,
  infinite: true,
  pagination: true,
  paginationConfig: {
   shape: 'square',
   number: true
  },
  infos: {
   displayTxt: true,
   txtStyle: 'classic'
  }
 })
}

Bon à savoir :

Quand l'option texte est activée (displayTxt: true), il faut aussi préciser l'option txtStyle: 'classic'. En cas d'oubli, l'option est par défaut 'classic' mais un message en console vous invitera à la définir car cette option peut aussi avoir la valeur 'custom' mais uniquement si le slider est fullWidth. Si vous utilisez l'option txtStyle: 'custom' alors que le slider n'est pas fullWidth, cette option sera automatiquement redéfinie à 'classic'
La police du texte peut être définie de 2 façons différentes : soit la police est héritée d'un élément parent, soit la police peut être explicitement définie avec l'option sliderFont (voir exemple suivant)

Slider JisCard

top

Ici un slider jisCard, c'est à dire que chaque slide est présenté sous forme de carte avec un titre, un texte et un lien cliquable. Ce slider affiche les slides 4 par 4 et les fait défiler 1 par 1 en boucle. Le texte du lien est paramétrable via les options.

Mon titre 1

Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim, culpa, officiis. Praesentium at, eos, quis sequi aperiam nostrum ipsam, minus placeat corrupti deleniti fugit eaque nam mollitia architecto, impedit soluta.