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 :
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.
Voici le gist permettant de réaliser ce carousel, à adapter pour n’importe quel projet :
