Comment faire un slider d'images avec JQuery

[Résolu/Fermé]
Signaler
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
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 !

3 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
687
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.
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Super je vais essayer ça de suite ! :D

Je remercie pour toutes ces infos !
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

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 ?
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Est ce que le fait que ma page est une page en php change quelques chose ?
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
687
Bon voila ce que tu vas faire
le code donné ci dessous fonctionne
donc ce sera une page de test

tu crée une nouvelle page html
tu affiche en mode code uniquement
tu efface tout code pré ecrit par dreamweaver
tu colle le code ci dessous

<!DOCTYPE html>
<htlm version="1.0" encoding="utf-8">
<html>
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<style type="text/css">
.banner { position: relative; width:960px; height:360px; overflow: hidden;}
.banner ul { list-style: none; padding:0; margin:0; }
.banner ul li { float: left;}
.banner img { margin:0; padding:0; }
</style>

<script>
$(function() {
$('.banner').unslider();
});
</script>

</head>

<body>
<div class="banner">
<ul>
<li><img src="images/image1.jpg" width="960" height="360"></li>
<li><img src="images/image2.jpg" width="960" height="360"></li>
<li><img src="images/image3.jpg" width="960" height="360"></li>
</ul>
</div>

</body>
</html>


si ca ne marche pas c'est que le chemin des images non affichées est incorrect ou tes images non affichées sont enregistrées en jpg optimisé ou progressif et pas en jpg simple

si ca marche c'est que dans ta page d'origine il y a un truc genre css ou script en plus qui interfère avec le slider et la a toi de voir ce qui cloche par élimination progressive ou ajout progressif
ps le style a été modifié donc a recoller dans le css plus tard
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

OUAIIIIIIII ! ça marche ! SUPER :D

Est ce que tu sais comment on pourrait rajouter des boutons "previous" et "next" ?
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
687
pour faire ce que tu demande il y a ca mais j'ai pas trop compris comment faire ce qui est en gras donc repost en section javascript car javascript c'est pas ma tasse de thé

<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>

<!-- And the JavaScript -->
<script>
var unslider = $('.banner').unslider();

$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];

// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Ok. En tout cas je te remercie de ton aide pour avoir créé mon slider ! :)

Je mets le poste en "résolu"
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
687
ok @+