Créer un carrousel en Javascript et CSS

Carrousel (défilement carrousel)

Un carrousel reproduit l'effet de défilement semblable au manège d'où vient le nom. Il s'agit d'un ensemble d'objets (textes, images, vidéos...) qui défilent l'un après l'autre dans un cadre. Ce défilement peut être automatique ou manuel.

L'effet carrousel est très populaire au milieu des développeurs et intégrateurs. En effet, la plupart des sites Web disposent d'un carrousel dans leur page d'accueil afin d'exposer un échantillon du contenu disponible. Il existe des carrousels finis et infinis. Le carrousel fini s'arrête une fois on atteint les objets des extrémités (début ou fin), par contre, le carrousel infini refait le tour une fois tous les objets exposés, donc le défilement des objets se répète à l'infini.

Dans cette leçon nous allons voir comment créer un carrousel fini actionné manuellement à l'aide de Javascript et CSS. L'exemple que j'ai pris est un ensemble de photos que l'on fait défiler par deux boutons placés de part et d'autre du carrousel. Cependant, ces photos-là sont placés dans des containers (balises DIV dans ce cas), ce qui veut dire que vous pouvez y placer tout type de contenu que vous souhaitez, comme des paragraphes entiers, des vidéos, des images ou tout cela à la fois.

Passons à la pratique