logo

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

Types de blocs supplémentaires (EBT) – types de blocs stylisés et personnalisables : diaporamas, onglets, cartes, accordéons et bien d’autres. Paramètres intégrés pour l’arrière-plan, la boîte DOM, les plugins JavaScript. Découvrez dès aujourd’hui le futur de la création de mises en page.

Démo des modules EBT Télécharger les modules EBT

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes

Types de paragraphes supplémentaires (EPT) – ensemble de modules basé sur les paragraphes analogiques.

Démo des modules EPT Télécharger les modules EPT

Défilement

Création de diaporamas (slideshow) et de carrousels jQuery dans Drupal 7. Partie 2

06/07/2025, by Ivan

Dans la partie précédente, nous avons créé un diaporama, ici avec l’affichage des employés de l’organisation, mais vous pouvez utiliser une bannière comme en-tête de site. Cependant, je ne suis pas satisfait de cette solution standard, j’aimerais avoir des boutons pour passer au slide précédent et suivant. C’est plus esthétique que de simples boutons textuels ou numériques.

Je rappelle que Views et Views_slideshow sont déjà installés.

Commençons par ajouter un contrôleur textuel pour les slides.

Drupal views

Le contrôleur doit afficher les liens « Précédent » (Previous) et « Suivant » (Next).

Drupal views display

L’idée est d’utiliser du CSS pour assigner une image de fond aux liens next et previous et de positionner ces liens là où on le souhaite, également via CSS.

Pour cela, nous utiliserons une extension Firefox appelée FireBug, qui fournit des outils pratiques pour travailler le CSS. Voici à quoi ressemble le bloc de liens du contrôleur via FireBug :

FireBug

Nous allons cibler les éléments par leur id, c’est par cet identifiant que nous appliquerons les règles CSS. Il faudra aussi copier les images des flèches dans le dossier images de votre thème.

Copiez les fichiers des flèches dans le dossier images de votre thème.

Maintenant modifions le CSS en ajoutant dans le fichier style.css de votre thème. Les lignes ressemblent à ceci, ajustez les valeurs selon votre thème :

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png'); /* image de la flèche gauche */
    width: 30px; /* largeur de la flèche */
    height: 0px; /* hauteur mise à 0 */
    padding-top: 30px; /* marge intérieure égale à la largeur */
    position: relative; /* position relative */
    top: 0px; /* décalage depuis le haut */
    overflow: hidden;
    z-index: 5; /* placer au-dessus du slideshow */
    display: block; /* affichage en bloc */
}

Le « a » désigne une balise lien, « # » indique que l’on cible par id celui qui suit.

Le CSS pour la flèche suivante (next) sera légèrement différent :

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    left: 30px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

Le lien « pause » peut être totalement masqué :

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

Les valeurs des paddings et positions peuvent être ajustées via FireBug puis enregistrées dans style.css.
Voici le CSS final que j’ai utilisé :

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: -55px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}
#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height: 0px;
}

Drupal views slideshow

La bannière est prête ! Dans la prochaine partie, nous créerons une carrousel jQuery.