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 ».
Pour continuer vous avez besoin de connaître les bases de JavaScript et de jQuery, sinon le tutoriel sera compliqué à comprendre.
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 :
Installer Slick sur son site internet
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 :
- Le fichier JavaScript de la librairie « slick.js », sans quoi le carrousel ne pourra pas fonctionner.
- La mise en page minimale de la librairie, avoir un fichier « slick.css ».
- Il est préférable de rajouter le thème par défaut de la librairie, soit le fichier « slick-theme.css ». Sans quoi, il faudra mettre en forme toutes les fonctionnalités de base. Vous vous rendrez vite compte qu’il est plus facile de modifier le thème déjà présent que de le recréer.
Dans la mesure du possible essayez d’importer les fichiers minifiés.
Via le téléchargement
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">Via CDN
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/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/slick/slick.min.js">
Le premier carrousel
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.
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Exemples d’utilisation d’un carrousel
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 :
- le nombre d’éléments afficher en même temps,
- le nombre d’éléments qui doivent défiler à chaque clic,
- l’affichage ou non des flèches ou des points de navigation
- le défilement automatique.
Ce sont quelques exemples parmi tant d’autres.
Voici quelques exemples d’application.
Afficher des partenaires
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.
Style instagram
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.
Notre astuce pour créer un carrousel en JavaScript.
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.
