Connexion
Inscription

WILD

ROAR

Rejoindre une équipe ?Croquons-nous !Écrasons-nous !Trompetons-nous !
AccueilAccueil  RechercherRechercher  
Rechercher
Résultats par :
Recherche avancée Recherche avancée
S'enregistrerS'enregistrer  ConnexionConnexion  
Marquer tout comme luAfficher le forum Nouveaux messagesSes messages

  • Wild Roar
    •  :: Codage :: Tutoriels
  • [★★★★☆][TUTO] Un slider dans votre P.A.
    • Aller à la page : 1, 2  Suivant
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan



Informations



  • Version : Toutes

  • Auteur du code : Allan.

  • Auteur du tutoriel : Allan.

  • Ressources : Le plugin !

  • Rendu : Ex de Pingouin avec auto change + flèches + Des exemples de rendus !

  • Pré-requis :

    • L'envie d'apprendre

    • Une bonne dose de courage

    • Un tuteur du tonerre

    • Ne pas hésiter à poser des question dans la partie adéquate !





Bonjour/bonsoir tout le monde ! Sur un sujet, on a demandé comment réalisé simplement un slider pour l'ajouter à sa P.A. C'est donc dans l'optique d'expliquer pas à pas cette intégration que je réalise ce tutoriel. Sachez avant tout qu'il vous faut un minimum de connaissances en HTML/CSS et jQuery pour vous approprier intégralement cette technique.

Il existe de nombreux plugin jQuery pour réaliser un slider. Je vous propose de découvrir ensemble ResponsiveSlides.js, un plugin assez simple à utiliser, à paramétrer et à personnaliser.

(Un petit merci et je vous jure que vous ne le regretterez pas !)



Merci et à très bientôt !




M.A.J. 03/03/2015 : Nouvelle présentation visuelle
M.A.J. 15/03/2015 : Ajout de l'exemple de Pingouin 27/05/14, 08:42 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Un slider dans votre P.A. BUlJYbt
Merci Eurydice pour ce superbe vava !
Nee
14/04/2014Date d'inscription  : 103Âge  : 822Messages  :
Nee
Tiens, j'ai bien envie de voir comment tu as rédigé ça toi ♥ 27/05/14, 09:04 pm


[★★★★☆][TUTO] Un slider dans votre P.A. Qx2gd5
Min Sia
01/04/2014Date d'inscription  : 30Âge  : 1392Messages  : BelgiqueLocalisation  :
Min Sia
+1, curieuse =3 27/05/14, 09:26 pm


[★★★★☆][TUTO] Un slider dans votre P.A. 1439838629-minsiafria
ava ©️Aisling & sign ©️Azumii.
Maître Corbeau
29/03/2014Date d'inscription  : 19Âge  : 259Messages  : StrasbourgLocalisation  :
Maître Corbeau
Je veux voir ça :3

Merci pour le partage ^^ 28/05/14, 10:05 am


DÎTES NON AUX LAMAS POUR LA SAUVEGARDE DE L’HUMANITÉ
avatar de la morkitu fait par pwaar, oui ça dates mais et alors ? vive la nostalgie !
[★★★★☆][TUTO] Un slider dans votre P.A. 1402087664-ephelantsanew-rose [★★★★☆][TUTO] Un slider dans votre P.A. 700555phlant1
Oseras-tu m'ouvrir ?... :
 
[★★★★☆][TUTO] Un slider dans votre P.A. 3233504081_1_10_vudHUwzJ
Whitemoon
29/03/2014Date d'inscription  : 19Âge  : 201Messages  :
Whitemoon
MERCIIII
Depuis le temps que je cherche 28/05/14, 05:44 pm


[★★★★☆][TUTO] Un slider dans votre P.A. Kit_si10
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
De rien :D J'espère que ça pourra aider. Si jamais il y a quelque chose qui n'est pas compréhensible, prévenez moi ~ 28/05/14, 09:13 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Un slider dans votre P.A. BUlJYbt
Merci Eurydice pour ce superbe vava !
Whitemoon
29/03/2014Date d'inscription  : 19Âge  : 201Messages  :
Whitemoon
Hmm... J'ai pas encore vraiment testé, mais comment tu fais si tu veux combiner slideshow automatique et avec des flèches ? 29/05/14, 05:01 pm


[★★★★☆][TUTO] Un slider dans votre P.A. Kit_si10
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
Dans l'exemple que j'ai donné, j'ai mis auto en false et nav en true.
auto en false a indiqué que je ne désirais pas que le slideshow soit automatique.
nav en true a indiqué que je désirais avoir les boutons pour le précédent et suivant

En mettant auto en true et nav en true, tu as les boutons et l'automatisme.
Ensuite, tu n'as plus qu'à modifier le style des boutons précédent et suivant pour avoir tes flèches :D 29/05/14, 05:07 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Un slider dans votre P.A. BUlJYbt
Merci Eurydice pour ce superbe vava !
Rodrakaset
14/02/2014Date d'inscription  : 99Âge  : 154Messages  :
Rodrakaset
Hey, bien envie de voir ça <3 29/05/14, 09:10 pm


Signature qui tue la mort par Mim et avatar des patates par Eurydice, parce qu'elles le valent bien. Merci milles fois ♥️
[★★★★☆][TUTO] Un slider dans votre P.A. 1393874055-sotw3
Spoiler:
 
[★★★★☆][TUTO] Un slider dans votre P.A. Rodra11_imagesia-com_hona_large


 
Whitemoon
29/03/2014Date d'inscription  : 19Âge  : 201Messages  :
Whitemoon
D'ac, merci beaucoup =) et les contrôleurs en fait, c'est le sélecteur au milieu c'est ça ? 30/05/14, 08:32 am


[★★★★☆][TUTO] Un slider dans votre P.A. Kit_si10
Vayl
14/03/2014Date d'inscription  : 20Âge  : 463Messages  : IDFLocalisation  :
Vayl
Merci pour ce tutoriel Allan x) 30/05/14, 09:25 am


« Tout ce que j'ai fait de bien a toujours été pour moi une source de malédictions, et je n'ai été élevé au comble de la grandeur que pour tomber dans le plus horrible précipice de l'infortune. »
Shae
24/04/2014Date d'inscription  : 21Âge  : 153Messages  : BelgiqueLocalisation  :
Shae
Mici du partage ♥ 08/06/14, 07:34 pm


[★★★★☆][TUTO] Un slider dans votre P.A. 1404950371-shaesign11
av by redsheep. --- signa by azumii, thx !
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
@Whitemoon: Désolé du retard, je n'avais pas vu ton post. Les contrôleurs sont tout ce qui s'apparente à un bouton et qui permettent de régler une action sur le slideshow. Ce sont donc autant les boutons précédent et suivant que le numéro de la slide.

Vous souhaitez que je continue ce tutoriel en ajoutant les différentes options et en donnant des exemples concrets de ce qui peut être fait avec ? 08/06/14, 08:34 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Un slider dans votre P.A. BUlJYbt
Merci Eurydice pour ce superbe vava !
Windae
29/03/2014Date d'inscription  : 25Âge  : 67Messages  :
Windae
Ca m'intéresse tiens :3 Merci du partage :D 09/06/14, 07:38 am


Merci à Lüly pour ce joli avatar *-*
[★★★★☆][TUTO] Un slider dans votre P.A. 1393693572-mini-ephel-devil
Ukrysis
17/02/2014Date d'inscription  : 23Âge  : 140Messages  :
Ukrysis
Merci pour ce tuto que je vais pouvoir mettre en plus. :c *fait son p'tit marché des tutos* 20/06/14, 03:48 pm


[★★★★☆][TUTO] Un slider dans votre P.A. 1403283289-ukr1-imagesia-com-hoor
Magnifique signature par Azumii et avatar par Wawa ! Miciiiiiiiii !  pink bouncing  
Blason qui déboîte sa mère:
 
[★★★★☆][TUTO] Un slider dans votre P.A. 1403289759-678663jemappelledilecrocrodile
Scar
12/08/2014Date d'inscription  : 19Âge  : 11Messages  :
Scar
Merci du partage 13/08/14, 12:30 pm
Daniel shepard
17/08/2014Date d'inscription  : 26Âge  : 92Messages  :
Daniel shepard
merci :P 26/08/14, 09:10 pm


[★★★★☆][TUTO] Un slider dans votre P.A. Sparro10

[★★★★☆][TUTO] Un slider dans votre P.A. 678663Jemappelledilecrocrodile
Nightwing
13/02/2014Date d'inscription  : 26Âge  : 641Messages  : ToulouseLocalisation  :
Nightwing
Merci pour ce tuto très bien expliqué (: 27/08/14, 12:02 pm


Prout, prout, fait le Popotame ♥️
Anciennement Capitaine Line :3
Alondite
04/10/2014Date d'inscription  : 28Âge  : 10Messages  :
Alondite
Merci pour ce tutoriel, c'est exactement ce qu'il me faut, j'espère pouvoir y arriver ! 04/10/14, 02:45 pm
DRUNK PANCAKE
14/02/2014Date d'inscription  : 19Âge  : 10Messages  : bordeauxLocalisation  :
DRUNK PANCAKE
merci pour ce tuto <333 26/10/14, 04:38 pm
Euphemia
19/02/2014Date d'inscription  : 23Âge  : 67Messages  :
Euphemia
merci pour le tuto ! 05/12/14, 08:36 am
Meeweena
08/12/2014Date d'inscription  : 25Âge  : 5Messages  :
Meeweena
J'ai l'droit ? MERCI *^* 08/12/14, 10:55 am
Durgrim l'ancien
23/12/2014Date d'inscription  : 35Âge  : 3Messages  : Reignier (74)Localisation  :
Durgrim l'ancien
Merci beaucoup ! 23/12/14, 09:48 am


"Un peuple qui oublie son passé se condamne à le revivre." W. Churchill
Nemalus
31/07/2014Date d'inscription  : 21Âge  : 32Messages  :
Nemalus
Merci bien ♥ 24/12/14, 09:58 am


[★★★★☆][TUTO] Un slider dans votre P.A. 887646nemalus
Merci Pwaar ♥️
Grande
14/02/2014Date d'inscription  : 31Âge  : 46Messages  :
Grande
Curieuseee & Merci -- 25/12/14, 11:28 pm


[★★★★☆][TUTO] Un slider dans votre P.A. 70681410 [★★★★☆][TUTO] Un slider dans votre P.A. 1393791200-mini-ephel-love
Pingouin
18/02/2014Date d'inscription  : 25Âge  : 214Messages  : QuébecLocalisation  :
Pingouin
han merci ! *p*
je cherchais depuis deux jours ;w; 18/02/15, 08:53 pm


Pingouin
18/02/2014Date d'inscription  : 25Âge  : 214Messages  : QuébecLocalisation  :
Pingouin
sorry du double post, mais je voulais vraiment qu'une gentille personne voit et puisse m'aider huhu

donc, comme j'avais demandé sur la chatbox il y a quelques jours, je voulais ajouter des flèches de chaque côté du slider. avec le code ajouté par la cb, ça ne fonctionne pas D: ça a même fait arrêter carrément le slider automatique. donc du coup, help ? ;w; 22/02/15, 05:26 pm


Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
Je te propose de poster dans la partie Entraides, on verra ça là bas :D (désolé, je n'ai pas été très disponible ces temps-ci, je passais sur le portable) 22/02/15, 05:54 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Un slider dans votre P.A. BUlJYbt
Merci Eurydice pour ce superbe vava !
Feather
17/02/2015Date d'inscription  : 21Âge  : 226Messages  : Dans la neige èéLocalisation  :
Feather
Youpi! Merci :D 28/02/15, 06:56 pm


[★★★★☆][TUTO] Un slider dans votre P.A. 1402087664-ephelantsanew-rose[★★★★☆][TUTO] Un slider dans votre P.A. 1393791200-mini-ephel-paillettes
Merci à Pluriel pour l'avatar ♥
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
J'ai ajouté l'exemple de pingouin dans les bonus :D Si vous en voyez d'autres qui pourraient être intéressants, n'hésitez pas ! 15/03/15, 01:54 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Un slider dans votre P.A. BUlJYbt
Merci Eurydice pour ce superbe vava !
Euphemia
19/02/2014Date d'inscription  : 23Âge  : 67Messages  :
Euphemia
merci ! 19/03/15, 11:30 am
Aly SV
25/03/2015Date d'inscription  : 28Âge  : 28Messages  : PicardieLocalisation  :
Aly SV
Tant pis si je me précipite, mais je cherche un tuto du genre depuis trop longtemps T.T
Merci !!!

Un edit pour te tirer mon chapeau pour la clarté et l'efficacité de ton tuto. Ca fait trois jours que je cherche désespérément à installer un slide sur ma PA.
Je me suis battu avec 5 ou 6 tuto et en 30 minutes, le tiens est en place. Pour le coup, c'est un vrai et grand MERCI !!! 25/03/15, 05:37 pm
One.
14/05/2015Date d'inscription  : 21Âge  : 47Messages  :
One.
merci ! *-* 23/05/15, 08:44 am


[★★★★☆][TUTO] Un slider dans votre P.A. 1393791200-mini-ephel-hipster
myrtille
16/06/2015Date d'inscription  : 27Âge  : 4Messages  :
myrtille
ça m'a l'air vachement beau! merci :) 16/06/15, 02:22 am
frozen heart
29/06/2015Date d'inscription  : 25Âge  : 8Messages  :
frozen heart
Merci de ce tutoriel ! *_* 29/06/15, 12:54 pm
Kusmi
15/07/2015Date d'inscription  : 23Âge  : 3Messages  :
Kusmi
Merciii ** Depuis le temps que je cherche ça ! 16/07/15, 12:04 am
Narcysse
05/07/2015Date d'inscription  : 25Âge  : 1137Messages  : Aix-En-ProvenceLocalisation  :
Narcysse
Pouet, je veux voir ça e-e 19/07/15, 12:42 pm


[★★★★☆][TUTO] Un slider dans votre P.A. 174755CUTEDIILE  &    [★★★★☆][TUTO] Un slider dans votre P.A. 862425croc


Mes blasons ♥:
 


Paindore
30/07/2015Date d'inscription  : 59Âge  : 4Messages  :
Paindore
C'est génial, merci/// 31/07/15, 09:45 am
joxtop
17/08/2015Date d'inscription  : 27Âge  : 3Messages  :
joxtop
Depuis le temps que j'en cherche un comme ça *o* Merci ! 18/08/15, 01:02 am
Tamago
23/08/2015Date d'inscription  : 23Âge  : 8Messages  :
Tamago
Encore un super merci à toi ! 23/08/15, 09:09 am
Sakura
14/02/2014Date d'inscription  : 26Âge  : 21Messages  :
Sakura
marchi 'o' 29/08/15, 02:08 pm



Merci K7, mon amouuur pour mon vava <3
[★★★★☆][TUTO] Un slider dans votre P.A. 1392763057-wrswot1
Merci à Pingouin pour cette jolie signature <3

[★★★★☆][TUTO] Un slider dans votre P.A. Blason10
felian
22/09/2015Date d'inscription  : 28Âge  : 5Messages  :
felian
Merci beaucoup. J'espère pouvoir y trouver mon compte :) 22/09/15, 10:29 pm
Clay
28/04/2014Date d'inscription  : 19Âge  : 23Messages  : Dans le village de la région du pays de la contrée.Localisation  :
Clay
Merci. :3 27/09/15, 11:12 am


Nalex
03/10/2015Date d'inscription  : 30Âge  : 6Messages  :
Nalex
Parce que je cherche un sujet comme ça depuis des plombs.
Merci! 03/10/15, 04:27 pm
LeeBlue
02/10/2015Date d'inscription  : 22Âge  : 10Messages  :
LeeBlue
OLALALALALALALA *O*
ça fait mille ans que je cherche ça ! MERCI !  glomp
*maintenant vais essayer de comprendre comment ça fonctiooonne...*

PS : ça marche ! Mais au lieu de flèche j'ai les liens previous et lext juste en dessous de mon image, comment fait-on pour avoir les flèches de navigation ? 04/10/15, 01:04 pm
Allan
17/04/2014Date d'inscription  : 28Âge  : 1275Messages  :
Allan
Pour obtenir les flèches à la place, il suffit de regarder le code donné en exemple (sous spoiler)

Le tutoriel était assez simple à comprendre ? Content d'avoir aidé !

Si vous avez la moindre question ou remarque, n'hésitez pas ! 06/10/15, 11:26 pm


Lamperouge Lelouch: If the king doesn’t move, then his subjects won’t follow.
[★★★★☆][TUTO] Un slider dans votre P.A. BUlJYbt
Merci Eurydice pour ce superbe vava !
Umbre
10/10/2015Date d'inscription  : 30Âge  : 4Messages  :
Umbre
Je le cherche depuis tellement longtemps *-*

Merciiiiiiiiiiiiiii 10/10/15, 09:46 am
Azuriel
14/02/2014Date d'inscription  : 22Âge  : 12Messages  :
Azuriel
Merci ! ♥ 04/11/15, 03:18 pm
Crazy-Sweet
22/12/2015Date d'inscription  : 28Âge  : 5Messages  :
Crazy-Sweet
Je suis curieuse <3 Merci ! 22/12/15, 12:01 pm
madison campbell
24/01/2016Date d'inscription  : 25Âge  : 4Messages  :
madison campbell
Merci :D 24/01/16, 08:09 pm
Contenu sponsorisé
  • Wild Roar
    •  :: Codage :: Tutoriels
  • [★★★★☆][TUTO] Un slider dans votre P.A.
    • Aller à la page : 1, 2  Suivant
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit

Connexion

Pas encore inscrit ?

Vous pouvez vous inscrire et rejoindre Wild Roar en cliquant juste ici !

Mot de passe perdu ?

Pas de soucis, il est possible d'en demander un nouveau à cet endroit.