Ajouter des boutons next et previous à mon slider

Bonjour à toutes et à tous.

J'ai créé un slider tout simple de cinq images à partir d'un tuto que j'ai pris sur YOU TUBE ("création d'un diaporama en Html et Css"). Il fonctionne automatiquement grâce à la propriété "infinite" de keyframes en css. Mon problème est le suivant:je voudrais y ajouter trois(3) boutons: un pour le "previous", un autre pour le "next" et un troisième pour la pause/play. J'ai créé deux formes triangle en CSS à partir d'informations prises sur le site "www.lucaswillems.com" que je voudrais utiliser dans cet objectif. Il n'y a pas très longtemps que je me suis mis au HTML et au CSS et j'avoue que je galère un peu parfois même beaucoup.
Quelqu'un peut-il m'aider à résoudre ce problème ? Je vous remercie d'avance pour toute l'aide que vous voudrez bien m'apporter.
Patmalonda

Bonjour,

Pour réaliser ce que tu veux il faut passer par javascript.

Bonjour,
D'accord avec Integrator. Si tu apprend HTML, apprend aussi Javascript, surtout si tu veux faire des personnalisations.

Bonjour,

Integrator a écrit :
Bonjour,

Pour réaliser ce que tu veux il faut passer par javascript.

Je ne suis pas tout à fait d'accord. C'est tout à fait réalisable... enfin... pas avec un bouton suivant/précédent mais avec des puces - chacune étant reliée à une des images du slider.

La technique consiste à user du sélecteur sibling (~).

Je m'étais appuyé sur un tutoriel du HollandaisVolant mais plus moyen de retrouver le lien.

Probablement qu'une recherche avec les mots clés "slider css3" retournera un résultat probant.

Bonjour Bongota

Ce script html/css, c'est exactement ce que je cherchais. Un super merci. Merci aussi à tous les autres pour votre aide.
Chers amis, comme je vous l'ai expliqué dans mon dernier post, je débute en html/css. Je suis donc un peu lent à comprendre les choses. Pourriez-vous, s'il-vous-plait me commenter les deux codes parce que je ne comprends pas tout. Par exemple dans le code htlm, je comprends bien que item1, item2 item3 sont les noms des images qui défilent dans le slider mais je ne comprends pas pourquoi la class est nommé item item 1 ou item item2 light . Dans le code css j'ai vu les caractères "[ ]" et "~". dans les cours que je suis sur le web, on n'en parle pas. Je sais que je te demande un gros effort mais vraiment, peux tu m'aider ? Merci d'avance.
Mon cher Greg-lumière, tus parlé de faire faire défiler les images via des puces. Peux tu m'en dire plus ? Encore une fois merci à tous(tes) pour votre aide.

Bonjour,

j'ai enfin retrouvé le lien pour le second slider dont j'avais parlé :
http://www.outils-web.com/page-script-html-css.asp
et c'est le lien : "Diaporama avec effet Parallaxe".
Je l'ai testé aussi et il fonctionne sans problèmes. Tu auras juste à éditer les @media, tout en bas du css. Je te donne ceux que j'avais modifiés pour expérimenter ce slider sur mon site. A toi de les adapter à tes besoins.

@media screen and (max-width: 1920px){
	.sp-slideshow { height: auto; }
}
@media screen and (max-width: 1024px){
	.sp-slideshow { height: auto; }
}
@media screen and (max-width: 767px){
	.sp-slideshow { height: auto; }
}
@media screen and (max-width: 320px){
	.sp-slideshow { height: auto; }
}

Il faut bien sûr deziper le fichier proposé.
Bon courage, les sliders responsive sont rares en pur css.