11548 sujets

JavaScript, DOM et API Web HTML5

Jquery slide produit

Bonjour,
Je n'ai pas trop de connaissance en javascript, mais je cherche à faire quelque chose d'assez précis.
Voila :

J'ai plusieurs produits sur une page qui doivent défiler avec des flèches (next and previous), quand je clique sur next ou previous, le produit doit changer, mais ce n'est pas tout, je veux aussi que ma div avec le texte de description qui se situe en dessous du produit change aussi. car chaque produit à une description.
J'ai cherché un peu des scripts fait avec jquery mais je ne trouve pas grand chose pour m'aider à faire cela. Je me trompe peu être dans les mots clés lors de ma recherche.
Pourriez vous m'aiguiller?
Merci par avance
Merci pour ces infos, mais cela ne correspondait pas vraiment à mes attentes.
Donc, j'ai trouvé un script qui m'a permis de faire défiler les produits avec les flèches, ca c cool, mais maintenant, je voudrais quand dessous défile en même temps la description des produits.
j'arrive pas à dissocier les deux , la div du produit et la div qui s'affiche en dessous.
voici mon script : 
var timer = new Object;

function slider(){
	nextSlide();
	timer = window.setTimeout(slider,5000);
}

function nextSlide(){
	var $Slides = $("#slides");
	$("#nextSlide").unbind("click",nextSlide);
	$Slides.animate(
		{marginLeft:"-=150px"},
		1000,
		function(){
				$Slides.data("currentSlide",$Slides.data("currentSlide")+1);
				if($Slides.data("currentSlide") > $Slides.data("nbSlides")){
					$Slides
						.data("currentSlide",1)
						.css({marginLeft:"-150px"});
				}
				window.clearTimeout(timer);
				timer = window.setTimeout(slider,5000);
				$("#nextSlide").bind("click",nextSlide);
			}
	);
}

function prevSlide(){
	var $Slides = $("#slides");
	$("#prevSlide").unbind("click",prevSlide);
	$Slides.animate(
		{marginLeft:"+=150px"},
		1000,
		function(){
				$Slides.data("currentSlide",$Slides.data("currentSlide")-1);
				if($Slides.data("currentSlide") == 0){
					$Slides
						.data("currentSlide",$Slides.data("nbSlides"))
						.css({marginLeft [decu]150*$Slides.data("currentSlide"))});
				}
				window.clearTimeout(timer);
				timer = window.setTimeout(slider,5000);
				$("#prevSlide").bind("click",prevSlide);
			}
	);
}


$(function(){
	var $Slides = $("#slides");
	var _step = $Slides.find("li:first").width();
	$Slides
		.data("currentSlide",1)
		.data("nbSlides",$Slides.find("li").size());
	$Slides
		.find("li:last")
			.clone()
			.prependTo("#slides");

	$Slides
		.find("li:first")
			.next()
			.clone()
			.appendTo("#slides");

	$Slides		
		.find("li:first")
			.addClass("clone")
		.end()
		.find("li:last")
			.addClass("clone")
		.end()
		.css({marginLeft:-_step});

	$Slides.width($Slides.find("li").size()*_step);
	
	$("#nextSlide").bind("click",nextSlide);
	$("#prevSlide").bind("click",prevSlide);
	
	timer = window.setTimeout(slider,5000);
	
})



et mon html 
<div class="content">
					 <div id="slider">
						<div id="prevSlide"><img src="img/arrow-prev.png" align="top" height="45px" width="22px" alt="précédent"/>
</div>
						
						<div id="slider-window">
						  <ul id="slides">
						   <li class="slide">
							<img src="img/produit1.png" alt="Crème pour les mains After Smoke" align="top" height="385px" width="129">
							<div class="slide-content">
								<h2>L'After Smoke</h2>
								 <p>Description de l'after Smoke .</p>
						   </div>
						 </li>
						 <li class="slide">
							<img src="img/produit2.png" alt="Crème pour les mains After Smoke" align="top" height="385px" width="129">
							<div class="slide-content">
								<h2>Produit 2</h2>
								 <p>Description du produit numéro 2</p>
						   </div>
						 </li>
						 </ul>
											  
					 </div>
					  <div id="nextSlide"><img src="img/arrow-next.png" align="bottom" height="45px" width="23px" alt="suivant"/></a></div>

				   </div>
						
					</div>


Merci pour votre aide
!
Sujet clos
Aller à