Vous avez probablement déjà vu ce type de carrousel animé sur le web. C'est l'un des composants les plus utilisés en développement Front-End.

Mais créer ce type de slider dans Bubble n'est pas si simple pour un débutant (sans utiliser au moins un plugin payant).

Et c'est dommage, car ils apportent un dynamisme incroyable à n'importe quel site web. Ils attirent vraiment l'œil.

C'est pourquoi, dans cet article, nous allons vous montrer comment recréer cet effet, sans payer de plugin, et en moins de 5 minutes !

Étape 1 : Installer le plugin Classify

La première étape de notre mise en place est d'installer Classify.

Pour faire simple, c'est un plugin gratuit pour Bubble qui vous permet d'ajouter des classes CSS à n'importe quel élément Bubble.

Si vous ne savez pas ce qu'est le CSS, c'est un langage de programmation utilisé sur le web pour styliser les sites, ajouter des animations, des effets et bien d'autres choses.

Par exemple, dans Bubble lorsque vous ajoutez des transitions à vos éléments, vous appliquez en réalité une transition CSS à l'élément.

Mais même si Bubble offre certaines possibilités CSS, il en manque la majorité.

C'est là que Classify intervient, car il permet d'exploiter pleinement les fonctionnalités CSS avec Bubble !

Alors allez-y et installez ce plugin dans votre application, vous ne le regretterez pas !

Étape 2 : Activer l'attribut ID HTML

Avant toute chose, vous devez vous assurer que l'option d'exposition des ID des éléments est activée dans votre application.

Nous l'avons déjà abordé dans d'autres tutoriels, mais expliquons-le de nouveau :

Pour l'activer, rendez-vous dans Paramètres --> Général et trouvez l'option suivante :

"Expose the option to add an ID attribute to HTML elements"

Cela fera apparaître ce nouveau champ dans le panneau des propriétés de vos éléments.

Étape 3 : Créez vos éléments

Parfait, maintenant commençons à construire les éléments !

Dans notre exemple, nous allons personnaliser des cartes de témoignages, mais vous pouvez utiliser ce que vous voulez comme des logos, des fonctionnalités, des images, etc...

Encapsulez vos éléments dans un groupe

Tout d'abord, assurez-vous que vos éléments sont dans un groupe (ou conteneur).

Le rôle de ce groupe est de contenir nos cartes et nous y appliquerons du CSS plus tard, alors identifiez-le bien.

Vous pouvez voir que nous avons un conteneur principal qui contient toutes mes cartes.

IMPORTANT : Assurez-vous de décocher "Fit Width to Content" et de définir la disposition du conteneur sur "Row"

Si vous ne décochez pas cette case, notre code ne fonctionnera pas, alors n'oubliez pas !

Pour ce qui est des paramètres de disposition, cela doit ressembler à ceci :

Notez que vous pouvez coller autant d'éléments que vous voulez dans ce groupe, et que cela fonctionne aussi avec les Repeating Groups !

Étape 4 : Configurer les classes CSS sur nos éléments Bubble

Il est temps maintenant d'utiliser Classify !

Pour cela, nous devons attribuer des classes CSS à nos éléments.

Nous allons utiliser une commande pour demander à Classify de les définir.

Pour le conteneur principal, collez ceci dans le champ ID Attribute : {addClass : "testimonial-container"}

Et pour chacune de vos cartes, collez ceci : {addClass : "testimonial-item"}

Vous devriez obtenir ceci :

Étape 5 : Intégrer le code CSS sur votre page

Dernière étape de notre tutoriel : implémenter le CSS sur votre page !

Pour cela, utilisez un HTML Element.

Placez un élément HTML sur votre page, où vous voulez, mais il doit être visible !

Pour ne pas perturber votre page, réglez-le à une taille de 1x1 px et placez-le discrètement.

Dans ce HTML Element, collez ce code :

<style>
::selection { 
    background: #YOUR-COLOR; /* Couleur de fond de la sélection de texte */ 
    color: #YOUR-COLOR; /* Couleur du texte sélectionné */
}
::-moz-selection { 
        background: #YOUR-COLOR; /* Couleur de fond de la sélection dans Firefox */ 
        color: #YOUR-COLOR; /* Couleur du texte sélectionné dans Firefox */
    }
<pre><code>.testimonial-container { 
    display: flex !important; /* Aligne les éléments en ligne */ 
    flex-wrap: nowrap !important; /* Empêche le retour à la ligne */ 
    overflow-x: hidden !important; /* Cache le débordement horizontal */ 
    white-space: nowrap !important; /* Empêche le retour à la ligne au niveau des espaces */ 
} 
.testimonial-item { 
    display: inline-flex !important; /* inline-flex permet de garder les éléments en ligne */ 
    white-space: normal !important; /* Autorise le retour à la ligne dans le contenu de l'élément */ 
}
@keyframes scroll { 
    0% {
        transform: translateX(0);
    } 
    100% {
        /* Ajuster en fonction de la largeur des éléments + marge */ 
        transform: translateX(calc(-100% - 24px)); 
    } 
} 
.testimonial-item { 
    animation: scroll 7s linear infinite !important; /* Ajustez la durée selon vos besoins */ 
}
</code></pre

En résumé, ce code modifie la disposition de votre conteneur pour qu'il soit en une seule ligne, peu importe le nombre d'éléments qu'il contient.

Il s'assure également que les éléments hors de la page restent cachés. C'est ce qui les fait apparaître et disparaître sur les côtés de la page.

Et voilà ! Voici le résultat final :

(Optionnel) Étape 6 : Modifier la vitesse de l'animation

Par défaut, j'ai réglé la durée de l'animation à 7 secondes. Bien sûr, vous pouvez modifier ce paramètre à la fin du code.

Conclusion

Voilà !

Vous savez maintenant comment créer votre propre slider animé personnalisé. Vous pouvez l'utiliser pour afficher ce que vous voulez, sans avoir à payer de plugin.

Et si vous ne souhaitez pas passer de temps à le créer, vous pouvez trouver de nombreux sliders animés disponibles en ligne.