wSlide, plugin jquery qui va faire glisser vos listes

Retour à la page d'accueil du plugin

FAQ

Comment écrire mon propre menu de navigation en dur dans la page?

En fait, tous repose sur l'id de votre liste. On va prendre le cas d'une liste avec une id="ma_liste" (<ul id='ma_liste'> ... </ul>).

1. On désactive le menu automatique en mettant l'option autolink: false

2. Ensuite pour votre menu, il vous faudra écrire un lien pour chaque éléments de votre liste. Les liens s'écrivent de cette manière:

<a href="#ma_liste-1">1</a>
<a href="#ma_liste-2">2</a>
<a href="#ma_liste-3">3</a>
<a href="#ma_liste-4">4</a>
<!-- etc ... -->

Vous voyez, c'est assez simple, il suffit de faire un lien vers une ancre en précisant l'id de la liste ainsi que l'élément que vous visez. Le tout séparé par un tiret !

Comment personnaliser le menu automatiquement généré d'une liste spécifique ?

Les menus générés sont automatiquement englobés dans une div. Pour une liste avec une id="ma_liste", le menu généré aura la forme suivante:

<div class="wslide-menu" id="ma_liste-menu">
        <a href="#ma_liste-1">1</a>
        <!-- etc ... -->
</div>

Donc l'id du menu correspond à l'id de votre liste suivie de "-menu". Donc coté css il faudra viser ça:

#ma_liste-menu{
        /* blabla */
}

Comment personnaliser en une fois tous les menus automatiquement généré ?

Vous voudriez que tous vos menus soient stylés de la mème façon, et bien il vous suffit d'appliquer votre style css sur la classe "wslide-menu". Celà affectera tous les menus de la page

.wslide-menu{
        /* blabla */
}

Comment personnaliser le conteneur d'un liste spécifique ?

Vos listes sont automatiquement englobées dans une div. Pour une liste avec une id="ma_liste", la div englobante aura la forme suivante:

<div class="wslide-wrap" id="ma_liste-wrap">
        <ul id="ma_liste"><!-- blabla --></ul>
</div>

Donc l'id de la div correspond à l'id de votre liste suivie de "-wrap". Donc coté css il faudra viser ça:

#ma_liste-wrap{
        /* blabla */
}

Comment personnaliser tous les conteneurs de liste en une fois ?

Vous voudriez que tous vos conteneurs soient stylés de la mème façon, et bien il vous suffit d'appliquer votre style css sur la classe "wslide-wrap". Celà affectera tous les menus de la page

.wslide-wrap{
        /* blabla */
}

Comment personnaliser le numéro de page actif ?

Vous aurez remarquez que dans mes exemples le numéro de l'élément en cours de visualisation et stylé d'une manière différente des autres. Pour faire de même c'est très simple. Chaque lien actif du menu se voit attribuer la classe CSS ".wactive". Donc pour personnaliser les liens actifs d'une liste id="ma_liste":

#ma_liste-menu a.wactive{
        padding: 0px 2px;
        background: #000000;
        color: #eeeeee;
}

Retour à la page d'accueil du plugin

-----

Pages: Page précédente

Articles relatifs

  1. Shikiryu
    10/09/2010 à 15:02 | #1

    @fred et pour tous ceux qui voulaient une navigation « précédente » / « suivante ».
    Même si ce plugin commence à dater, il est léger et je l’utilise sur mon site depuis pas mal de temps. Je lui avais ajouté cette fonctionnalité.

    Il suffit de rajouter du HTML :
    #image de précédent##image de suivant#

    Du CSS pour caler les images où vous le souhaitez :
    .navBtn{position:absolute; top:60px; z-index:999; display:none;}
    #previousBtn{left: 60px;}
    #nextBtn{right: 60px;}
    (il faut bien sur que l’élément parent où se trouve le tout soit en position:relative)

    et Wslide modifié : http://www.shikiryu.com/js/jquery.wslide.min.js en minifié ou http://www.shikiryu.com/js/jquery.wslide.unpacked.js pour voir tout le code

  2. Shikiryu
    10/09/2010 à 15:10 | #2

    HTML : [a href="#" class="navBtn" id="previousBtn" title="Précédent"]#image de précédent#[/a]
    [a href="#" class="navBtn" id="nextBtn" title="Suivant"]#image de suivant#[/a]
    en remplaçant les [ ] (crochets) par des (inférieurs supérieurs) vu que ça ne passe pas au niveau des commentaires

  3. apacer
    13/09/2010 à 13:08 | #3

    Cool plugin, great work, man! But it will be better and more effieccient if there will be auto scrolling support..how do i can set up auto scroll? :(

  4. 11/11/2010 à 07:30 | #4

    Bonjour,
    J’aimerai que ce super plugin passe d’un slide au suivant automatiquement en gardant bien sur l’accès à chaque …
    Je ne sais pas comment m’y prendre…
    Merci de votre aide,
    Dg_Dev

  5. 13/11/2010 à 10:00 | #5

    Bonjour,
    Super ce plugin, juste une question : peut-on rendre le passage de slide automatique ?
    Si quelqu’un l’a fait merce d’avance de votre aide, je ne sais comment m’y prendre sans risquer de tout casser :-)
    dg_dev

  6. Whoop
    22/11/2010 à 16:34 | #6

    I found this small but handy piece of code that Ktoso has written to incorperate a timer to allow auto scrolling of wslide. Looks like a few others are after this too ;)

    http://www.blog.project13.pl/index.php/coding/345/jquery-tricks-1-automatic-wslider/

  7. 24/11/2010 à 11:24 | #7

    Attention, avec IE9, il semble que le plugin ne passe pas sur cette version du navigateur.

    Pour cela, il faut créer un fichier.js afin de corriger le bug des balises dl,dd,dt.

  8. 02/12/2010 à 14:36 | #8

    hi,
    wSlide, plugin jquery Auto Slide function code?
    auto slide

    How to make the automatic slide transition,please help me…

  9. 05/12/2010 à 10:50 | #9

    Hey this is really cool but how can i set an auto play function?

  10. Edith
    25/01/2011 à 06:33 | #10

    Un pardon, mais je ne parle pas français. Il écrivait ce commentaire pour te dire : des voeux! Plugin excellent!

    Des saluts depuis le Chili

  11. Shikiryu
    24/02/2011 à 12:21 | #11

    Bonjour / Hi,

    J’ai mis à jour depuis la dernière fois : http://www.webinventif.fr/wslide-plugin/#comment-61832 afin d’avoir l’auto-play.
    ——-

    I did an update since last time http://www.webinventif.fr/wslide-plugin/#comment-61832 to have autoplay.

  12. 08/03/2011 à 20:12 | #12

    Bonjour bonjour !
    Voilà j’ai une question assez simple mais je ne trouve pas la réponse !
    Où doit-on enregistrer le dossier dans Wp ? dans le dossier thème que l’on utilise ? Et où doit on mettre les , dans le header.php du thème wordpress ?

    C’est beaucoup de question mais je sèche, j’ai essayé mais rien n’y fait !

    Merci beaucoup de votre aide !

    Laurent

  13. Pierrot
    13/03/2011 à 04:58 | #13

    Et bah franchement, merci !

    Voilà, c’est tout ! :p

  14. Steven
    15/03/2011 à 15:12 | #14

    hi,
    wSlide, plugin jquery Auto Slide function code?
    auto slide

    How to make the automatic slide transition,please help me…

  15. 15/03/2011 à 16:19 | #15

    Bravo pour plugin très bien fait et déconcertant de simplicité de mise en place

  16. 17/03/2011 à 11:02 | #16

    Bonjour Shikiryu,

    est-ce que c’est possible de rendre visible les de la liste pour les _imprimer_ par un print.css?
    Quel div faut-il adresser?

    Salutations de Berlin
    Eric

  17. Alain
    25/03/2011 à 01:03 | #17

    @Steven Quelqu’un aurait il un fichier complet, js+html du plugin avec l’auto play actif?

    Cela serait un moyen agreable et fiable de diffuser ce code….

    Merci

  18. Volzy
    29/03/2011 à 13:15 | #18

    Hi there,

    great script you created. I was wondering if it was possible to have a list (ul) inside the wslide container? So inside the slide there is an unordered list which does NOT slide.

    Lorem ipsum….
    More Lorem ipsum…

    Basically I want to know if there is a « STOP » button, so only the first unorded list is part of the slide..

  19. hsmr
    22/04/2011 à 13:31 | #19

    J’utilise aussi le plugin Wslide et merci pour toutes les contributions.
    J’utilise la dernière version permettant d’avoir des boutons « Précédent/Suivant » et l’autoplay.
    Sauf que lorsque j’essaie de supprimer les boutons avec l’option
    button:false
    l’autoplay ne marche plus (même en forçant autoplay:true).
    Quelqu’un aurait une solution (j’aimerais avoir l’autoplay sans les boutons « Précédent/Suivant ») ?
    Merci d’avance.

  20. 31/05/2011 à 10:48 | #20

    but to make sure that there is a scroll automatically?

  21. 31/05/2011 à 17:00 | #21

    Gracias , me ayudo mucho este programa .

  22. bob
    08/06/2011 à 10:35 | #22

    Bonjour.
    La taille de mes blocs où j’utilise ce plugin varie tout le temps. J’aimerais donc que les chiffres qui s’affichent pour passer au bloc suivant soient juste en dessous de la dernière ligne de chaque bloc. Comment faire ? Peut-on utiliser le « auto » pour le height ?
    $(« #news »).wslide({
    width: 380,
    height: auto
    });
    merci :)

  23. 09/06/2011 à 20:14 | #23

    hi,
    thx for this slider, is good, but:
    i had problems, if i had ul>li>ul>li

    there is upgrade – http://test.berycz.net/slideshow/

  24. roberto
    11/06/2011 à 15:37 | #24

    Hi, i can’t speak french so i write in english, i hope this is not a problem. My question is: there is a possibility to have a parent4 in a parent1?

  25. Flo
    19/06/2011 à 17:05 | #25

    Salut, super comme plugin, c’est exactement ce que je cherchais.

    Cependant, j’ai des images (précédent, suivant) mais rien ne se passe lorsque je cliques dessus.

    Help ^^

    Merci

  26. 25/06/2011 à 15:12 | #26

    Sorry for my my English
    IE9 not work well, someone has the solution?
    View this page in error http://www.cerveceriaelzurito.es

  27. Dav
    04/08/2011 à 22:02 | #27

    Je n’arrive pas à activer le défilement auto… si quelqu’un peut me filer un peu d’aide… Merci

  28. 13/09/2011 à 17:02 | #28

    Bonjour,
    J’ai légèrement modifié votre script pour prendre un compte l’arrêt de l’animation sur mousehover, si vous êtes intéressé, je suis à votre disposition …
    Cordialement

  29. zelda
    18/11/2011 à 15:59 | #29

    Bonjour,

    Très bon script, rien a redire, mis apart qu’il ne supporte pas les imbrications ( si je fais 2 slide .. .. cela marche, mais par contre si je fais quelque chose comme ca : .., cela pose problème, je m’en sers car j’ai un menu général sur mon site qui va afficher le contenue de chaque li (donc chaque page), mais dans le contenue de ces pages je souhaite rappeler la fonction slide, d’où le problème ..

    Si quelqu’un a une solution ça serait vraiment génial.

  30. Julien
    30/11/2011 à 16:12 | #30

    Vos prières ont été entendues les amis ! Le plugin est en train d’être mis à jour !

    Ce qui est déjà finalisé (mais pas encore dispo, patience): possibilité d’imbriquer des listes, choix du type d’éléments html pour la liste (plus forcement ul li, fonctionne avec tout, genre div a img, etc …), possibilité d’afficher plusieurs « blocs » en même temps (faire glisser les blocs 2 par 2 par exemple), désactivation des CSS pour encore plus de personnalisation.

    Ce qui arrive bientôt: défilement automatique (oui oui) avec autopause et autonav (next/prev)

    Et a priori on devrait toujours rester sous les 5ko (je vise 4 maxi)

    Patience ! ;)

  31. the-dubber
    30/11/2011 à 19:11 | #31

    @Julien

    Cool !

    Je viens de découvrir votre plugin qui est fort intéressent !
    Vivement la mise a jour, l’autoplay sera vraiment un plus !

    J’ai une question cependant, je n’arrive pas à faire marcher le slide si je place la div qui contiens les ul>li en display:none par défault, (dans le but de faire un show (une apparition du slider) en cliquant sur un bouton).

    Y a t-il une astuce ?

    Merci d’avance !

  32. Julien
    01/12/2011 à 15:07 | #32

    Bon voilà, à priori le défilement automatique est bouclé ! Possibilité d’activer la navigation next/prev et autopause au survol ou pas. Fonctionne bien avec jQuery 1.7. Maintenant faut que je test le bousin sur les autres navigateurs et que je fasse une grosse mise à jour des exemples et de l’article…

    @the-dubber ça marche chez moi ;)

  33. the-dubber
    02/12/2011 à 15:51 | #33

    @Julien

    Pour le display:none j’ai fais quelque test pour comprendre pourquoi il ne marche pas chez moi, je me suis aperçu de ceci :

    - ne marche pas si le display:none est définis dans le css ou dans le html
    - ne marche pas si le display:none est définis en jquery avant l’apelle de la div par $(« #parent3″).wslide …
    - marche si on le met après le $(« #parent3″).wslide …
    - marche si par défault le display est définis en block, puis qu’on le redéfinis en none en cliquant sur un bouton par exemple (donc une fois le document chargé).

    Le problème ne vient peut être que de moi , mais sa me semble un peut étrange.

    Vivement la mise a jour =)

  34. Julien
    02/12/2011 à 16:15 | #34

    Pour les impatients, voici la beta de wslide 2.0: http://pastie.org/2955277

    Nouveautés:

    -Ajout de la fonction diaporama (avec choix de la durée, afficher ou pas la navigation prec/suiv, pause au survol)
    -Possibilité d’utiliser autre chose que des listes (une simple succession d’images img fonctionnera) et possibilité d’imbriquer des éléments de même famille
    -Possibilité de supprimer certain style par défaut pour encore plus de personnalisation
    -Possibilité de faire glisser les « blocs » par paquet
    -Possibilité d’afficher une légende (attribut « rel » sur éléments enfants, possible de définir un autre type d’attribut genre title ou alt)

    Encore 2-3 petites choses vont être changées mais rien d’important. Les exemples et la doc arriveront dans quelques jours. En attendant, le code et documenté (+ ou -) ;)

    @the-dubber étrange. J’ai mis display: none en css, puis un simple

    $("#parent3").show();

    (dans le $(document).ready évidement) et ça roule. Si t’as une page en ligne pour voir le bug en question …

  35. the-dubber
    02/12/2011 à 19:18 | #35

    @Julien
    Super !!

    Merci beaucoup pour la beta ^^, c’est vraiment du bon boulot, tout est excellent.

    J’ai tout essayer pour voir si il y avais des bugs, et j’en ai trouver un ou deux lister ci-dessous :

    - si on met l’autoplay à false, il faut que l’autopause le sois aussi, sinon il relance l’autoplay et impossible de faire une pause une fois relancer, donc autoplay:false + autopause:true = problème (d’un coter c’est normal de mettre les deux a false si on arrette l’autoplay ).

    - navmenu, c’est pour faire apparaitre le next et prev ? en mode auto il apparait bien, mais en mode « true ou false » il n’apparait pas.

    - les imbrications marchent très bien, aucun problème, par contre les attributs : caption,captionOpacity,captionPos j’ai essayer de changer les valeurs mais je n’ai pas remarquer de changement ?

    Sinon tout le reste marche niquel, j’ai essayer sur firefox, opéra, safari, ie9, ie8 et chrome, pas de problème.

    Par contre ça ne marche pas sous ie7, j’ai une double erreur : « Expected identifier, string or number »,le javascript plante. (d’un côté il commence à ce faire vieux ie7 .. ).

    Voila pour les petites erreurs que j’ai trouver, sinon pour mon problème de display:none, pour être précis le slider et le menu apparaisse bien mais c’est le slide qui ne marche pas (si on clique sur 3 dans le menu par exemple, on reste figé sur le 1), sauf en définissan le display:none après $(« #parent3″).wslide .

    J’essaierais de mettre en ligne le problème dans les prochains jours pour mieux te montrer, en tout cas merci pour tout.

    Bonne soirée

  36. the-dubber
    02/12/2011 à 19:41 | #36

    petite edit :

    pour le problème du navmenu, le problème est que « true » est de type texte dans ce cas la, donc il faut mettre : if(h.navmenu == « true ») à la place de if(h.navmenu == true)

  37. Julien
    02/12/2011 à 19:49 | #37

    @the-dubber Ok 1er bug corrigé (j’ai pas encore testé tous les cas de figures), j’ai mis le code du précédent message à jour.

    Edit: Pour navmenu oui ok il faut bien typer le paramètre, amis ça c’est à l’utilisateur de faire attention :)

    Pour caption, il faut que tu mettes un attribut du genre:

    <li rel=titre ici">

    Pas encore testé sous ie7 et 6, j’vais jeter un oeil mais je tient à ce que ça marche sous ie7.

  38. the-dubber
    03/12/2011 à 11:55 | #38

    Oui ça n’en sera que mieux si ça marche sur ie7 ^^

    Je voulais savoir, crois-tu que ce sois possible de faire une adaptation pour pouvoir définir la taille de la fenêtre (width et height) en « pourcentage » ou en « auto » ?

  39. Julien
    03/12/2011 à 17:28 | #39

    @the-dubber Pour height en auto c’est ok (le conteneur prendra la valeur du plus haut des enfants). Le width auto aussi, il prend la largeur dispo du conteneur. Le pourcentage ok, mais par contre il ne sera pas « fluide », donc il prendra la valeur x% a l’affichage de la page mais ne sera pas redimensionné si la taille de la fenêtre change car ça plombe beaucoup trop les perfs !

  40. the-dubber
    05/12/2011 à 09:52 | #40

    D’accord merci de ta réponse, donc en auto il est fluide au resize mais pas en pourcentage ? j’ai essayer de mettre width = « auto » pour la largeur, le cadre prend bien la largeur du conteneur, le resize marche, mais par contre le slide ne ce fait plus que verticalement ( la propriété horiz = true ) ne semble pas être pris en compte en « auto ».

  41. Julien
    05/12/2011 à 11:09 | #41

    @the-dubber Oui oui en fait le resize fluide ne pourra se faire que sur un style vertical et en « auto ». Si tu veux une valeur en %, à toi d’englober le slider dans une div avec largeur en %. Toutes ces limitations sont provoquées à cause de l’utilisation de padding/margin sur les éléments enfants. Quand on (re)défini la largeur/hauteur des blocs enfants il faut à chaque fois faire le calcul pour chaque bloc (car ils peuvent avoir des valeurs différentes). La solution simple serait que le script englobe chaque bloc dans une div, mais c’est impossible puisque selon le type d’enfant utilisé ça risque de provoquer des erreurs d’affichage (avec les listes par exemple). Donc permettre le resize dynamique dans le sens horizontal entraine le recalcul de toutes les largeurs à chaque mouvement de resize (événement appelé des centaines de fois par seconde lors du resize).

    Sinon j’ai:

    - ajouté une navigation au clavier
    -amélioré le fonctionnement du multibloc (au lieu de multiplier par X les dimensions du conteneur pour faire rentrer les x blocs, il divise les dimensions des blocs pour tout rentrer dans un conteneur de taille normal).
    -ajouté la possibilité de créer ses propres boutons de next/prev (comme pour le menu en fait)
    -testé sous ie6-7-8-9 et ça à l’air de tourner (sauf la nav prev/next sous ie6 et la nav au clavier uniquement sous ie8 et +)

    Me reste donc a résoudre un bug au niveau des classes .wactive en multibloc, permettre le width: auto même en horizontal (mais sans resize du coup) et préparer les styles CSS pour ceux qui veulent personnaliser au mieux le slider. Par contre ça va être difficile de rester sous les 5ko du coup -_-, j’en suis déjà à 5,3 ko (compressé mais pas gzippé)

  42. the-dubber
    05/12/2011 à 16:40 | #42

    D’accord merci pour tes réponses précises, je comprend mieux le problème maintenant, et effectivement le resize consomme beaucoup de ressources.

    5.3 ko c’est déja bien optimiser je trouve pour toute les fonctions que propose ce plugin ^^

    Sinon cool pour les nouvelles fonctionnalités, vivement la sortie finale =)

  43. mike521
    11/12/2011 à 00:07 | #43

    Bonjour,
    J’ai tester la version beta que j’ai vue dans les commentaries, très bon plugin, fort pratique, j’ai une requête cependant, est-ce qu’on peut faire en sorte que en cliquant sur un bouton (bouton de pause) l’autoplay ce mette en pause ? (comme avec le hover en fait )

    Merci

  44. the-dubber
    19/12/2011 à 14:47 | #44

    Je reviens après quelque semaine avec nouvelle question =)

    J’ai un menu avec diverse page parcouru en jquery (donc pas de rechargement de page).
    Sur chaque page j’ai placer un slider Wslide avec le défilement auto du slide.

    Ma question : Est-il possible de faire en sorte que lorsque j’arrive sur ma page, le slider concerné revienne en première position avec le temps de l’autoplay remise a zéro (comme quand on fait un next ou prev ..) ?

    J’ai réussi à faire en sorte de revenir sur la première position en procédant comme ceci :
    var indexpage = idparent // ici je récupère l’id du slider
    $(‘a[href="#parent'+indexpage+'-1"]‘).trigger(‘click’); // on arrive en premiere position

    Mais le problème est que le slider continue de défiler entre chaque slide (donc si on arrive au moment ou l’autoplay va changé, on ne reste passe directement au slide suivant sans voir le premier).

    Voila pour mon problème, en espérant que tu puisse m’aider si tu passe par la ..

    Merci d’avance

  45. the-dubber
    23/12/2011 à 11:18 | #45

    J’ai réussi, en fait pour que le slider soit remise a zéro il faut faire l’opération ci-dessous côté script js de wslide.

    $(« a[name='navigation']« ).click(function(e) // evenement changement de page
    {
    clearInterval(thisinterval);
    thisinterval = goNext(a.find(‘a.wslide-nav-next’));
    });

  46. iAlex
    24/12/2011 à 21:49 | #46

    Hi, it does’t work when one in another, for example, parent2 does’t work in parent1…

  47. Alex
    04/01/2012 à 17:05 | #47

    Bonjour,

    J’ai testé le script, il fonctionne très bien et est très pratique !

    Cependant, quand je vais sur ie7, il plante alors que sous firefox, pas de problème.

    J’ai lu dans les commentaires qu’il a été testé sur tous les navigateurs IE.

    Quelqu’un a-t-il une idée du problème que je pourrai avoir ?

    Apparemment c’est au lancement du bout de javascript que j’ai l’erreur :

    $(document).ready(
    function(){//on attend que la page soit chargée
    $(« #defilement »).wslide({

    (Erreur à la 3eme ligne)

    Après, j’ai la bêta 2.0, peut-être que c’est ça le problème !

    Merci :p

  48. Julien
    04/01/2012 à 17:08 | #48

    @mike521 ok ça sera ajouté ;)

    @Alex oui la béta plante sous ie7, depuis j’ai corrigé ce soucis, une nouvelle béta devrait arriver dans quelques jours

  49. Alex
    11/01/2012 à 14:51 | #49

    Ok merci Julien :)

Page des commentaires
  1. 31/01/2008 à 07:50 | #1
  2. 31/01/2008 à 23:26 | #2
  3. 27/03/2008 à 18:17 | #3
  4. 07/05/2008 à 22:41 | #4
  5. 27/07/2008 à 07:41 | #5
  6. 17/08/2008 à 10:58 | #6
  7. 01/09/2008 à 19:46 | #7
  8. 09/09/2008 à 21:39 | #8
  9. 28/10/2008 à 11:06 | #9
  10. 15/01/2009 à 20:33 | #10
  11. 04/04/2009 à 03:18 | #11
  12. 12/08/2009 à 10:06 | #12
  13. 18/08/2009 à 22:25 | #13
  14. 23/09/2009 à 14:51 | #14
  15. 27/10/2009 à 09:49 | #15
  16. 10/12/2009 à 03:49 | #16
  17. 24/01/2010 à 11:12 | #17
  18. 04/07/2010 à 23:56 | #18
  19. 11/07/2010 à 20:11 | #19
  20. 15/08/2010 à 11:17 | #20
  21. 03/11/2010 à 13:51 | #21
  22. 04/02/2011 à 15:48 | #22