Slider avec boutons navigation et setInterval

Bonjour à tous

Je suis Designer produit et je souhaite faire un slider avec bouton de navigation et dot, afin de présenter sur mon site les différentes créations que j'ai réalisé jusque là.
Nouveau sur le site, j'ai épluché pendant de longues heures le site d'alsacréation avant de me décider à m'inscrire et poster sur ce forum, je préférais trouver la solution par moi même.
cependant là je bute complet! impossible d'avancer.
Voilà mon problème : réaliser un slider avec flèches précédent/ suivant, des dots de navigation pour savoir sur quelle image on se situe, et une fonction setInterval qui permet le défilement automatique.
J'ai commencé à coder tout cela mais jusqu'à maintenant seul le défilement automatique fonctionne.
Je précise que je suis encore débutant en HTML, CSS et fonction Javascript.

En vous remerciant d'accorder un peu de temps pour solutionner mon problème.


Voici mon code CSS:

.fleche_gauche {
	position: absolute;
	height:50px;
	width:50px;
    left:-17px;
	cursor: pointer;
	float:left;
}
.fleche_droite {
	position: absolute;
    height:50px;
	width:50px;
    right:-17px;
	cursor: pointer;
	float:right;
}
.container {
	position: absolute;
	top:64px;
	width:800px;
	height:200px;
	z-index:1;
	left: 207px;
	visibility: visible;
}
.slider {
	z-index:2;
	position:relative;
	width: 800px;
	height: 200px;
	overflow: hidden;
	box-shadow: 0px 1px 1px #C5C5C5;
}  
  
.slider ul {  
 /* 4 images donc 4 x 100% */  
   width: 600%;  
   height: 200px;  
   padding:0; 
   margin:0;  
   list-style: none;  
}  
.slider li {  
   float: left;  
}

ma fonction Javascript :

$(function(){  setInterval(function(){  
									
    $(".slider ul").animate({marginLeft:-800},600,function(){  
        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  
              })  
           }, 3000);  
		   
    $(".container .fleche_droite ").click(function(){
        if (courant<=self.nbEtapes){
            courant++;
            $(".container .slider ").animate({left:-courant*saut},800);
        }   
    });
   
    $(".container .fleche_gauche ").click(function(){
        if (courant>0){
            courant--;
            $(".container .slider ").animate({left:-courant*saut},800);
        }   
    });
   }); 

et le HTML :

<div id="container" class="container">
  <div id="slider" class="slider"><ul>
      <li><img src="img/1.jpg" alt="img1" width="800" height="200" /></li>
      <li><img src="img/2.jpg" alt="img2" width="800" height="200" /></li>
      <li><img src="img/3.jpg" alt="img3" width="800" height="200" /></li>
      <li><img src="img/1.jpg" alt="img4" width="800" height="200" /></li>
      <li><img src="img/2.jpg" alt="img5" width="800" height="200" /></li>
      <li><img src="img/3.jpg" alt="img6" width="800" height="200" /></li></ul>
  </div>
<div id="fleche_gauche" class="fleche_gauche"></div>
<div id="fleche_droite" class="fleche_droite"></div>

</div>

Merci de cette réponse rapide.
J'ai utilisé du JavaScript car il m'avait semblé que cela serait plus simple pour limiter les lignes de code,
ainsi que pour faire défiler les images du slider en boucle infinie, sans repasser par toutes les images lorsqu'il arrive à la dernière image et revenir à la première. J'avais en effet déjà consulté le lien créer un slideshow automatique et contrôlable par Creative Juiz, et le problème étant qu'il n'y avait pas cette fameuse boucle. j'ai commencé à lire le tuto slideshow en CSS mais la démo montre le même problème de boucle...
Merci de m'expliquer si cela est faisable sans JavaScript

Bonjour SolidSnake,

Oui en effet j'aimerai le réaliser moi même et le top c'est l'utilisation sur IE bien entendu.
Bravo pour ton recensement en tout cas, j'avais déjà commencé à chercher différents slider
"prêts à l'emploi" dirons nous en tentant des modifications du code, mais je me suis toujours retrouvé
avec des portions inadaptables les unes aux autres. J'essaie en vain d'avoir un slider "simple" sans effets visuels ultra sophistiqués, mais avec une boucle infinie (sans repasser par toutes les images de la dernière à la première), des dots de navigation pour se situer dans les images, deux boutons de navigation Précédent/Suivant, le défilement automatique et c'est tout...
pas facile à trouver jusque là avec un code simple et sans utiliser des plugins autres que Jquery.

stanysl a écrit :
pour faire défiler les images du slider en boucle infinie, sans repasser par toutes les images lorsqu'il arrive à la dernière image et revenir à la première.

Je vois ce que tu veux dire. Effectivement avec 3 images ce n'est pas gênant mais au delà ça devient vite agaçant.

J'ai bien une idée théorique mais je n'arrive pas à la mettre par écrit...

Dans l'idée que j'ai j'utilise la première image comme base pour permuter entre 2 animations. D'où dans le html, j'aurais : Img1 - Img2 - [...] - Img1
Lorsque la première animation arrive à la dernière image, elle disparait et laisse place à la seconde animation. Pendant quelle est cachée, elle revient à sa position initiale et attend.
La seconde animation qui aura attendue la moitié du temps devient visible et exécute à son tour son slideshow.

Pinaise j'arrive pas à expliquer. Tu vois l'idée ?

Sur le tutoriel Slider Galerie photo en boucle en CSS3 de CSS3Create il y est dit ceci :

CSS3Create a écrit :
Pourquoi ça tourne en boucle ?

Juste avant la fin de l’anim, on déplace tout le bloc en position de départ très rapidement (en 0,01% dans ce cas). Cela provoque une superposition des images invisible à l’oeil nu. L’animation reprend donc depuis le début, mais on a l’impression qu’elle continue...

Et effectivement l'effet est bluffant ! En plus bien plus simple que ma première idée...

Qu'en penses-tu ? Moi je crois que je vais bientôt modifier un peu mon slideshow...
Modifié par Greg_Lumiere (04 Dec 2014 - 15:51)

Bonsoir,
j'ai réussi à bidouiller un script me permettant d'utiliser les boutons flèche gauche et flèche droite de façon fonctionnelle. De plus ce script me permet d'avoir un effet mouseover qui arrête le défilement automatique, j'ai également une boucle infinie mais seulement dans un sens, je n'arrive pas à coder pour que la boucle infinie se fasse avec le bouton précédent.
Merci pour pour votre aide car je bloque...

voilà le script :

$(document).ready(function() {
slider.init() ;
slider.play_defil();
});

slider = {
init: function() {
slider.elem = $(".slider_content");
slider.nbSlide = slider.elem.find("div").length; //"div" = enfants de "slider_content"
slider.current = 0;

$(".fleche_droite").click(function() {
slider.next();
});

$(".fleche_gauche").click(function() {
slider.prev();
});


$(".container_slider").mouseover(function() {
slider.stop_defil();
});

$(".container_slider").mouseout(function() {
slider.play_defil();
});

},


next: function() {
slider.current++;
if(slider.current > slider.nbSlide-1 )
{
slider.current = 0;
slider.elem.stop().animate({marginLeft:-800},800,function(){
$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
})
}
else // 800 = largeur du slide
{
slider.elem.stop().animate({marginLeft: -slider.current*800+"px"},800);

}
},



prev: function() {
slider.current--;
if(slider.current < 0)
{
slider.current = slider.nbSlide-1;
// 800 = largeur du slide
}
slider.elem.stop().animate({marginLeft: -slider.current*800+"px"},800);
},



play_defil: function() {
slider.timer = window.setInterval("slider.next()", 1000);

},

stop_defil: function() {
window.clearInterval(slider.timer);

}

}