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.

2 réponses


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.