Un Slider jQuery « Responsive Design », FlexSlider

flexslider

Pour commencer, il faut déclarer le framework jQuery et FlexSlider (JS et CSS) dans la balise head de la page.

La structure HTML nécessaire pour FlexSlider n’est qu’une “div” qui contiendra une liste à puces ( ul ) avec la classe « slides ». Il est important d’utiliser la classe « slides » vu que cette classe sera l’identifiant du flexslider. ( on pourra la modifier dans l’option du plugin )

Ensuite, il suffira de placer vos images dans chaque “li”

La dernière étape est l’appel de la fonction flexslider() dans l’événement $(window).load(). L’utilisation de celle-ci est nécessaire pour s’assurer que le contenu de votre page soit totalement chargé avant l’exécution de flexslider.

Plus d’une vingtaine d’options vous est proposé pour la configuration de votre slider.

Voici une vidéo de démonstration

Répondre