Bonjour à tous, 

J'aimerai créer un carrousel d'images avec des boutons permettant de changer d'images (à gauche et à droite). J'ai déjà créé le carrousel mais je ne sais pas comment m'y prendre pour insérer des boutons de contrôles et lier mes images à ceux-ci. 

Merci de vos réponses.

les bouton ne sont pas lié aux images mais au carrousel lui même normalement, en ensuit pour les boutons tu les places ou tu veux avec une position relative suite a quoi tu leurs joint une fonction qui change la source de l'image et HOP .

Comme ceci par exemple :

<style type="text/css">
	#caroussel
	{
		display: inline-block;
		width: 100px;
		height:60px;
		background-size: 100px 60px;
		background-image: url("https://1.bp.blogspot.com/-nxyQEfV7c8c/T2m-jtxVdEI/AAAAAAAAcYg/1kfbV9nuHwE/s1600/Lente-achtergronden-hd-lente-wallpapers-voorjaar-wallpaper-03.jpg");

	}
	.button
	{
		background: rgba(0,0,0,0.4);
		color:rgba(255,255,255,0.75);
		text-decoration: none;
	}
	.button:hover
	{
		background-color: rgba( 0, 0, 0, 0.45 );
		color: rgba( 255, 255, 255, 1 );
	}
	.divButton
	{
		margin-top: 15px;
		position: relative;
		font-size: 30px;
		width:50%;
		display:inline-block;
	}
</style>
<div id="caroussel">
	<div class="divButton" style="text-align: left;">
		<a href="#" class="button" style="border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;" onclick="changeBack(-1);">
			&gt;
		</a>
	</div><div class="divButton" style="text-align: right;">
		<a href="#" class="button" style="border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;" onclick="changeBack(+1);">
			&lt;
		</a>
	</div>
</div>
<script type="text/javascript">
	var i = 0;
	var backArray = [
		"https://1.bp.blogspot.com/-nxyQEfV7c8c/T2m-jtxVdEI/AAAAAAAAcYg/1kfbV9nuHwE/s1600/Lente-achtergronden-hd-lente-wallpapers-voorjaar-wallpaper-03.jpg",
		"https://cdn.wallpapersafari.com/19/34/X2xwEO.jpg",
		"http://getwallpapers.com/wallpaper/full/b/8/d/538853.jpg"
	];
	function changeBack ( num )
	{
		i = ( i + num ) % backArray.length;
		document.getElementById( "caroussel" ).style.backgroundImage = "url(" + backArray[ i ] + ")";
	}
</script>

 EDIT : pour ceux qui diraient que le chargement des images est pas génial, c'est juste pour l'exemple ^^.

-
Edité par ox223252 12 octobre 2018 à 10:37:39