Comment faire un slider d'images avec JQuery
Résolu
lutchi-lutcho
Messages postés
23
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous
Ce poste existe peut-être déjà, donc si c'est le cas, est-ce que quelqu'un aurait la gentillesse de m'orienter vers celui-ci :)
Sinon mon problème est que j'aimerais insérer un bandeau où des images défileraient automatiquement, avec les boutons précédents et suivants.
J'ai les bases en HTML et CSS et j'ai lu des topics sur le JQuery. J'ai donc téléchargé le plugin "Awkward Showcase" qui me paraissait pas mal : https://id.atlassian.com/login?application=bitbucket&continue=https%3A%2F%2Fbitbucket.org%2Faccount%2Fsignin%2F%3FredirectCount%3D1%26next%3D%252Fawkwardgroup%252Fawkward-showcase%252Fwiki%252FHome
Maintenant je bloque un peu. Je sais que je dois faire charger les documents .css et tout dans le head, mais j'aurais besoin de petits coups de pouces pour bien tout m'expliquer.
(Les options qu'il y a par exemple)
J'aimerais au final arriver à un résultat comme ici si possible : https://unslider.com/ (J'ai essayé aussi la méthode de ce site mais je n'y arrive pas)
Merci à tous pour vos réponses !
Ce poste existe peut-être déjà, donc si c'est le cas, est-ce que quelqu'un aurait la gentillesse de m'orienter vers celui-ci :)
Sinon mon problème est que j'aimerais insérer un bandeau où des images défileraient automatiquement, avec les boutons précédents et suivants.
J'ai les bases en HTML et CSS et j'ai lu des topics sur le JQuery. J'ai donc téléchargé le plugin "Awkward Showcase" qui me paraissait pas mal : https://id.atlassian.com/login?application=bitbucket&continue=https%3A%2F%2Fbitbucket.org%2Faccount%2Fsignin%2F%3FredirectCount%3D1%26next%3D%252Fawkwardgroup%252Fawkward-showcase%252Fwiki%252FHome
Maintenant je bloque un peu. Je sais que je dois faire charger les documents .css et tout dans le head, mais j'aurais besoin de petits coups de pouces pour bien tout m'expliquer.
(Les options qu'il y a par exemple)
J'aimerais au final arriver à un résultat comme ici si possible : https://unslider.com/ (J'ai essayé aussi la méthode de ce site mais je n'y arrive pas)
Merci à tous pour vos réponses !
A voir également:
- Comment faire un slider d'images avec JQuery
- Des images - Guide
- Extraire les images d'un pdf - Guide
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? - Télécharger - Photo & Graphisme
- Comment faire une recherche par image - Guide
- Wow slider - Télécharger - Présentation
3 réponses
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.
Super je vais essayer ça de suite ! :D
Je remercie pour toutes ces infos !
Je remercie pour toutes ces infos !
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 ?
Est ce que le fait que ma page est une page en php change quelques chose ?
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 ...