Avant tout, définissons ce que c’est un carrousel. En français, c’est un manège rond sur lequel des chevaux en plastique se déplacent en circulaire. Quand on est placé devant, on voit les chevaux passer un à un. Sur un site internet, c’est un peu pareil : il va s’agir d’une ou plusieurs images, que l’on va voir passer devant nous les unes après les autres.
Nous allons voir dans ce tutoriel comment créer un carrousel avec la librairie jQuery « Slick ».
Si ce n’est pas le cas, où que les notions abordées dans ce tutoriel sont trop complexes, nous vous invitons à déposer gratuitement une annonce sur Codeur.com, afin de trouver développeur JavaScript pour vous accompagner dans votre projet.
Sommaire :
Slick est une librairie JavaScript basée sur jQuery, permettant de créer un carrousel, avec des images ou avec des blocs de contenu HTML. Sa facilité d’utilisation et sa fonctionnalité responsive en font un outil vraiment pratique et fortement appréciable. Nous aurons donc besoin d’importer un fichier JavaScript et deux fichiers CSS. Pour ce faire, vous pouvez vous rendre sur le site officiel de Slick et retrouver le lien de téléchargement (« get it now » dans le menu) pour récupérer les fichiers sources. Sinon vous pouvez utiliser le CDN.
Avant de commencer l’installation de la librairie, sachez qu’il faut au minimum trois fichiers :
Dans la mesure du possible essayez d’importer les fichiers minifiés.
Téléchargez donc la librairie Slick. Si vous regardez le zip téléchargé, vous pouvez constater un dossier « slick-» suivi du numéro de la version, à l’intérieur duquel se trouve un nouveau dossier « slick ». C’est dans ce dernier dossier que se trouvent les fichiers à importer.
Si vous n’utilisez pas de dossier prévu à cet effet, il faudra en créer un. Dans notre exemple, nous allons utiliser dossier assets/lib/slick.
less ou sass, vous pouvez utiliser les fichiers qui sont fournis en dossier.Maintenant que ces quelques fichiers sont en place dans le dossier prévu à cet effet, nous pouvons les ajouter dans le code. Pour cela rien de plus simple.
Tout d’abord, nous allons importer les fichiers CSS. Rendez-vous dont la balise head de votre page internet et insérez le fichier CSS cité précédemment.
<!-- Slick -->
<link rel="stylesheet" type="text/css" href="/assets/lib/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/lib/slick/slick-theme.min.css"/>C’est à présent le tour du fichier JavaScript. Pour respecter les normes classique, nous allons le placer à la fin du contenu body avant la fermeture de la page. Si votre site internet n’utilise pas encore jQuery il faudra l’installer. Nous considérons que vous savez déjà le faire. Il faut maintenant ajouter le la librairie Slick.
<!-- jQuery -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<!-- Slick -->
<script type="text/javascript" src="/assets/lib/slick//slick.min.js">Pour trouver les CDN, rien de plus simple. Il suffit de chercher dans Google : « Slick CDN». Le premier résultat sera forcément le bon. Maintenant que vous avez les liens, nous pouvons les insérer sur la page, dans le fichier HTML.
Tout d’abord, nous allons importer les fichiers CSS. Rendez-vous dont la balise head de votre page internet et insérer de fichier CSS cité auparavant.
<!-- Slick -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme/min.css"/>C’est à présent le tour du fichier JavaScript. Pour respecter les normes classique, nous allons le placer à la fin du contenu body avant la fermeture de la page. Si votre site internet n’utilise pas encore jQuery il faudra l’installer. Nous considérons que vous savez déjà le faire. Il faut maintenant ajouter le la librairie Slick.
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<!-- Slick -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">
Pour faire fonctionner notre premier carrousel, c’est très simple. Avant de le construire, il nous faut des informations (ici des images) à faire défiler. À l’endroit où vous souhaitez insérer votre carrousel, nous allons ajouter une première div qui sera le carrousel en lui-même, à l’intérieur de laquelle se trouvera une nouvelle div par élément du carrousel.
Exemple :
<div id="carrousel">
<article>
<img src="https://fakeimg.pl/600x400">
</article>
<article>
<img src="https://fakeimg.pl/600x450">
</article>
<article>
<img src="https://fakeimg.pl/600x500">
</article>
</div>Alors si vous regardez le résultat dans l’étant actuel, les div s’affichent les unes après les autres. Ce n’est pas ce que l’on veut. Nous voulons un joli carrousel avec les éléments qui défilent quand on clique sur une flèche.
L’étape qui suit consiste donc à indiquer à la librairie qu’elle doit transformer tous ces éléments en carrousel. Pour ce faire, nous allons devoir ajouter du code JavaScript après l’import de la librairie. Cela peut-être dans le fichier HTML ou dans un fichier JavaScript à part.
Voici le code minimal :
$('#carrousel').slick();Et voilà votre premier carrousel est en place. Voyons maintenant deux façons de le personnaliser.
Voici un exemple complet d’installation de ce carrousel avec JavaScript.
L’un des nombreux avantages de Slick, c’est la facilité à utiliser des fonctionnalités de base. Lors de la création du carrousel depuis le JavaScript, il est possible de personnaliser le carrousel à travers un simple objet. On peut par exemple définir :
Ce sont quelques exemples parmi tant d’autres.
Voici quelques exemples d’application.
Admettons que vous construisez un site internet professionnel. Vous souhaitez donc afficher la liste des partenaires avec un carrousel fait en JavaScript. Pour ce faire, vous allez construire ce carrousel en utilisant Slick.
Souvent, quand nous voulons représenter une liste de partenaires sur un site internet, nous en affichons plusieurs à la fois. Il est très fréquent également, que la liste des partenaires s’affiche progressivement et de façon automatique. Heureusement, ces deux options sont tes fonctionnalités de Slick.
Nous allons pouvoir indiquer le nombre d’éléments à afficher grâce l’attribut slidetoShow et choisir le nombre d’éléments qui défilent avec l’attribut slideToScroll.
En ce qui concerne le défilement automatique, les attributs autoplay et autoplaySpeed seront les bienvenus. Le premier est un boolean (true ou false), le second et le temps en millisecondes entre chaque glissement automatique. Sans oublier de préciser que les slides tourneront à l’infini ; pour cela nous utiliserons l’attribut infinite<c/ode>.
Enfin pour ce carrousel, nous allons retirer les flèches avec arrow et afficher les points de navigation avec dots. Tous deux sont des booleans.
Voici finalement un exemple complet de ce que va donner notre carrousel.
Pour ce second exemple, nous allons créer un carrousel dans le style Instagram. C’est tout simple, une boîte dans laquelle nous avons une image avec des flèches qui permettent de défiler. Il n’y a pas de défilement automatique, ni de boucle infinie. Le carrousel sera donc assez simple, tant dans l’affichage que dans ses options.
Donc au niveau des options, nous ne voulons qu’un élément à la fois et scroller d’un élément à la fois également. Les flèches seront affichées, mais pas les points de navigation.
La majorité de la configuration du Carrousel va se jouer sur le style.
Voici un exemple complet de ce que va donner note carrousel style Instagram.
Sans utiliser de librairie, tutoriel aurait été beaucoup plus long et surtout beaucoup plus complexe. Construire un carrousel en JavaScript et une tâche assez simple en utilisant des outils déjà faits, comme Slick.
Bien entendu, ce n’est pas le seul, il en existe beaucoup. Mais, dans le cas où vous utilisez Slick, penser à regarder sa documentation technique afin de voir les différentes options disponibles.
Si la création dans le carrousel avec JavaScript vous pose problème, n’hésitez à demander de l’aide. Sur le site Codeur.com, de nombreux freelance spécialisés sont à la recherche de missions. Déposez une annonce gratuitement pour trouver un développeur JavaScript qui pourra vous aider dans la création de votre carrousel en JavaScript.