A l'aide d'un plugin jQuery, nous allons créer un slider pour vos articles de blog. Ceux-ci défileront en images avec un lien vers l'article et la date de parution sur chaque slide. Ce tuto va se découper en 2 parties :
- Dans la première, nous verrons comment créer le slider en HTML/CSS puis nous ajouterons la couche Javascript en écrivant notre code Jquery et en liant notre page à un plugin qui va nous permettre de créer le système de slide rapidement et de lui spécifier quelque options comme le type de transition, les actions sur les boutons précédent, suivant....
- Dans la seconde partie, nous ferons un tour d'horizon sur un petit thème Wordpress que j'ai créé pour l'occasion. Il est simple et contient juste les fichiers nécessaires au bon fonctionnement de Wordpress. Nous aurons un blog qui listera les articles de 2 catégories confondues. L'objectif ici sera de récupérer à l'aide d'une boucle personnalisée les articles de la catégorie Slider pour les afficher sous forme de slides au-dessus de notre blog. Nous verrons entre autre comment ajouter à Wordpress une fonctionnalité permettant d'utiliser des images à la une et de créer des tailles d'images personnalisées.
A la fin de ce tutoriel, vous aurez un slider fonctionnel et prêt à l'emploi, que vous pourrez utiliser sur votre site ou votre blog, avec ou sans Wordpress. Le système de slider ainsi que le petit thème Wordpress sont fournis avec ce tuto pour une meilleure compréhension de la formation.
Bon tuto !!
Jetez un oeil à ces autres tuto jQuery 1.7, Wordpress 3.3
Créer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…
Animer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…
Mettre en place un panneau…
Dans ce tuto Jquery gratuit en vidéo, nous allons voir ensemble…
Mettre un background vidéo…
Dans ce tuto Jquery en vidéo, nous allons voir comment ajouter…
Créer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…
Créer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…
Créer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…
Ajouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7, Wordpress 3.3 de 53 minutes est proposée dans une résolution plus grande que l’extrait suivant :
spykrew07
, Formateur
Salut, moi c’est Adrien, j’ai 27 ans et je suis Graphiste / Webdesigner depuis 5 ans maintenant. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 3 ans et depuis peu je me suis lancé en freelance. Je souhaite partager mes connaissances avec vous membres de tuto.com et j’essaierai d’être le plus didactique possible dans mes tutoriaux. Ma devise : Webdesign is not a job, it’s a passion !
En savoir plus sur spykrew07
Témoignage des clients de spykrew07
![]()
Je viens d'acheter plusieurs de ses tutos et je trouve que Spykrew07 est un excellent formateur. je recommande ses formations!
![]()
Des tuto sympa mais parfois un peu chers.
![]()
Très bon formateur, j'ai acheté beaucoup de ses tuto, le timbre de voix passe bien en continu, et bon ritme d'apprentissage. Je recommande.
![]()
Les tutos wordpress de ce formateur sont tout simplement INDISPENSABLES
![]()
je n'ai pas encore terminé les tutos, mais pour une bille comme moi, je comprends tout. Un grand merci
Lire les autres témoignages
D'autres tuto de spykrew07
Revisiter le logo de Twitter façon Origami
Dans ce tuto Illustrator en vidéo, nous allons revisiter le logo de Twitter, le célèbre…
Intégrer une image dans un texte
Dans ce tuto Photoshop en vidéo, nous allons voir comment intégrer une image dans un…
Créer une InfoBox scrollable
Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer une InfoBox pour…
Créer un menu accordéon et personnaliser un curseur
Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer un menu accordéon…
Notes attribuées par les utilisateurs (10 votes)
Les avis / Questions des utilisateurs (14)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto jQuery 1.7, Wordpress 3.3 d’une durée de 53 minutes a été acheté 168 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 15 décembre 2011 par spykrew07, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Animation.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.


















(a acheté ce tuto - 18 mars 2012)
" 5 "
(a acheté ce tuto - 22 février 2012)
" En deux mots => VRAIMENT EXCELLENT !!!
La pédagogie, la clarté, le prendre son temps pour montrer et expliquer, Le son, la pointe de design..
.. Gagne à être une référence incontournable, Merci beaucoup !! "
(a acheté ce tuto - 07 février 2012)
" Tuto super cool, net et précis, et en plus vraiment pas cher...
Tout pour plaire...
J'espère qu'il y en aura beaucoup d'autres sur WordPress!
Apprendre en te suivant pas a pas est un véritable plaisir.......
José "
(auteur de ce tuto - 06 février 2012)
" @tricepad Tu rajoutes simplement le code du slider qui récupère les derniers articles dans ton header.php si tu veux le placer sur toutes tes pages. L'appel à jQuery et le fichier .js tu peux les mettre avant ta balise body dans le footer.php. Dis-moi si tu t'en sors avec ça... ;) "
(a acheté ce tuto - 06 février 2012)
" Comment intégrer le slider à un thème wordpress existant comme twenty ten ?
Merci pour ta réponse
Tricepad "
(a acheté ce tuto - 06 février 2012)
" Très bon tuto, clair et très instructif. Vous pouvez l'acheter les yeux fermés ainsi que tous les autres du même auteur ! "
(a acheté ce tuto - 02 février 2012)
" J'ai pris beaucoup de plaissir a regarder ce tuto, je le recommande vraiemant, note 5 étoiles "
(a acheté ce tuto - 17 janvier 2012)
" Toujours aussi agréable à suivre!
Très bon pédagogue et tuto vraiment enrichissant!
La partie Jquery est pro et même si on ne bosse pas sur WordPress (je travaille avec Joomla).
En espérant qu'il y en aura d'autres (jquery, php?, et CMS)
Encore bravo! "
(a acheté ce tuto - 31 décembre 2011)
" Créer un thème wordpress...Voilà un moment que j'essaye de m'y mettre sans succès! J'attends avec impatience ton tuto! "
(a acheté ce tuto - 26 décembre 2011)
" super tuto. merci "
(auteur de ce tuto - 24 décembre 2011)
" @Mousse31770 Merci pour ton com ;) D'autres tutos Wordpress vont arriver prochainement comme créer un thème complet... "
(a acheté ce tuto - 23 décembre 2011)
" Très bon tuto, notamment la partie Wordpress qui m'a beaucoup aidée! "
(a acheté ce tuto - 17 décembre 2011)
" Tuto super clair et bien expliqué. La partie worpress est très utile! "
(a acheté ce tuto - 15 décembre 2011)
" Tuto clair & concis, merci beaucoup ! "