Forum : Bidouillage Carousel

MrGuillou

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 ?

BillyTheGeek

Auteur

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.

Bidouillage Carousel

2 réponses