[Bug]Carrousel Jquery

Cabillaud
Javascript

Donc le sujet ne change je realise mon carrousel JQuery grace a ce tuto

Je suis arriver a la fin du tuto donc et le script est executer sans problemes. Le problemes viens plutot de petit bugs (2)

  • A l'arriver sur la page le slide n'est pas afficher il faut cliquer d'abord sur 2 puis sur 1 pour l'afficher et a partir de la seconde "boucle", seul le 4 peut-etre afficher
  • a chaque changement d'image pour une raison obscure le temps de defilement est "raccourci" et est tres rapidement tellement faible qu'on passe du 1 au 4 instantanement

Voici mon code
HTML: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta lang="fr-FR"/>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
        <link rel="shortcut icon" type="image/png" href="favicon.png" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/carrousel.js"></script>
        <title>Cabillaud94 | Webmaster</title>
    </head>
 
    <body>
        <div id="page-sup">
            <!--NAME-->
            <div id="name-sup">
                <a href="index.php" title="Name">
                    - Cabillaud94 -
                </a>
            </div>
                <!--MENU-->
            <div id="menu-sup">
                <ul>
                    <li title="Home"><a href="index.php">? Home ?</a></li>
                    <li title="Team"><a href="team.php">? Team ?</a></li>
                    <li title="Work"><a href="work.php">? Work ?</a></li>
                    <li title="Shop"><a href="shop.php">? Shop ?</a></li>
                    <li title="Contact"><a href="contact.php"> ? Contact ? </a></li>
                </ul>
            </div>
        </div>
        <div id="page-cen">
            <div id="carrousel-cen">
                <div id="slide1-cen" class="slide-cen">
                    <div class="visuel">
                        <img src="img/slide1.jpg"/>
                    </div>
                    <div class="titlecarrousel-cen">
                        Cabillaud94.com
                    </div>
                </div>
                <div id="slide2-cen" class="slide-cen">
                    <div class="visuel">
                        <img src="img/slide2.jpg"/>
                    </div>
                    <div class="titlecarrousel-cen">
                        Slide
                    </div>
                </div>
                <div id="slide3-cen" class="slide-cen">
                    <div class="visuel">
                        <img src="img/slide3.jpg"/>
                    </div>
                    <div class="titlecarrousel-cen">
                        Slide
                    </div>
                </div>
                <div id="slide4-cen" class="slide-cen">
                    <div class"visuel">
                        <img src="img/slide4.jpg"/>
                    </div>
                    <div class="titlecarrousel-cen">
                        Slide
                    </div>
                </div>
                <!--<div class="nav-cen">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </div>-->
            </div>
        </div>
        <div id="page-bot"></div>
            <div id="do-bot">
                ? I DO WEBSITE ?
            </div>
            <div id="whatido-bot">
                <ul>
                    <li title="Design"><div class="whatidospace-bot"><a href="work.php">z</a></div><br/></li>
                    <li title="Technology"><div class="whatidospace-bot"><a href="work.php">H</a></div><br/></li>
                    <li title="Ergonomics"><div class="whatidospace-bot"><a href="work.php">-</a></div><br/></li>
                    <li title="Price"><div class="whatidospace-bot"><a href="work.php">:</a></div><br/></li>
                    <li title="Documentation"><div class="whatidospace-bot"><a href="work.php"></a></div><br/></li>
                </ul>
            </div>
            <div id="whatidotext-bot">
                <ul>
                    <li>- Design -<br/><p>All my sites are strictly unique, everyone has the latest fashion.</p></li>
                    <li>- Technology -<br/><p>I use the latest technology in website design.<br/>(HTML5/CSS3/PHP5)</p></li>
                    <li>- Erogonomics -<br/><p>All my sites are designed to be easy to be use for everyone.</p></li>
                    <li>- Price -<br/><p>I offer different packages to suit me every budget.<br/>Let's check in the Shop.</p></li>
                    <li>- Documentation -<br/><p>All my sites are provided with full documentation and quality</p></li>
                </ul>
            </div>
            <div id="sceau-bot">
                <a href="#" title="Cabillau94 Website">
                    MADE BY CABILLAUD94
                </a>
            </div>
    </body>
</html>

JS: 

var carrousel = {
    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    timer : null,
 init : function(elem){
    this.nbSlide = elem.find(".slide-cen").length;
    //pagination
    elem.append('<div class="nav-cen"></div>')
    for(var i=1;i<=this.nbSlide;i++){
        elem.find(".nav-cen").append("<ul><li>"+i+"</li></ul>")
    }
    elem.find(".nav-cen ul li").click(function(){ carrousel.gotoSlide($(this).text()); })
    //init system carrousel
    this.elem=elem;
    elem.find(".slide-cen").hide();
    elem.find(".slide-cen:first").show();
    this.elemCurrent = elem.find(".slide-cen:first");
    this.elem.find(".nav-cen ul li:first").addClass("active");

    //init timer
    carrousel.play();
    //detect hover
    elem.mouseover(carrousel.stop);
    elem.mouseout(carrousel.play);
    },
    gotoSlide : function(num){
        if(num==this.nbCurrent){window.clearInterval(carrousel.timer); return false;}
        /*animation fadein/fadeout
        this.elemCurrent.fadeOut();
        this.elem.find("#slide"+num+"-cen").fadeIn();*/
        /*animation 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+"-cen").show().css(cssDeb);
        this.elem.find("#slide"+num+"-cen").animate({"top":0,"left":0},500);
        this.elemCurrent.animate(cssFin,500);
        */
        /*animation*/
        this.elemCurrent.find(".visuel").fadeOut();
        this.elem.find("#slide"+num+"-cen").show();
        this.elem.find("#slide"+num+"-cen .visuel").hide().fadeIn();
        var titleheight = this.elemCurrent.find(".titlecarrousel-cen").height();
        this.elemCurrent.find(".titlecarrousel-cen").animate({"bottom": -titleheight},500);
        this.elem.find("#slide"+num+"-cen .titlecarrousel-cen").css("bottom",-titleheight).animate({"bottom": 0},500);

        this.elem.find(".nav-cen ul li.active").removeClass("active");
        this.elem.find(".nav-cen ul li:eq("+(num-1)+")").addClass("active");
        this.nbCurrent = num;
        this.elemCurrent = this.elem.find("#slide"+num+"-cen");
    },
    next : function(){
        var num = this.nbCurrent+1;
        if(num > this.nbSlide){
            num = 1 ;
        }
        this.gotoSlide(num);
    },
    prev : function(){
        var num = this.nbCurrent;
        num--;
        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()",5000);
    },
}
$(function(){
    carrousel.init($("#carrousel-cen"));
});

Merci de votre reponse
Si une autre source est necesaire n'hesitez pas

Cabillaud

6 réponses

antho07

Bonsoir,
possible css ou un lien si le site est visible en ligne??

Cabillaud
Auteur

non le css est bon (je voit pas pourquoi le css fait buger le carrousel LOL)

antho07

Bonjour,
on s'est mal compris.
Je demandais le css pour voir en local ce qu'il se passe et debogguer, pour avoir un affichage identique au tiens, voir visuellement le soucis et investiguer.

antho07

Imaginer le script tourné pour essayer de comprendre de tête ce qu'il peut se passer prendra enormement de temps et risque en plus de faire des aller retours sur le forum inutiles parce que je pourrai pas tester dans ta situation ce que jaurais imaginer sans tester.

Cabillaud
Auteur

Alors tiens

@font-face{
        font-family: 'BebasNeue';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
         font-weight: normal;
         font-style: normal;
}
@font-face{
    font-family:'Lobster';
    src: url('fonts/Lobster_1_3.otf'),
         url('fonts/Lobster_1.3.svg#webfont') format('svg');
}
@font-face{
    font-family:'SketchIcons';
    src: url('fonts/SketchIcons.ttf'),
         url('fonts/SketchIcons.svg#webfont') format('svg');
}
body{
    background-color: white;
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
    font-size: 22px;
    text-indent: 0px;
}
/*PAGE SUP*/
#page-sup{
    background-color: #E73E01;
    height: 75px;
    width: 100%;
    position: absolute;
    top: 0%;
}
/*NAME*/
#name-sup a{
    text-decoration: none;
    text-align: left;
    font-size: 26px;
    font-family: 'Lobster';
    color: #fff;
    position: absolute;
    top:25%;
    left: 3%;
}
/*MENU*/
#menu-sup{
    padding: 0;
    height: 48px;
    width: 590px;
    position: absolute;
    right: 0%;
    bottom:50%;
}
#menu-sup ul li{
    list-style: none;
    float: left;
}
#menu-sup ul li a{
    height:50px;
    width: 89px;
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 22px;
    font-family: 'BebasNeue';
    color: #FFF;
    line-height: 50px;
    background-color: #E73E01;
}
#menu-sup ul li a:hover{
    background-color: #7A1F01;
    text-decoration: underline;
}
/*PAGE CENTER*/
#page-cen{
    background-color: #fff;
    height: 430px;
    width: 100%;
    position: absolute;
    top:75px;
}
/*CARROUSEL JS*/
#carrousel-cen{
    position: relative;
    left: 28%;
    top:15%;
    height: 264px;
    width: 712px;
    border: 5px #E73E01 solid;
    overflow: hidden;
}
.slide-cen{
    position: absolute;
    top: 0;
    left: 0;
    height: 264px;
    width: 712px;
}
.titlecarrousel-cen{
    height: 30px;
    width: 722px;
    position: absolute;
    bottom:-45px;
    left:-5px;
    background-color: #E73E01;
    text-align: center;
    font-family: 'BebasNeue';
    font-size: 25px;
    line-height: 30px;
    color:#fff;
}
.nav-cen{
    position: absolute;
    bottom:0px;
    margin-left: 0;
    margin-right: 0;
    height: 30px;
    width: 200px;
}
.nav-cen ul li{
    position: relative;
    bottom:20px;
    left: -40px;
    list-style: none;
    float: left;
    height: 30px;
    width: 25px;
    display: block;
    text-align: center;
    font-size: 22px;
    font-family: 'BebasNeue';
    color: #FFF;
    line-height: 30px;
    background-color: #E73E01;
}
.nav-cen ul li:hover, .nav-cen ul li.active{
    background-color: #7A1F01;
    text-decoration: underline;
    cursor: pointer;
}
/*PAGE BOTTOM*/
#page-bot{
    background-color: #E73E01;
    height: 375px;
    width: 100%;
    position: absolute;
    bottom:0%;
    padding: 0;
} 
/*WHAT I DO*/
#do-bot{    
    position: absolute;
    bottom: 32.5%;
    height: 64px;
    width: 100%;
    text-align: center;
    text-decoration: underline;
    font-size: 65px;
    font-family:'BebasNeue';
    color:#FFF;
}
/*I DO IMAGE*/
#whatido-bot{
    position: absolute;
    bottom: 15%;
    left:23.5%;
    padding: 0;
    height: 150px;
    width: 925px;
}
#whatido-bot ul li{
    list-style: none;
    float: left;
}
#whatido-bot ul li .whatidospace-bot{
    height: 150px;
    width: 175px;
}
#whatido-bot ul li a{
    height: 100px;
    width: 100px;
    background-color: #fff;
    border-radius: 50 50 50 50px;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 85px;
    font-family: 'SketchIcons';
    color: #E73E01;
    line-height: 100px;
}
/*I DO TEXT*/
#whatidotext-bot{
    position: absolute;
    bottom: 12.5%;
    left:21%;
    padding: 0;
    height: 64px;
    width: 925px;
}
#whatidotext-bot ul li{
    list-style: none;
    float: left;
    display: block;
    height: 150px;
    width: 175px;
    text-align: center;
    text-indent: 5px;
    text-transform : capitalize;
    text-decoration: none;
    font-size: 22px;
    font-family: 'Lobster';
    color:#fff;
}
#whatidotext-bot ul li p{
    font-size: 18px;
    font-family: 'BebasNeue';
}
/*SCEAU*/
#sceau-bot{
    position: absolute;
    bottom: 1%;
    left: 88.75%;
    padding: 0;
    height: 24px;
    width: 170px;
}
#sceau-bot a{
    display: block;
    text-align: center;
    text-transform : capitalize;
    text-decoration: none;
    font-size: 24px;
    font-family: 'BebasNeue';
    color:#fff;
}
}
Cabillaud
Auteur

(c'est un vieux css je suis meilleur maintenant :P)