Hello !
J'ai suivi avec une grande ferveur le carrousel Jquery et je l'ai réussi ! ( c'est la première fois que je fais du java )
J'aimerai qu'on m'indique un petit tweak.
Dans le tuto, j'ai appris à faire un défilement logique : si je suis en slide 4 et que je reviens à 3 il va vers la gauche. Si je vais vers 5 il va vers la droite.
ca, je garde.
MAIS
Moi ce que j'aimerai c'est que quand on est en lecture automatique et qu'on arrive à la fin, il passe VERS LA DROITE du dernier au premier, au lieu de tout passer en accéléré pour revenir au 1.
suis-je assez clair ?
un dernière chose : comment sortir la navigation du carrousel tout en le laissant visible ? ( carrousel{overflow:hidden;} )
Merci beaucoup, beaucoup.
Bonjour,
Attention java n'est pas javascript
Java est un autre language
ton carousel est fait avec du javascript
Si tu pouvais nous montrer ton code javascript merci
Au niveau de ta question, tu veux qu'il boucle à l'infini sans le retour en arrière ?
Je voudrais qu'il boucle à l'infini oui. Et quand il est en lecture automatique, seulement vers la droite. ( quand on interagit pas avec pour le faire revenir a une image précédente ce qui ferait un défilement vers la gauche)
d'ailleurs j'ai aussi essayé de mettre un next et prev button mais ils ne marchent pas non plus. ( je suis un très très débutant ).
mon html : ( y'a plusieurs div mais je n'en écris qu'une ).
<div id="carrousel">
<div class="prev"> précédent </div>
<div class="next"> suivant </div>
<div id="slide1" class="slide">
<div class="visu">
<img src="images/carrouselCerf.jpg" />
</div>
<div class="title"><a href="#">Le Rock</a></div>
<div class="description"> ceci est une description</div>
</div>
</div>mon css :
@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0}
}
body
{background-color:#666;margin:0; padding:0; border:0;}
#globalcontainer{margin:auto;width:900px; height:900px;background-color:#333;}
#carrousel{
clear:both;
position:absolute;
border:solid 5px #0CF;
width:712px;
height:264px;
margin:200px 0 0 94px;
overflow:hidden;
}
.slide{
position:absolute;
top:0;
left:0;
height:264px;
width:712px;}
.title{
position:absolute;
z-index:50;
padding-left:12px;
line-height:35px;
width:700px;
height:35px;
bottom:0;
left:0;
color:#CCC;
background:url(../images/fondtitre.png) top left repeat;}
.description{
position:absolute;
z-index:60;
padding-left:70px;
line-height:35px;
width:600px;
height:35px;
bottom:0;
left:15px;
color:#999;}
.navigation{
position:absolute;
z-index:100;
bottom:-50px;
right:0;
}
.prev{
position:absolute;
z-index:150;
bottom:0;
right:100px;
color:red;
cursor:pointer;
background-color:white;
}
.next{
position:absolute;
z-index:150;
bottom:0;
right:50px;
color:red;
cursor:pointer;
background-color:white;
}
.navigation span{
background:url(../images/fondtitre.png)
color:#FFF;
padding: 2px 4px;
}
.navigation span:hover,.navigation span.active{
background-color:#FFF;
color:#333;
cursor:pointer;
}mon js :
// JavaScript Document
var carrousel={
nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,
init : function(elem){
this.nbSlide = elem.find(".slide").length;
/*//créer la fonction pour la pagination SAUVEGARDE
elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>");
}*/
//créer la fonction pour la pagination
elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>");
}
$(".prec").click(function(){ caroussel.prev(); });
$(".next").click(function(){ caroussel.next(); });
elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
//initialisation du carrousel
this.elem=elem;
elem.find(".slide").hide();
elem.find(".slide:first").show();
this.elemCurrent = elem.find(".slide:first");
this.elem.find(".navigation span:first").addClass("active");
//on crée le timer
carrousel.play();
//stop quand on passe dessus
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);
},
gotoSlide : function(num){
if(num==this.nbCurrent){return false;}
/* ANIMATION EN FADE OUT
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();
*/
/* ANIMATION EN SLIDE */
var sens = 1;
//if(num<this.nbCurrent){sens = -1;} CETTE LIGNE : SI GO DE SLIDE 3 À 1 ALORS : VERS LA GAUCHE. SI 1 VERS 3 : DROITE
var cssDeb = {"left" : sens*this.elem.width(),}
var cssFin = {"left" : -sens*this.elem.width(),}
this.elem.find("#slide"+num).show().css(cssDeb);
/*fin de la section animation en slide*/
//animation du mouvement
this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
this.elemCurrent.animate(cssFin,500);
//Le titre descends et remonte
var titleHeight = this.elemCurrent.find(".title").height();
this.elemCurrent.find(".title").animate({"bottom":-titleHeight},200);
this.elem.find("#slide" +num+ " .title").css("bottom",-titleHeight).animate({"bottom":0},800);
this.elem.find(".navigation span").removeClass("active");
this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
this.nbCurrent = num;
this.elemCurrent = this.elem.find("#slide"+num);
// Tentative description
var descriptionheight = this.elemCurrent.find(".description").height();
this.elemCurrent.find(".description").animate({"bottom":-descriptionheight},200);
this.elem.find("#slide" +num+ " .description").css("bottom",-description).animate({"bottom":0},800);
},
next : function(){
var num = this.nbCurrent+1;
if(num >this.nbSlide){
num = 1;
}
this.gotoSlide(num);
},
prev: function(){
var num = this.nbCurrent-1;
if(num<1){
num = this.nbSlide;
}
this.gotoSlide(num);
},
stop:function(){
window.clearInterval(carrousel.timer);
},
play:function(){
carrousel.timer = window.setInterval("carrousel.next()",5000);
}
}
$(function(){
carrousel.init($("#carrousel"));
});quoi qu'il en soit. merci beaucoup.