Tagslider

[jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in

Le but de ce billet n’est pas de donner une solution toute faite mais plutôt une méthode pour étendre rapidement et efficacement les fonctionnalités de n’importe que plug-in jQuery de slider.

HTML

On crée un container dans lequel on place une balise <img> aux attributs non renseignés. Cette balise va servir à accueillir l’image « en cours ».

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

On crée une fonction qui surveille en temps réel quelle image du carousel est affichée (celle qui possède la plupart du temps une classe .current) et on stocke son URL dans une variable. On assigne ensuite le contenu de cette variable à l’attribut src de notre image en haut de page.

On exécute la fonction au chargement de la page, puis à chaque fois que le DOM relatif au carousel évolue (passage d’une slide à l’autre).

Cas du Slick Carousel (Drupal 7)

Utiliser la méthode .bind() sur l’événement DOMSubtreeModified ne fonctionne pas dans le cas où un changement de slide utilise plusieurs événements. (En réalité,
ça fonctionne, mais le console.log() imprime plusieurs fois l’URL récupérée).

SCSS

On masque les images par défaut du carousel. On met en place quelques styles pour afficher les visuels en pleine page et pour les caler en haut de la fenêtre.

Une alternative où l’image est placée en background-image de l’élément body

[Magento 2.x] Les options du slider Fotorama natif

Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑