12 juillet 2012
Category:
Javascript
Comments: 11

Sélection de 20 Slider Jquery et leurs tuto

Les slider Jquery et Carousel Jquery sont devenus au fil des dernières années, des éléments incontournables à intégrer sur les pages de votre site internet.
Dans un même temps les frameworks Javascript, tel que Jquery, se sont réellement démocratisés auprès du grand public et non sont plus réservés aux codeurs expérimentés. La popularité et la fléxibilité de Jquery a su attirer des codeurs de talents qui ont pu développer des plugins d’une grande qualité et facile à mettre en oeuvre. Ici nous allons vous présenter une sélection de plugins qui vous permettrons de réaliser un slider ou une galerie. Lorsqu’un slider est utilisé à bon escient sur un site web, il procure une excellente expérience utilisateur, et nettement plus intuitive, lorsqu’il s’agit de mettre en avant des images.

Voici une sélection de 20 sliders et de leur tutoriel de mise en place, que l’on pense incontournable, et qui devrait réveiller votre inspiration.

1 – AVIA SLIDER ( Plugin payant )

Ce plugin jQuery dispose de 8 effets de transition uniques, pré-chargement image, départ automatique qui s’arrête sur lorsque un utilisateur interagit et un grand nombre d’options facile à définir pour créer vos propres effets.

PLUS D’INFOS | DEMO

2 – Easing Slider ( Plugin payant )

Un plugin pour wordpress, simple à installer et mettre en oeuvre, existe pour ce slider !

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

3 – FancyMoves

Ce slider jquery permets d’afficher de large image pour mettre en avant vos prestations, produits, ou tout autres points que vous souhaitez imager sur votre site. L’image est agrandi pour attirer l’attention de l’internaute. A noter que ce diaporama vous permets de choisir entre 3 styles de navigation : en utilisant les flèches du clavier, en utilisant les boutons précédent/suivant présent à gauche et à droite, ou simplement en cliquant sur la photo suivante.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

4 – SlideDeck

Slider devenu rapidement populaire, essentiellement depuis la publication d’un plugin pour wordpress, il permets de mettre en avant tout type de contenu et pas seulement de simples images qui défilent.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

5 – Anything Slider

Comme son nom l’indique, ce slider vous permets de faire défiler tout ce que vous voulez. Chaque slide peut contenir une image seule, du texte simple ou au format html, une vidéo youtube, une animation flash …

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

6 – Orbit Slider

C’est l’un de nos diaporama jquery préférés, simple à mettre en place, avec n’importe quelle taille d’image, la possibilité d’incruster une légende, une minuterie, et tout un tas d’options sympa.

[sociallocker id= »1698″]INFOS + DEMO[/sociallocker]

7 – Easy Slider

Facile à mettre en place, des options simples à paramétrer, easy !

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

8 – JQUERY BANNER ROTATOR ( Plugin payant )

Ce plugin de rotation d’images en jquery offre un rendu très pro. Différentes options permettent par exemple d’afficher des vignettes, textes, titres, régler les transitions entre slide …

PLUS D’INFOS | DEMO

9 – Jquery Cycle Slider

Un diaporama très léger, avec des effets sympa : défilement droite / gauche, au hasard, effet rideau, zoom, apparition en fondu …

[sociallocker id= »1698″]Cycle Slider: INFOS + DEMO

Cycle Slder V2 : INFOS + DEMO (support mobile + responsive)[/sociallocker]

10 – Estro Slider ( Plugin payant )

Ce plugin Slider Jquery utilise javascript de manière brillante pour transformer un simple bloc de code HTML en une vraie diapo à la mise en forme élégante. Vous êtes libre de mettre en forme votre contenu, et d’utiliser le HTML5. L’avantage est que ce diaporama à son code optimisé au référencement, et que même si le javascript est désactivé sur le navigateur de votre visiteur, votre mise en page ne sera pas explosée ! Ce diaporama utilise les effets type « Ken Burns Effect », configurable de A à Z, et bien sur compatible avec les plus grandes parties des navigateurs internet ( et même d’ancienne version de Internet Explorer ! ) ainsi que les navigateurs mobiles. Et si vous n’êtes pas fan des effets type Ken Burn, beaucoup d’autres transitions sont à votre disposition, tout aussi simple à configurer.
[sociallocker id= »1698″]
PLUS D’INFOS
| DEMO[/sociallocker]

11 – Coin Slider

Un slider Jquery avec des effets unique, à découvrir d’urgence si vous ne le connaissez pas déjà !

[sociallocker id= »1698″]INFOS + DEMO[/sociallocker]

12 – NivoSlider

Tout comme le slider précédent, Nivo est devenu l’un des plugins les plus utilisés. 9 transitions inédites et une simplicité de mise en place qui font de lui un des incontournables.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

13 – PieceMaker

Un slider open source avec des effets 3D.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

14 – Slider style Apple

Un slider jquery accompagné d’un tutoriel de mise en place qui vous permettra de créer l’effet unique présent sur le site Apple.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

15 – Gallerific

Ce plugin jquery offre une expérience unique et permets d’afficher un grand volume d’images/photos.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

16 – S3Slider

Un slider avec des effets de transitions soignés.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

17 – Featured Slider

Généralement utilisé sur des blogs et site éditoriaux, ce diaporama vous permets de mettre en avant des articles avec titre, vignette et extrait de l’article.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

18 – Supersized

Un slider plein page, avec transitions et préchargement des photos.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

19 – iTunes Slider

Un plugin accompagné d’un tuto simple et concis qui vous permettra de recréer le slider présent sur les pages d’accueil de iTunes.

[sociallocker id= »1698″]PLUS D’INFOS | DEMO[/sociallocker]

20 – Royal Slider ( Plugin payant )

Un slider compatible avec les téléphones et tablettes tactiles, permettant une navigation fluide et des effets sympa !

PLUS D’INFOS | DEMO



11 réponses pour “Sélection de 20 Slider Jquery et leurs tuto

  1. sadiq dit :

    Merci Bp ! 😉 j’ai aimé Supersized !

  2. Olivier C dit :

    Le plugin jQuery Cycle – que j’ai personnellement beaucoup utilisé – est passé à Cycle 2. Le code a l’air sympa.

    • Tom dit :

      Merci pour l’info Olivier, je viens de mettre à jour l’article.
      Sympa ces nouvelles caractéristiques mobile friendly et responsive design, il faut que je teste ça dés que j’aurais 5 min !

  3. Danny dit :

    Merci
    Tuto très sympa, sincèrement j’adore ça grave !

  4. Evane dit :

    Attention l’estro slider bien que payant présente quelques manques par rapport a votre présentation.
    Les transitions ne fonctionnent pas sur IE (à partir du code acheté pourtant et téléchargé) .
    Un peu prise de tête pour en venir à bout. Mais je ne desespère pas.
    Très beau slider pourtant , c dommage

  5. Arshad dit :

    Bonjour.
    Je n’arrive pas à télécharger les plugins gratuit. Aucun lien n’est affiché.
    Merci

  6. benayad dit :

    joli site web

  7. Chafik dit :

    Je viens de télécharger et d’installer le plugin Featured Slider. Je trouve le résultat pas mal !!! 🙂

    Merci pour l’article.

    Cordialement,
    Chafik

Répondre à Danny Annuler la réponse

Votre adresse e-mail ne sera pas publiée.