Forum : Carrousel défaillant :

Bonjours , voila j'ai suivis le tutoriel : http://www.youtube.com/watch?v=NgYXKowHIKc , mais seulement le résultat n'est pas celui attendu j'ai une image centrée , c'est tous ! Aucunes animations , pas de titre nis de navigation , pourriez-vous m'aider ?
Voici mes codes :

carrousel.css

#carrousel{
    border: solid 5px #dad3c3;
    width:712px;
    height:264px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}
.slide{
    position:absolute;
    top:0;
    left:0;
    width:712px;
    height:264px;   
}
.title{
    position:absolute;
    padding-left:12px;
    width:700px;
    line-height:35px;
    height:35px
    bottom:0;
    left:0;
    background:url(opaque.png) top left repeat;

}
.naviguation{
    position:absolute;
    bottom:38px;
    right:5px;

}
.naviguation span{
    background:#000;
    color:#fff;
    padding:2px 4px;
    cursor:pointer;
}
.naviguation span:hover,.naviguation span.active{
    background:#fff;
    color:#000;

}

carrousel.js

/*
   CARROUSEL JS
*/
var carrousel={
nbSlide:0,
nbCurrent:1,
elemCurrent:null,
elem:null,
timer:null,
init:function(elem){
this.nbSlide=elem.find(".slide").length;     
         //pagination
         elem.append('<div class="naviguation"></div>');
         for(var i=1;i<=this.nbSlide;i++){
             elem.find("naviguation").append("<span>"+i+"</span>");
         }
         elem.find("naviguation").click(function(){carrousel.gotoSlide($(this).text());})

         //initialisation

         this.elem=elem;
         elem.find(".slide").hide();
         elem.find(".slide:fisrt").show();
         this.elemCurrent=elem.find(".slide:first");
         this.elem.find(".naviguation span.first").addClass("active");

         //timer

 carrousel.play();

         //stop passage dessu carou

         elem.mouseover(carrousel.stop);
         elem.mouseout(carrousel.play);
         },

         gotoSlide:function(num){
             if(num==this.nbCurrent){return false;}
             /* animation en fade in et out
            this.elemCurrent.fadeOut();
            this.elem.find("#slide"+num).fadeIn();
            */
            /* animation en slide
            var sens=1;
            if(num<this.nbCurrent){sens=-1;}
            var cssDeb={"left":sens*this.elem.width()};
            var cssFin={"left":-sens*this.elem.width()};
            this.elem.find("#slide"+num).show().css(cssDeb); 
                    this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
            this.elemCurrent.animate(cssFin,500);

    */
    this.elemCurrent.find(".visu").fadeOut();
    this.elem.find("#slide"+num).show();
    this.elem.find("#slide"+num+".visu").hide().fadeIn();

    var titleHeight=this.elem.find(".title").heiht();

    this.elemCurrent.find(".visu.title").animate({"bottom":-titleHeight},500);
    this.elem.find("#slide"+num+".title").css("bottom",-titleHeight).animate({"bottom":0},500);

            this.elem.find(".naviguation span").removeClass("active");
            this.elem.find(".naviguation span:eq("+(num-1)+")").addClass("active");

            this.nbCurrent=num;
            this.elemCurrent=this.elem.find("#slide"+num);
         },

         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(){
             windows.clearinterval(carrousel.timer);
         },

         play:function(){
        windows.clearinterval(carrousel.timer)   
        this.timer=windows.setInterval("carrousel.next()",5000);

         }
}
$(function(){
    carrousel.init($("#carrousel"));
});

et enfin index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="carrousel.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carrousel.js"></script>
<title>Carrousel</title>
</head>
<body>
<div id="conteneur">
   <div id="carrousel" class="slide">
       <div id="slide1">
           <div class="visu">
              <img src="slie1.png"/>
   </div>
   <div class="title">
   Un site tous propre :)
   </div>
   </div>

          <div id="slide2" class="slide">
           <div class="visu">
              <img src="slie2.png"/>
   </div>
   <div class="title">
   Nouvelle version du jeu !
   </div>
   </div>

          <div id="slide3" class="slide">
           <div class="visu">
              <img src=""/>
   </div>
   <div class="title">
   </div>
   </div>

          <div id="slide4" class="slide">
           <div class="visu">
              <img src=""/>
   </div>
   <div class="title">
   </div>
   </div>
   <!--
   <div class="naviguation">
   <span>1</span>
   <span>2</span>
   <span>3</span>  
   -->
   </div>
   </div>
  </div>
</body>
</html>

J'ai recherché beaucoup de solutions sur internet mais .. rien . Je précise que j'utilise "the uncompressed, development jQuery 1.9.1".

6 réponses

Nonathy

Réponse acceptée

En effet, je pensais avoir changé les balises, mais je me suis trompé, j'avais changé les balises dans un autre fichier .js que j'avais utilisé pour un de mes projets.

J'ai aussi remarqué que j'avais ajouté l'option (prev et next), pour se faire il faut que tu crées deux balises avec la class next et prev =)

Bonne journée :)

Lotfi Berrahal

Bonsoir ,
As tu tout tes dossiers à la racine? sinon vérifie tes liens qui sont peut être pas bon.
Le carrousel démarre grâce à :

$(function(){
    carrousel.init($("#carrousel"));

});

???

Benoît Foucher

Auteur

Bonjours , effectivement j'ai oublié cette petite précision : TOUS les fichiers sont situé dans le même dossier et à la racine , la preuve je vois quand même une image lorsque je regarde la page .php . Et oui le carrousel démarre grâce à cela (d’après le tutoriel ) , juste après toutes les vérification : initialisation/timer/Evaluations .

Cordialement , ai-je fait des erreurs de programmes ?

Merci pour votre réponse .

Nonathy

Ce qui se passe c'est que le tutoriel a été fait avec une autre version de Jquery (plus ancienne) et qu'actuellement, avec les nouvelles version de Jquery, le code n'est plus à jour. J'ai refais le code il y a 1 ou 2 mois. Je te l'envoie, par contre, j'ai changé les balises css dans le fichier JS, donc pense à l'adapter à ton code :)

<u>carousel.js</u>

var carrousel = {
    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    temps : 5000,
    timer : null,
    init : function(elem,duration){
        if(duration > 0){
            this.temps = duration;
        }
        this.nbSlide = $(elem).find(".slide").length;
        // Créer la pagination
        $(elem).append('<div class="navigation"></div>');
        for(var i=1;i<=this.nbSlide;i++){
            $(elem).find('.navigation').append('<span>'+i+'</span>');
        }
        $(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 = $('.slide:first');
        $('.navigation span:first').addClass('active');
        // Création du timer
        carrousel.play();

        // Stop quand on passe sur les images (Encore un peu bugé)
         $(elem).mouseover(carrousel.stop);
         $(elem).mouseout(carrousel.play);
        // Next Et Prev quand on clique sur les boutons
        $('.next').click(function(){
            carrousel.next();
            carrousel.play();
            return false;
        });
        $('.prev').click(function(){
            carrousel.prev();
            carrousel.play();
            return false;
        });

    },
    gotoSlide : function(num){
        if(num==this.nbCurrent){ return false; }
        /* Animation en FadeIn/FadeOut
        this.elemCurrent.fadeOut('slow');
        $('#slide'+num).fadeIn('slow');
        */
        /* Animation en Slide */
        var sens = 1;
        if(num<this.nbCurrent){ sens = -1}
        var cssDeb = { 'left' : sens*$(this.elem).width()};
        var cssFin = { 'left' : -sens*$(this.elem).width()};
        $('#slide'+num).show().css(cssDeb);
        $('#slide'+num).animate({'top':0,'left':0},500);
        $(this.elemCurrent).animate(cssFin,500);

        $('.navigation span').removeClass('active');
        $('.navigation span:eq('+(num-1)+')').addClass('active');
        this.nbCurrent = num;
        this.elemCurrent = $('#slide'+num);
        carrousel.play();
    },
    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(){
        window.clearInterval(carrousel.timer);
        this.timer = window.setInterval('carrousel.next()',this.temps);
    }

}

PS : J'ai ajouté une option supplémentaire dans ce fichier qui te permet de définir le temps d'interval entre deux slides, pour le changer (par défault) soit tu changes la valeur de "temps" dans les configs en haut, soit lors de l'initialisation tu met ceci

<u>Dans le fichier index.html, dans une balise script</u>

$(document).ready(function(){
    carrousel.init('#carrousel','10000');
});

J'espère que tout ceci t'auras aidé :)

Benoît Foucher

Auteur

Je vous remercie pour votre code , j'ai juste effectivement le petit problème du CSS , je n'ai su déterminer vos nouvelles balises .

Cordialement . (celle que j'ai repérés sont les même que celles du tuto )

Benoît Foucher

Auteur

Je vous remercie de votre soutient , problème résolus :)