Comment faire un carrousel CSS uniquement


Nous avons mentionné un moyen de créer un carrousel CSS uniquement dans un récent numéro du bulletin d’information et j’ai pensé qu’une rédaction plus détaillée serait intéressante et capturerait certaines de mes réflexions sur la création d’un carrousel.

Voici donc ce que nous faisons aujourd’hui:

Il n’y a aucun JavaScript ici, que ce soit! Pas de plugins jQuery. Pas de ruse. Juste quelques nouvelles propriétés CSS que j’ai expérimentées ainsi que du HTML de base.

OK pour commencer, nous devons nous concentrer sur le balisage. Le design comprend une navigation à gauche composée d’images et une grande galerie d’images à droite qui nous permet de faire défiler chaque image individuellement. Nous aurons également besoin d’un wrapper pour nous aider à organiser la mise en page:

Ensuite, nous pouvons ajouter des images! Pour ce petit exemple, j’ai vérifié notre liste de sites avec des images de haute qualité que vous pouvez utiliser gratuitement et je suis allé avec Unsplash.

Après avoir enregistré des images avec le gestionnaire d’actifs CodePen, j’ai commencé à ajouter les URL au nav élément:

Veillez à ce que le href à chacun de ces liens pointe vers un ID? C’est parce que si nous regardons à nouveau la démo, nous voulons pouvoir cliquer sur une image, puis nous voulons qu’elle saute vers la version plus grande de cette image dans la galerie à droite.

Donc, maintenant, nous pouvons aussi commencer à ajouter ces images à la grande galerie…

Nifty. Vient ensuite la partie amusante: styliser ce mauvais garçon. Nous pouvons utiliser une disposition de grille le parent .wrapper et définir des valeurs par défaut intelligentes pour la img élément:

img {
  display: block;
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-gap: 20px;
}

Jusqu’à présent, nous avons trié notre mise en page et mis en place nos liens. Ensuite, découvrons tout débordement qui pourrait déborder de notre enveloppe et assurez-vous que la navigation et la galerie peuvent défiler:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-gap: 10px;
  overflow: hidden;
  height: 100vh; 
}

.gallery {
  overflow: scroll;
}

.lil-nav {
  overflow-y: scroll;
  overflow-x: hidden;
}

Nous pouvons faire défiler chaque image de la galerie maintenant, mais s’il s’agissait d’un site Web de production, nous voudrions probablement nous assurer que les gens puissent faire défiler ce carrousel un peu plus facilement. Trent Walton a écrit sur ce problème il y a plusieurs années et je pense qu’il vaut toujours la peine de garder à l’esprit.

Ensuite, concentrons-nous sur le cliché du carrousel de chaque image de la galerie. Pour ce faire, nous devons utiliser le scroll-snap-type et scroll-snap-align propriété comme celle-ci:

.gallery {
  overflow: scroll;
  scroll-snap-type: x mandatory;
}

.gallery__img {
  scroll-snap-align: start;
  margin-bottom: 10px;
}

Essayez à nouveau de faire défiler la galerie sur le côté droit:

Si vous souhaitez en savoir plus sur ces propriétés, je recommanderais vivement cet article sur la capture de défilement CSS pratique qui approfondit le détail de ces propriétés.

Nous avons un joli carrousel utilisable! À partir d’ici, tout ce que nous avons à faire est de ranger le design car l’image de la galerie n’est pas sur toute la hauteur de l’écran. Pour ce faire, nous pouvons utiliser object-fit et donner à chaque image un min-height avec le vh unité, comme ceci:

.gallery__img {
  scroll-snap-align: start;
  margin-bottom: 10px;
  min-height: 100vh;
  object-fit: cover;
}

Maintenant, les images de la grande galerie seront toujours de la taille maximale de l’écran et seront mises à l’échelle pour occuper la largeur et la hauteur. Continuons et abordons le style des petites images de navigation:

.lil-nav {
  overflow-y: scroll;
  overflow-x: hidden;
}

.lil-nav a {
  height: 200px;
  display: flex;
  margin-bottom: 10px;
}

.lil-nav__img {
  object-fit: cover;
}

Au début, j’ai aussi fait ce petit nav comme un carrousel, mais c’était vraiment bizarre. Je garde juste la valeur par défaut scroll comportement pour l’instant. Dans cette démo ci-dessus, essayez de cliquer sur une image. Remarquez comment il saute à cette image dans le carrousel immédiatement? Ce serait bien si nous pouvions animer un peu cette transition – et nous le pouvons!

.gallery {
  overflow: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

Cette scroll-behavior La propriété CSS est très pratique pour cela et maintenant, le tout s’animera si vous cliquez sur l’un des éléments de navigation:

Nifty, hein? Une autre petite chose que nous pourrions faire ici est de jeter un filtre sur les éléments de navigation pour les rendre en noir et blanc, puis de les animer en survol:

.lil-nav__img {
  object-fit: cover;
  filter: saturate(0);
  transition: 0.3s ease all;
}

.lil-nav__img:hover {
  transform: scale(1.05);
  filter: saturate(1);
}

Je suis sûr que nous pourrions faire beaucoup plus ici, mais je pense que cela fonctionne très bien!

Nous pourrions même jeter un tout petit peu de JavaScript dans le mix pour montrer quelle image est active, mais je pense que les gens le savent juste en regardant la galerie.

C’est ça! Nous avons maintenant un carrousel qui est plutôt bon pour l’amélioration progressive et cela signifie que nous n’avons pas à charger une bibliothèque de JavaScript ou à écrire beaucoup plus de code que nous n’en avons vraiment besoin.

Rendre le carrousel réactif…

Allons un peu plus loin et rendons ce type réactif. Ce que nous voulons faire, c’est inverser l’ordre de notre grille en déplaçant tous nos styles actuels dans une requête multimédia qui n’est activée que sur des écrans plus grands.

Vous voudrez peut-être ouvrir cette démo dans un nouvel onglet et diminuer / augmenter la taille du navigateur pour voir les changements se produire:

Si vous chargez cette démo sur un appareil mobile, vous devriez voir comment la disposition bascule entre les deux modes. Cela se fait en utilisant une seule requête média sur le .wrapper élément. Notez que nous utilisons Sass:

$large: 1200px;

.wrapper {
  overflow: hidden;
  height: 100vh;
  display: grid;
  grid-template-rows: 2fr 1fr;
  grid-gap: 10px;

  @media screen and (min-width: $large) {
    grid-template-columns: 1fr 5fr;
    grid-template-rows: auto;
  }
}

Ajoutons-en un sur la navigation également. Mais cette fois, nous devons dire à la navigation de commencer sur la deuxième ligne pour qu’elle se déplace vers le bas de l’écran:

.lil-nav {
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  grid-row-start: 2;

  @media screen and (min-width: $large) {
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    grid-row-start: auto;
  }
}

Avec la galerie, nous devons changer de scroll-type pour des écrans plus grands et inversez la overflow bien aussi:

.gallery {
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  display: flex;

  @media screen and (min-width: $large) {
    display: block;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
  }
}

C’est le gros des changements que nous avons dû faire et j’aime bien! Si nous voulions rendre cette production prête, nous penserions à l’accessibilité (par exemple, nous ne voulons probablement pas que les lecteurs d’écran lisent toutes les images à la fois dans la navigation et Galerie). Ensuite, il y a les performances – nous pourrions envisager un chargement paresseux afin que les images ne soient rendues que lorsqu’elles sont nécessaires.

Quoi qu’il en soit, c’est un bon début!

Close Menu