Flickity un slider responsive compatible avec les supports tactiles

flickity

Avec l’évolution du responsive design, les développeurs se posent souvent la question sur l’adaptabilité des plugins sur les supports tactiles.

Vu que la plupart des plugins ne sont pas flexible par rapport au besoin de l’intégrateur et car il est souvent difficile de changer la configuration sur certains options qui sont gérés par le JavaScript et non par le CSS du coup ces bibliothèques peuvent ralentir le travail des développeurs.

Flickity est là pour palier à ces nombreux problèmes car créer spécialement pour les supports tactiles afin d’obtenir un comportement le plus proche du native.

Flickity utilise les effets CSS3 pour rendre plus fluide l’animation et ainsi faciliter l’interaction, de ce fait nous donne la possibilité de les paramétrer via les media query / CSS.

Pour nous developer front end, Flickity est très facile à mettre en œuvre.
Flickity est conçu pour être flexible, vous permettant de tirer parti de votre propre style CSS pour vos carrousels réactive.

La structure html

Pour commencer à utiliser Flickity, ajouter les fichiers .css et .js dans le head de votre page

Puis on intégrera les éléments qu’on va slider dans la structure suivante :

Initialisation du plugin

Il y aura plusieurs façons d’initialiser Flickity

Si vous voulez utiliser jQuery pour l’initialiser faites comme ici :

Si vous voulez l’initialiser via le HTML, sans écrire de JavaScript, faites comme ceci :

Styliser Flickity

Avec le plugin, on pourra modifier la taille et le style des items librement et avec votre propre CSS.
Flickity fournit un élément conteneur afin de pouvoir redimensionner les items avec des valeurs en pourcentage. Tous ce qui concerne les dimensions se feront via CSS. ( mais non via javascript )

Afin de gérer le nombre et la taille des items à afficher, il suffit de jouer avec les Media Queries.

Flickity ajouter une classe is-selected sur l’élément en cours, ainsi vous pourrez l’utiliser dans votre CSS afin de personnaliser l’aspecter de l’élément active.

Pour aller plus loin, les items peuvent être personnalisé avec les effets de transformations en CSS et centrer par l’utilisation de la technique flex-box ( CSS3 )

Les autres options

Flickity a une large palette d’options et de fonctions, mais nous allons voir les options les plus utilisées.

wrapAround: true

L’option wrapAround permet de faire défiler qu’un seul élément mais nous donne la possibilité d’entrevoir sur les cotés les éléments précédent et suivant.

freeScroll: true

L’option freeScroll permet donner une boucle infinie sur le défilement de notre slider.

Une réponse à “Flickity un slider responsive compatible avec les supports tactiles”

  1. gad

    Thank you for those wonderful tutorials , i will implement them in my site
    http://plombier-paris-15-urgent.fr/
    Thanks

    Répondre

Répondre