carousel modal bootstrap 4

Un carousel de modal ouvrant sur un nouveau carousel

Pour un projet, il me fallait une section de réalisations, avec une demande bien précise sous Bootstrap 4 : Un carousel de modal ouvrant sur des carousels de photos. Ça peut faire peur aux premiers abords, mais quand on pose les choses on y voit beaucoup plus clair :

  • Les photos doivent être présentées en carousel, par réalisations
  • Les carousels doivent s’ouvrir au clic du visiteur sur le bouton concerné : on part donc sur des modals
  • Pour éviter d’avoir toute une liste de boutons alignés et pour ajouter un peu de dynamisme au site, les intégrer eux-mêmes dans un carousel, qui ne défile qu’au clic du visiteur.

Le tout en évitant d’alourdir le site, entre toutes les photos des réalisations et le reste du site en développement. Il était donc exclu que je fasse appel à un slider jQuery pour englober tout ça (et au final, la seule différence tient dans le visuel…), il faut donc composer avec ce que nous offre Bootstrap.

Voici ce que donnerait le carousel final avec les composants de base de Bootstrap 4 :

carousel avec modal bootstrap 4

 

Au final, tout tient dans la réflexion : comment et avec quels outils ? Et réfléchir bien-sûr à l’imbrication pour éviter de se retrouver avec des abérations comme les modals qui s’ouvrent en arrière-plan. Ou encore que cela ne fonctionne pas sur les petites résolutions d’écrans. On laisse ici le modal-body, afin d’offrir la possibilité de rajouter du texte aux réalisations. Si l’on souhaite n’ouvrir qu’un carousel sans texte et titre, il suffit de retirer le modal-header et le modal-body, laissant le carousel dans modal-content. Nous n’aurions donc plus le fond blanc.

 

carousel avec modal ouverte bootstrap 4
La modal ouverte, offrant au visiteur les différentes photos des réalisations
Carousel avec modal bootstrap 4 responsive
Bien-sûr, on fait en sorte que ce soit responsive

Voici le gist permettant de réaliser ce carousel, à adapter pour n’importe quel projet :

Libriste. Développeuse multifonctions. Community Manager à mes heures perdues. 3D Maker. Nourri 2 blogs et 3 chats.
Posts created 5

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Commencez à saisir votre recherche ci-dessus et pressez Entrée pour rechercher. ESC pour annuler.

Retour en haut