Slider en CSS [Fermé]

Signaler
Messages postés
2
Date d'inscription
samedi 5 octobre 2013
Statut
Membre
Dernière intervention
6 octobre 2013
-
Messages postés
2
Date d'inscription
samedi 5 octobre 2013
Statut
Membre
Dernière intervention
6 octobre 2013
-
Bonjours tout le monde,
Voila dans ma formation je dois faire un site avec un slider.
Vu que je maîtrise que le HTML, CSS, et un petit peu le PHP, j'ai cherché des sites de tuto pour faire un slider uniquement en HTML et CSS, j'ai trouvé celui-ci :
https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Bon j'ai suivit les indications et tout, j'ai modifier le code car j'ai 24 images qui défilent seulement ça ne marche pas..
J'aimerais bien que quelqu'un m'aide car j'ai pas compris comment faire défiler les images avec les boutons fléches sur le coté et avec les petits rond en bas...
Merci d'avance.

2 réponses

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
650
franchement ce genre de slider quand on a beaucoup d'image c'est pas le top parce que il faut a chaque fois un nouveau div (avec son css) pour chaque image fleche etc donc ca devient vite ingérable a partir de 10 images

utilise le javascript c'est plus simple

en voici un trop simple meme sans trop connaitre le javascript on comprend quand meme ce que fait le code

<DIV ID=ejs_photo_box></div>
<SCRIPT LANGUAGE=JavaScript>
ejs_photo = new Array;
ejs_photo[0] = 'images/v1.jpg';
ejs_photo[1] = 'images/v2.jpg';
ejs_photo[2] = 'images/v3.jpg';
ejs_photo[3] = 'images/v4.jpg';
ejs_photo[4] = 'images/v5.jpg';
ejs_photo[5] = 'images/v6.jpg';
ejs_photo[6] = 'images/v7.jpg';

function ejs_aff_photos(num)
{
if(document.getElementById)
{
ejs_fin = "";
if(num!=0)
ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num-1)+");return(false)'>< Précédent</A> ";
if(num!=(ejs_photo.length-1))
ejs_fin += "<A HREF=# onClick='ejs_aff_photos("+(num+1)+");return(false)'>Suivant ></A>";
document.getElementById("ejs_photo_box").innerHTML = "<CENTER><IMG SRC='"+ejs_photo[num]+"' BORDER=0><BR>"+ejs_fin+"</CENTER>";
}
}
window.onload = new Function("ejs_aff_photos(0)")
</script>

sinon tu as des pluging jquery qui sont hyper simple a mettre en place comme celui la (pause play fleches légendes boutons)

http://www.guillaumevoisin.fr/jquery/diaporama-simple-avec-jquery-nouvelle-version-jdiaporama

les fichiers sources sont en téléchargement, tu n'as rien a toucher dans le js il te faut juste jquery et le js du slider, un code html hyper simple et le css que tu peux arranger un peu pour customiser ton diaporama (coin arrondis sprite a changer etc)

Un petit merci vaut mieux qu'une grande ignorance
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
2
Date d'inscription
samedi 5 octobre 2013
Statut
Membre
Dernière intervention
6 octobre 2013

Bah je vais essayer avec du js ou du jquery mais comme je n'y connais absolument rien je voulais éviter mais je vais m'y mettre ^^
Merci beaucoup