Slider en CSS
Elyon13
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Elyon13 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Elyon13 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Slider en CSS
- Wow slider - Télécharger - Présentation
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
2 réponses
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
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
