Note : le numéro de version du plugin est différent du numéro de version du script embarqué.
Note de version
Cette version 2 du plugin fonctionne de manière totalement différente des précédentes versions, adoptant le fonctionnement proposé par Cédric sur GitHub.
Dans cette version 2, le code javascript et CSS d’AnythingSlider n’est pas chargé sur toutes les pages mais seulement pour celles utilisant un slider.
Le parti pris est de considérer qu’on n’a a priori jamais de slider sur toutes les pages du site, et qu’insérer le JS et les css sur tout le site est dispendieux. Du coup on insère tout cela de manière intelligente uniquement quand un slider est présent dans la page, repéré par la classe slider-anythingslider.
AnythingSlider
Pour une présentation et une démo d’AnythingSlider, voir http://css-tricks.github.com/Anythi....
Le plugin intègre également les thèmes additionnels développés pour AnythingSlider (démo) distribués sur GitHub.
Les différentes options du script ne sont pas détaillées ici. Merci de se référer à la documentation d’AnythingSlider.
Insérer un slider dans son squelette
Un slider peut facilement être inséré dans un squelette, sans une seule ligne de javscript, de la manière suivante :
<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
<ul class="slider-anythingslider liste-items">
<BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
<li class="panel">
.... contenu de chaque item .....
</li>
</BOUCLE_slider>
</ul>
</div>
</B_slider>Le plugin détecte automatiquement les listes portant la classe slider-anythingslider, charge le javascript nécessaire et initialise le slider. Bien entendu, on peut boucler sur ce que l’on veut.
Transmettre des options au slider
Les options à transmettre au slider peuvent être précisées via un attribut data-slider à ajouter au ul.slider-anythingslider. Par exemple :
<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
<ul class="slider-anythingslider liste-items"
data-slider='{
startText : "Démarrer",
stopText: "Arrêter",
buildStartStop: false,
buildNavigation: true
}'>
<BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
<li class="panel">
.... contenu de chaque item .....
</li>
</BOUCLE_slider>
</ul>
</div>
</B_slider>Pour la liste complète des options disponibles et de leur valeur par défaut, voir la documentation d’AnythingSlider.
Changer le thème du slider
Pour changer le thème du slider, on ajoutera à data-slider une option css contenant le chemin du fichier CSS du thème. Il est inutile de préciser le paramètre theme, ce dernier étant calculé automatiquement d’après le nom de la CSS.
Exemple :
<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
<ul class="slider-anythingslider liste-items"
data-slider='{
css:["#CHEMIN{lib/anythingslider/css/theme-simple.css}"],
buildStartStop: false,
buildNavigation: true
}'>
<BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
<li class="panel">
.... contenu de chaque item .....
</li>
</BOUCLE_slider>
</ul>
</div>
</B_slider>Personnaliser les onglets de navigation
Par défaut, et pour les thèmes les prenant en charge, les onglets de navigation sont numérotés séquentiellement. Il est cependant possible de les personnaliser en ajoutant dans chaque <li></li> un élément avec la classe slider-nav contenant le contenu de l’onglet de navigation. Par exemple :
<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
<ul class="slider-anythingslider liste-items"
data-slider='{
css:["#CHEMIN{lib/anythingslider/css/theme-default1.css}"],
buildStartStop: false,
buildNavigation: true
}'>
<BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
<li class="panel">
.... contenu de chaque item .....
<span class="slider-nav" style="display: none;">[(#TITRE|couper{20})]</span>
</li>
</BOUCLE_slider>
</ul>
</div>
</B_slider>Utilisations avancées
Si pour des usages plus avancés d’AnythingSlider (voir documentation d’AnythingSlider), vous avez besoin de charger plusieurs CSS et/ou script JS supplémentaires, ces derniers peuvent être indiqués via les options css et js de l’attribut data-slider.
Discussions par date d’activité
33 discussions
bonjour
comment fonctionne la fonction image_reduire avec les 2 valeurs entre les accolades ? J’ai des images qui se réduisent et d’autres qui n’apparaissent pas en entier.
Est-ce également lié à ma class=« panel » dans laquelle la fonction est appelée ?
Merci pour vos retours
j’ai refait mon slider
Du coup j’ai mon image assez grosse et le texte en dessous (j’ai associé mes articles avec le mot clé slider pour avoir les articles que je veux dans le diaporama)
voici le code si ça intéresse certains, à ajuster selon vos envies...
J’ai refait mon slider,et ça marche (fixe image + texte)
Répondre à ce message
Bonjour,
J’ai un problème de dimension
Je ne comprends pas où sont calculés width et height
Voir capture écran
Pouvez-vous m’aider
Merci
Répondre à ce message
Bonjour,
Lorsque je lance une boucle, le slider s’affiche mais suivi d’un un espace vide correspondant au nombre de résultats trouvés.
Le premier élément est bien remonté et les boutons de navigation opérationnels mais beaucoup trop bas dans un espace vide .
Merci de votre aide.
Répondre à ce message
Bonjour,
J’essaye d’utiliser ce plugin pour afficher des brèves. J’ai mis le paramètre « showMultiple : 2, » mais je n’ai qu’une seule brève. Si je règle la largeur max des
<li>en css a une valeur fixe (ie. 25rem) j’arrive à voir plusieurs brèves mais ça ne fonctionne que sur une largeur de viewport fixe...Je travaille en local pour le moment, désolée, ce n’est sûrement pas très explicite mais si quelqu’un peut m’aider....
Merci beaucoup d’avance.
Voici le code de mon squelette :
la partie de css qui s’applique :
je ne sais pas avec ton code mais
en mettant dans data-slider : showMultiple :2, changeBy : 1,
avec des images cela prend bien 2 images et une seule change à la fois ... par contre je n’arrive pas à avoir le responsive dans ce cas
la doc pour un slider multiple est la
http://jsfiddle.net/Mottie/ycUB6/40/
Répondre à ce message
Bonjour,
est-ce que le plugin va être porté en spip 3.2 ?
merci
Répondre à ce message
Bonjour,
Merci pour cet excellent slider !
Maintenant, que j’ai réussi à l’implémenter dans mon site, je souhaiterais pouvoir utiliser les options avancées mais je ne sais ni où ni quel code je dois insérer pour utiliser le animate.css
Voici ce que j’utilise pour le moment mais j’aimerais aussi jouer avec les textes...
Merci
Répondre à ce message
Bonjour,
j’ai un slider en bandeau du site
Au chargement de la page, on voit le chargement des images une après l’autre avec le css du li avant de les voir comme il faut dans le slider .
Savez vous comment faire pour les précharger et éviter cet effet
pas de pb pour des sliders « moins large ».
merci
Répondre à ce message
Bonjour,
J’aime beaucoup ce plugin mais j’ai un peu de mal avec la documentation.
Si vous pouviez m’éclairer sur les points suivants ...
- si j’ai rajouté un theme qu’elle est la syntaxe pour rajouter un autre css par exemple animate.css
data-slider=’
css :[« #CHEMINlib/anythingslider/css/theme-cs-portfolio.css »],
- comment changer d’animation
- peut-on avoir du responsive si on a 2 images simultanées
merci
Répondre à ce message
Bonjour,
Pour ceux qui comme moi essaient d’intégrer ce plugin avec un SPIP 3.1 et SPIPr :
j’ai du styler un
.slider .fade opacity : 1 ;
car bootstrap (livré avec SPIPr) insère par défaut un .fade opacity : 0 ;
et donc j’ai cherché pendant longtemps pourquoi mes images ne s’affichaient pas.
dd
Répondre à ce message
Bonjour
J’ai souhaité faire un slider de vidéos Youtube.
J’ai un problème que je n’ai réussit à résoudre qu’en zappant le plugin spip et en passant directement par le module jQuery AnythingSlider que j’ai collé dans mon squelette, donc avec les mêmes css et les mêmes réglages.
Mon problème c’est que la taille affichée des vidéos est différente en fonction du nombre de video.
Je force la hauteur de mon slider à 400px de haut mais la vidéo s’affiche bien si mon slider en contient 2, si j’en rajoute une, ma video fait 600px de haut, une 4e >800px, etc...
Impossible de régler le problème de mon côté.
Dommage, ça paraissait plus simple de passer par un plugin...
Répondre à ce message
Ajouter un commentaire
Suivre les commentaires :
|
