Comment créer un CMS slider sur Webflow ?

Chers lecteurs, si vous êtes ici, c'est sans doute que, comme nous, vous adorez Webflow et tout ce qu'il offre en matière de design et de flexibilité. Néanmoins, il arrive que Webflow présente quelques limitations. Et l'une d'entre elles, que nous avons souvent remarquée, est l'absence d'un slider dynamique nativement connecté à une collection CMS. Mais ne vous inquiétez pas ! Nous avons une solution pour vous, grâce à Finsweet Attributes. Prêts pour le voyage ? C'est parti !

Instructions

Tout d'abord, il est bon de noter que, nativement, Webflow ne permet pas de créer un slider connecté à une collection CMS. C'est un peu décevant, n'est-ce pas ? Mais grâce à des outils extérieurs, comme Finsweet, cette limitation n'est plus qu'un lointain souvenir.

‍

Ajoute des scripts de Finsweet dans le header de la page

Pour commencer, nous allons devoir ajouter un peu de magie dans le code de notre site. Vous allez voir, c'est plus simple qu'il n'y paraît.

Insérez le script suivant dans l'en-tête de votre page :

‍

‍

<!-- [Attributes by Finsweet] CMS Slider -->
<script async src="<https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js>"></script>

‍

Création des éléments

Maintenant, place à la création !

‍

1- Créez une collection CMS : Commencez par y ajouter tous les éléments que vous souhaitez voir apparaître dans votre slider. Photos, textes, liens, laissez libre cours à votre imagination.

‍

2- Intégrez un élément “Collection List” à la page : ne fois votre collection prête, revenez sur votre page, ajoutez une “collection List”, connectez-la à la collection précédemment créée et ajoutez les éléments que vous souhaitez retrouver dans le slider.

‍

3- Intégrez un slider à la page : Oui, un simple slider. Vous allez voir, la magie opère dans les étapes suivantes.

‍

Ajoute des attributs de Finsweet aux éléments

C'est ici que Finsweet entre véritablement en jeu. Suivez ces étapes :

‍

1- Pour ajouter un attribut à un élément, rendez-vous dans l'onglet "Settings" de cet élément, descendez et vous verrez "Custom Attributes".

‍

2- Sur la "Collection List", et attention ici, ne vous trompez pas avec la "Collection List Wrapper", ajoutez :

    -Name: fs-cmsslider-element

    -Value: list

‍

3- Pour le slider, ajoutez :

   -Name: fs-cmsslider-element

   -Value: slider

‍

Cela peut sembler complexe, mais croyez-nous, une fois que vous aurez pris le coup, ce sera un jeu d'enfant !

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Finalisation

Presque terminé !

‍

1- Ajoutez une classe à votre collection CMS et réglez-la sur "display: hidden". Cela permet de masquer la liste de la collection CMS. Vous n'avez pas besoin de la voir pour qu'elle fonctionne.

‍

2- Publiez votre site et... tadaaa ! Votre CMS slider, élégant et fonctionnel, est maintenant en place.

‍

En conclusion, malgré quelques obstacles natifs de Webflow, avec un peu d'ingéniosité et l'aide de Finsweet, tout devient possible. Nous espérons que ce tutoriel vous aura été utile et nous sommes impatients de voir vos créations de CMS Sliders sur Webflow ! N'hésitez pas à partager vos réalisations et à nous faire part de vos retours. Bonne création à vous !

‍