WASlider

Test d'un slider contrôlable au clavier

by Remwideco

HTML

<div id="caroussel">
            <div class="carousselConteneur">
                <ul>
                    <li class="slide">
                        <img src="http://dribbble.s3.amazonaws.com/users/178514/screenshots/652645/lmf2.png" alt="Si je suis pertinent ne m'oubliez pas" />
                    </li>
                    <li class="slide">
                        <img src="http://dribbble.s3.amazonaws.com/users/178514/screenshots/652638/lmf1.png" alt="Si je suis pertinent ne m'oubliez pas" />
                    </li>
                    <li class="slide">
                        <img src="http://dribbble.s3.amazonaws.com/users/178514/screenshots/652625/erp_1.png" alt="Si je ne suis pas pertinent, laissez moi vide" />
                    </li>
                </ul>
            </div>
        </div>

<p class="credits">Les images proviennent du compte Dribbble du designer <a href="http://dribbble.com/LIBERTY">Paul Connop</a> et le code de votre serviteur <a href="http://www.web-actually.fr">Web Actually</a>.</p>

CSS

#caroussel {
        height:300px;
        margin:0 auto;
        overflow: auto;
        position: relative;
        width:400px;
    }

    .carousselConteneur ul {
        list-style:none !important;
        margin:0 !important;
        padding-left:0 !important;
    }

    .carousselConteneur li.slide {
        height:300px;
        margin:0 auto;
        width:400px;
    }

    .slide a {
        margin:0 !important;
        padding: 0 !important;
    }

    .controles {
        background:rgba(0,0,0,.45);    
        cursor:pointer;
        display:block;
        height:40px;
        overflow: hidden;
        position: absolute;
        text-indent:100%;
        top: 110px;
        width:40px;
        white-space: nowrap;
    }

    .controles:hover, .controles:focus {
        background: rgba(0,0,0,.75);
    }

    #ctrlGauche {
        /*background:transparent url("fleche-gauche.png") no-repeat 0 0; mettre une image*/
        left:0;
        z-index:99;
    }

    
    #ctrlDroite {
        /*background:transparent url("fleche-droite.png") no-repeat 0 0; mettre une image*/      
        right:0;
        z-index:99;
    }
    
/* Pour la démo seulement */        

    .credits {
        border-top: 1px solid #ededed;
        color: #696969;
        font-size: .875em;
        font-family: "Helevtica Neue", Helvetica, Arial, sans-serif;
        padding: 15px 0;
    }

.credits a, .credits a:visited {
    color: #4c5757;
}

.credits a:hover, .credits a:focus {
    color: #3c4545;
    text-decoration:none;
}

JavaScript

$(document).ready(function(){
        var cPosition = 0; //Position courante
        var slideWidth = 400; //Largeur d'un slide
        var slides = $('.slide'); //Identification des slides
        var numSlides = slides.length; //Nombre de slide

        //Js activé je passe donc le conteneur en overflow hidden pour cacher les autres slides
        $('#caroussel').css('overflow','hidden');

        //Float left sur les LI
        slides.css({'float' : 'left', 'width' : slideWidth});

          $('.carousselConteneur ul').css('width', slideWidth * numSlides);

          $('#caroussel')
            .prepend('<a href="#" class="controles" id="ctrlGauche">Slide précédent</a>')
            .append('<a href="#" class="controles" id="ctrlDroite">Slide suivant</a>');

          manageControls(cPosition);


          $('.controles').bind('click', function(){
              cPosition = ($(this).attr('id')=='ctrlDroite')? cPosition+1 : cPosition-1;
              manageControls(cPosition);
              $('.carousselConteneur').animate({'marginLeft' : slideWidth*(-cPosition)});
        });

      function manageControls(position){
        if(position==0){ $('#ctrlGauche').hide() }
        else{ $('#ctrlGauche').show() }
        if(position==numSlides-1){ $('#ctrlDroite').hide() }
        else{ $('#ctrlDroite').show() }
    }

    });