Comment faire un slider d'images avec JQuery
Résolu/Fermé
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
-
Modifié par lutchi-lutcho le 8/01/2014 à 10:32
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 janv. 2014 à 17:49
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 janv. 2014 à 17:49
A voir également:
- Comment faire un slider d'images avec JQuery
- Images gratuites - Guide
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? - Forum Photoshop
- Google images - Guide
- Superposez les images à télécharger avec le logiciel de votre choix. quel animal apparaît ? ✓ - Forum Photo numérique
- Comment agrandir une image - Guide
3 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 8/01/2014 à 14:39
Modifié par animostab le 8/01/2014 à 14:39
Si tu veux utiliser unslider c'est simple
tu télécharge unslider.min.js et tu le met dans un dossier que tu nomme js (le dossier est à la racine de ton site)
dans la section <head> de ton site tu mets
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/unslider.min.js"></script>
<link href="styles/slider.css" type="text/css" rel="style">
<script>$(function() {
$('.banner').unslider();
}); </script>
tu crée a la racine de ton site un dossier nommé style
avec le blocnote tu crée un fichier dans lequel tu colle ce code
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
tu nomme ce fichier slider.css et tu le mets dans le dossier styles
tes images tu les mets dans un dossier nommé images et tu les nomme image1.jpg image2.jpg etc ....
ensuite la ou tu veux ton slider dans le <body>
<div class="banner">
<ul>
<li><img src="images/image1.jpg></li>
<li><img src="images/image2.jpg></li>
<li><img src="images/image3.jpg></li>
</ul>
</div>
pour les options la ou il y a $('.banner').unslider dans le <head> tu peux mettre ca et changer les options en gras
$('.banner').unslider({
speed: 500, // vitesse d'animation du slide (in milliseconds)
delay: 3000, // délai entre chaque anim (in milliseconds)
complete: function() {}, // fonction mais pas touche si tu ne sais pas faire
keys: true, // nav clavier (false si t'en veux pas)
dots: true, // lien navigation (false si t'en veux pas)
fluid: false // responsive désign true si ton site est responsive
});
voila ca devrait marcher
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
tu télécharge unslider.min.js et tu le met dans un dossier que tu nomme js (le dossier est à la racine de ton site)
dans la section <head> de ton site tu mets
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/unslider.min.js"></script>
<link href="styles/slider.css" type="text/css" rel="style">
<script>$(function() {
$('.banner').unslider();
}); </script>
tu crée a la racine de ton site un dossier nommé style
avec le blocnote tu crée un fichier dans lequel tu colle ce code
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
tu nomme ce fichier slider.css et tu le mets dans le dossier styles
tes images tu les mets dans un dossier nommé images et tu les nomme image1.jpg image2.jpg etc ....
ensuite la ou tu veux ton slider dans le <body>
<div class="banner">
<ul>
<li><img src="images/image1.jpg></li>
<li><img src="images/image2.jpg></li>
<li><img src="images/image3.jpg></li>
</ul>
</div>
pour les options la ou il y a $('.banner').unslider dans le <head> tu peux mettre ca et changer les options en gras
$('.banner').unslider({
speed: 500, // vitesse d'animation du slide (in milliseconds)
delay: 3000, // délai entre chaque anim (in milliseconds)
complete: function() {}, // fonction mais pas touche si tu ne sais pas faire
keys: true, // nav clavier (false si t'en veux pas)
dots: true, // lien navigation (false si t'en veux pas)
fluid: false // responsive désign true si ton site est responsive
});
voila ca devrait marcher
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
8 janv. 2014 à 16:09
8 janv. 2014 à 16:09
Super je vais essayer ça de suite ! :D
Je remercie pour toutes ces infos !
Je remercie pour toutes ces infos !
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
8 janv. 2014 à 16:39
8 janv. 2014 à 16:39
J'ai rencontré des petits problèmes :S !
Tout sabord j'ai buté à un moment en recopiant un de tes codes, il manquait la fermeture des guillemets pour charger les images. Rien de grave, je m'en suis aperçu, j'ai modifié. Jusque là ça va.
Mais ensuite le slider ne charge pas les photos entières, il ouvre seulement une toute petite partie. Pourtant dans mon éditeur Dreamweaver il affiche les 3 images en grand. (les unes en dessous des autres).
Veux tu une capture d'écran pour que cela t'aide à comprendre d'où ça peut venir ?
Tout sabord j'ai buté à un moment en recopiant un de tes codes, il manquait la fermeture des guillemets pour charger les images. Rien de grave, je m'en suis aperçu, j'ai modifié. Jusque là ça va.
Mais ensuite le slider ne charge pas les photos entières, il ouvre seulement une toute petite partie. Pourtant dans mon éditeur Dreamweaver il affiche les 3 images en grand. (les unes en dessous des autres).
Veux tu une capture d'écran pour que cela t'aide à comprendre d'où ça peut venir ?
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
8 janv. 2014 à 20:51
8 janv. 2014 à 20:51
Est ce que le fait que ma page est une page en php change quelques chose ?
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
8 janv. 2014 à 21:41
8 janv. 2014 à 21:41
Mince escuse pour les guillemets / non php ne pose pas de problème une copie d'ecran ne va pas me servir
pour info je n'ai fais que traduire la page de unslider
peux tu mettre la page en ligne et donner l'url que je vois ce qui cloche ?
pour info je n'ai fais que traduire la page de unslider
peux tu mettre la page en ligne et donner l'url que je vois ce qui cloche ?
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
8 janv. 2014 à 23:23
8 janv. 2014 à 23:23
Comment je peux faire pour mettre la page en ligne provisoirement ?
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
8 janv. 2014 à 23:38
8 janv. 2014 à 23:38
Sur la page de unslider il y avait 2 documents à télécharger en bas. J'ai juste téléchargé le document de gauche (Download minifed) que j'ai mis dans mon dossier JS, c'est bon c'est bien ça ?
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 9/01/2014 à 03:58
Modifié par animostab le 9/01/2014 à 03:58
normalement oui en tout cas c'est ce qui est expliqué dans la page mais tu peux essayer avec l'autre ou les 2 (avec la meme technique dossier js et ligne de code dans le head) mais je ne pense pas que ce soit ca. le slider fonctionne t il meme avec les images tronquées ? Ce serait plus simple avec la page en ligne ...
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
9 janv. 2014 à 11:25
9 janv. 2014 à 11:25
Oui le slider fonctionne, mais j'ai l'impression que c'est seulement des petits bouts d'une seule image qui défilent.
Comment je peux mettre ma page en ligne ? Je travail avec un serveur MAMP en Local.
Comment je peux mettre ma page en ligne ? Je travail avec un serveur MAMP en Local.