Slider++

Un plugin de type "slider", les multiples options disponibles vous permettrons de profiter d'un large éventail de possibilités, sa mise en place est extrêmement simple, il suffit de préciser le contenu à afficher, tout le reste est géré en interne par le plugin.
Le contenu des slides est entièrement libre, cela peut aller des images (comme sur les exemples) au texte contenant des liens cliquables

Note : Les propriétés CSS définies à l'intérieur du plugin ne peuvent plus être modififées via la feuille de style, une petite astuce permet néanmoins de passer outre, il s'agit d'ajouter "!important", la propriété ainsi modifiée aura la priorité sur celle du plugin, attention toutefois, IE ne reconnait pas cette règle.

Et ce n'est pas terminé, d'autres options sont en cours...

Afficher les options

Ajouter un commentaire

Voir les 12 commentaires

Télécharger Slider++ Télécharger JQuery

Posté le 29 octobre 2012 par le developpeur fou à 19:08:21 s

Bonjour à tous,
A la recherche d'un slider je suis tombé sur ce plugin, il n'à pas l'air mauvais.
Par contre tu aurais dû mettre les codes en texte pour facilement les copier/coller, mais comme le dit le vengeur masqué, c'est peut-être pour nous obliger à taper et mieux apprendre
Posté le 04 juillet 2012 par le paresseux à 13:46:26 s

Un slider de plus, on ne les compte plus, mais bon, vu qu'il est possible de placer tout et n'importe et pas seulement des images, c'est un plus... tout comme les numéros des slides qui peuvent être customisés. Conclusion: plugin pas mauvais
Posté le 29 juin 2012 à 16:16:59 s

+1, bonne continuation
Posté le 29 mai 2012 à 14:42:08 s

Bonjour, je suis en train de l'utiliser actuellement pour un site, il l'air de se porter très bien
Posté le 18 mai 2012 à 11:28:49 s

Bonjour, je viens aussi de l'installer et il à l'air de bien fonctionner
merci
Posté le 13 avril 2012 à 12:40:53 s

Slt, j'utilise ton plugin depuis quelque jours, après l'avoir testé, pas mauvais du tout.
Surtout par le fait que je n'ai pas que des images, mais aussi du texte avec des liens, donc, c'est au poil
thx
Posté le 29 mars 2012 à 14:27:28 s

Pour ceux qui veulent en savoir + sur le framework
http://docs.jquery.com/Main_Page
Posté le 21 mars 2012 par le développeur à 09:08:51 s

Merci pour vos commentaires positifs
Je suis sur un autre plugin, plus rare en terme de fonctionnalité
Posté le 19 mars 2012 à 10:12:06 s

Salut tout le monde
Je cherchais un slider pour mon appli, avec des numéros customisables, je crois que je vais adopter celui la.
En plus ce ne sont pas des images, mais du texte et des liens,
exactement ce qu'il me faut
Posté le 15 mars 2012 par glouton à 17:04:26 s

+1 pas mal
Posté le 14 mars 2012 à 13:33:51 s

Beaucoup de slider sur le web, mais comme le dit le vengeur masqué,
l'option "numeric" possède pas mal d'options.
M'en vais le tester
sinon, compliment, pas mal
Posté le 13 mars 2012 par le vengeur masqué à 14:54:17 s

Très bon plugin
Surtout le paramètre qui permet de gérer les numéros comme on le souhaite, à l'extérieur comme à l'intérieur, personnalisable à 100%
Petit bémol, tu aurais pû laisser les exemples de code en texte et non en image
Je suppose que c'est pour nous obliger à taper et mieux mémoriser du coup

OPTION VALEURS DEFAUT
DESCRIPTION
position "absolute", "relative" "relative"
Positionnement du bloc complet du slider, incluant les fleches
zIndex numérique 1
Index de profondeur du slider, par défaut à 1, pour éviter tout oubli
leftArrowText texte "<"
Texte du bloc permettant de défiler vers la gauche, laisser les doubles quotes vides ou positionnez l'option showArrowText à false
rightArrowText texte ">"
Texte du bloc permettant de défiler vers la doite, laisser les doubles quotes vides ou positionnez l'option showArrowText à false
showArrows true, false true
1. true : Affiche les blocs qui permettent le défilement à gauche ou à droite, par exemple pour laisser uniquement l'option "numeric"
2. false : Les blocs qui permettent le défilement à gauche ou à droite ne sont jamais affichés
showArrowText true, false true
1. true : Affiche le texte dans les blocs qui permettent le défilement à gauche ou à droite, evite d'avoir à préciser les options "leftArrowText" et "rightArrowText" avec des doubles quotes vides, celles-ci étant précisées par défaut
2. false : Le texte des blocs qui permettent le défilement à gauche ou à droite ne sont jamais affichés
showArrowsHover true, false false
1. true : Afficher au survol du slider, les blocs qui permettent le défilement à gauche ou à droite
2. false : Les blocs qui permettent le défilement à gauche ou à droite sont toujours affichés
centerArrowText true, false true
1. true : Centre le texte des blocs qui permettent le défilement à gauche ou à droite
2. false : Le texte des blocs qui permettent le défilement à gauche ou à droite ne sont pas centrés
centerArrow true, false true
1. true : Centre les blocs qui permettent le défilement à gauche ou à droite à l'intérieur du slider
2. false : Les blocs qui permettent le défilement à gauche ou à droite ne sont pas centrés
auto true, false true
1. true : Active le défilement automatique, le défilement est stoppé lors du premier click
2. false : Le slider n'affiche le slide suivant qu'au click
startSlide numérique 1
Démarre le slider à partir du slide portant le n° mentionné, slide 1 par défaut
random true, false true
1. true : Affichage aléatoire des slides
2. false : Affiche les slides comme défini dans l'option "direction"
keepRandomOnClick true, false false
1. true : Au click, affiche aléatoirement le slide suivant, uniquement sur les flèches, un click sur la barre "numeric" affichera le slide correspondant
2. false : Au click, affiche les slides comme défini dans l'option "direction"
accesSlide "direct", "door", "swap", "scroll" "direct"
4 façons d'arriver au slide souhaité:
1. Direct: Affiche le slide demandé directement sans passer par les slides intermédiaires, contrairement à l'option "scroll"
2. Door: Fait coulisser le slide visible, laissant apparaitre derrière lui, le slide demandé
3. Swap: Affiche le slide demandé avec un effet de fondu en transparence
  (pas de transparence sous IE6)
4. Scroll: Accède au slide demandé en affichant tous les slides intermédiaires, par exemple, aller du 2 au 7, affichera les 3 à 5 avant d'arriver au 7 à la vitesse définie par le paramètre "speed"
direction "nextInc", "nextDec", "prevInc", "prevDec" "nextInc"
Exemple sur un nombre de 8 slides
1. nextInc : Défilement vers la droite dans le sens normal -> 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
2. nextDec : Défilement vers la droite dans le sens inverse -> 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1
3. prevInc : Défilement vers la gauche dans le sens normal -> 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1
4. prevDec : Défilement vers la gauche dans le sens inverse -> 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8
vertical true, false false
1. true : Défilement des slides dans le sens vertical
2. false : Défilement des slides dans le sens horizontal (par défaut)
numeric true, false false
1. true : Affiche les numéros des slides, afin d'y accéder directement d'un simple click
2. false : N'affiche pas les numéros d'accès direct aux slides
numericDefault true, false true
1. true : Utilise l'option "numeric" géré par le plugin lui-même
2. false : Si l'option "numéric" par défaut vous pose des soucis, vous pouvez les définir vous-même
numericImg texte ""
Chemin et préfixe des visuels du numéro des slides accompagné de son extension, "off" pour les numéros inactifs, "on" pour le numéro actif
ex : "../images/img,png", le plugin affichera les visuels nommés img1off.png, img2off.png, img3off.png, img4off.png etc... se trouvant dans le répertoire images.
Le slide actif n°4 aura pour image img4on.png.
note : Ne pas oublier lors du nommage de vos images de rajouter "off" sur les numeros inactifs et "on" sur ceux actif
numericBetween numérique 1
Espace séparant les blocs numériques, se comporte de la même façon qu'un margin
note : En pixels
numericBoxSize texte "20x14"
Dimensions du cadre contenant le numéro du slide
note : En pixels, largeur x hauteur
numericPosition "topLeft", "topRight", "bottomLeft", "bottomRight" "topLeft"
1. topLeft : le bloc numérique est potionné dans le coin supérieur gauche
2. topRight : le bloc numérique est potionné dans le coin supérieur droit
3. bottomLeft : le bloc numérique est potionné dans le coin inférieur gauche
4. bottomRight : le bloc numérique est potionné dans le coin inférieur droit
Note : L'option "numericCenter" est prioritaire sur "numericPosition"
numericVertical true, false false
1. true : Le bloc numérique est affiché verticalement
2. false : Le bloc numérique est affiché horizontalement
numericCenter true, false false
1. true : Le bloc numérique est centré à l'intérieur du slider
2. false : Le bloc numérique est positionné comme défini dans l'option "numericPosition"
Note : L'option "numericCenter" est prioritaire sur "numericPosition"
numericOut true, false false
1. true : Positionne le bloc numérique à l'exterieur du slider, à utiliser conjointement avec l'option "numericDefault" à false
2. false : Positionne le bloc numérique à l'intérieur du slider
Note : Si numériqueOut est à true, ne prends pas en compte les options "numericCenter" et "numericPosition"
showNumericHover true, false false
1. true : Affiche le bloc numérique uniquement lors du survol du slider
2. false : Affiche toujours le bloc numérique
pause numérique 2000
Spécifie le laps de temps avant d'afficher le slide suivant, l'option "auto" doit être à true
note : En millisecondes
speed numérique 1500
Spécifie la vitesse de l'animation pour afficher le slide suivant
note : En millisecondes

Plugin JQuery