×

Message

Soyez le premier à laisser un commentaire sur ce téléchargement!

Pulsar Nivo Slider

puslarnivoslider
Le principe de ce slider est normalement que toutes les images soient de la même taille, et qu'il s'affiche en pleine largeur. La hauteur est ensuite automatiquement celle de l'image selon la largeur (responsive classique).

Ce slider basé sur NivoSlider est intéressant pour les transitions possibles entre les images. La documentation montre les différentes options disponibles. En gros il est possible de naviguer par flèches précédent, suivant à droite et à gauch du slider, par curseurs sous le slider, et par thumbnails sous le slider et de nombreuses options sont disponibles pour les transitions entre les images.

Plusieurs exemple d'utilisations sont disponibles ici:

http://www.aerolithe.fr/fr/ecole-de-pilotage/les-formations
http://www.sistvo.fr
http://www.bibliotheque-mazarine.fr/fr/


Toutefois si l'utilisateur veut un slider de largeur prédéfinie il lui faut simplement ajouter cette ligne à son fichier css:

.classe-de-mon-slider.slider-wrapper{width:250px;}
S'il veut que la hauteur soit toujours la même pour les images, en affichant toute l'image il peut aussi la setter comme suit:

.nivoSlider .slider_img img{height:354px !important;} le !important est inévitable car sans lui le javascipt prend le dessus pour dire à l'image de prendre sa taille automatique, liée à la largeur.


s'il s'agit simplement de mettre les images à la même taille pour éviter une petite modification de hauteur, mais qu'en fait les images sont toutes sensiblement de même taille, on peut faire:

.classe-de-mon-slider.slider-wrapper .nivoSlider{height:250px;} les images seront alors coupées en bas


les alt et title des images sont pris en compte.

Nota : dans le contenu Seblod sur le champ image ou vignette , il faut activer au préalable le "Mode avancé" à Oui





il est possible de mettre un lien sur l'image dans la liste SEBLOD (et cette pratique est recommandée), le title de l'image sera alors automatiquement repris sur le lien.
10-02-2015 22:02:42
18-06-2017
1070

Commentaire sur ce téléchargement

Liste des commentaires