Slider com html, javascript e css

Resultado final: http://jsfiddle.net/7etUR/embedded/result/

Link original: http://jsfiddle.net/7etUR

Encontrei este código num post do linkedIn, achei útil demais pra não compartilhar…

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Slider!</title>
        <link type="text/css" href="style.css" rel="stylesheet"/>
    </head>
    <body>
        
        <div id="slideflip" onselectstart="return false">
            <div id="slideflip_container" class="slideflip_container_animate">
                
                <div class="slide">
                    Slide 1
                </div>
                <div class="slide">
                    Slide 2
                </div>
                <div class="slide">
                    Slide 3
                </div>
                
            </div>
        </div>
        
        
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Css

/* Main slider element */
#slideflip {
    background-color:#224;
    box-shadow:inset 0px 10px 50px 10px #555;
    cursor:pointer;
    height:300px;
    left:0px;
    overflow:hidden;
    position:absolute;
    top:0px;
    width:300px;
}

/* HUGE container so that divs stay lined up horizontally
   Also, this element handles the 'sliding' */
#slideflip_container {
    height:300px;
    left:0px;
    position:absolute;
    top:0px;
    width:999999px;

}
/* When this class is applied, the slider slides smoothly */
.slideflip_container_animate {
    -webkit-transition:left 300ms;
}

/* Individual slide. NOTE: Width must match the slideflip element */
.slide {
    background-color:#AFF;
    border:2px solid #444;
    display:inline-block;
    float:left;
    height:290px;
    left:0px;
    padding:3px;
    position:relative;
    top:0px;
    width:290px;
}

Javascript

var SlideFlip = new function() {
    var _this = this;

    //Utility function
    function byId(id) {return document.getElementById(id);}

    //Elements
    var slider = byId("slideflip");
    var sliderContainer = byId("slideflip_container");
    var maxSlides = sliderContainer.getElementsByClassName("slide").length;

    //variables
    var width = slider.offsetWidth;    //width of the slider

    var mouseIsDown = false;        //true if the user is dragging
    var anchorX = 0;                //the anchor point of the drag
    var xPos = 0;                    //current x position in the drag

    var currentIndex = 0;            //current slide

    //For getting x coordinates for mouse/touch event
    function getMouseX(e) {

        var x;
        if (!e) e = window.event;

        if (e.pageX)    {x = e.pageX;}
        if (e.clientX)    {x = e.clientX;}

        var p = slider;
        while(p.parentNode != null) {
            x -= p.offsetLeft    - p.scrollLeft;
            p = p.parentNode;
        }

        return x;

    }

    function getTouchX(e) {

        var x = e.touches[0].clientX;

        var p = slider;
        while(p.parentNode != null) {
            x -= p.offsetLeft    - p.scrollLeft;
            p = p.parentNode;
        }

        return x;
    }

    //Initial drag event
    function onMouseDown(x) {

        xPos = anchorX;

        mouseIsDown = true;
        sliderContainer.className = "";
        anchorX = (x + width * currentIndex) / width * 100;

    }

    //'dragging'
    function onMouseMove(x) {

        if(!mouseIsDown) return;

        xPos = x;

        sliderContainer.className = "";

        var x = x / width * 100;
        x -= anchorX;

        sliderContainer.style.left = x + "%";

    }

    //Drag complete
    function onMouseUp() {

        mouseIsDown = false;

        sliderContainer.className = "slideflip_container_animate";

        var x = xPos;

        x = (x + width * currentIndex) / width * 100;
        x -= anchorX;

        if(x > 50) {
            _this.slideTo(currentIndex-1);
        } else if(x < -50) {
            _this.slideTo(currentIndex+1);
        } else {
            _this.slideTo(currentIndex);
        }

    }

    //Public function that allows users to jump to different slides without dragging
    this.slideTo = function(index) {

        if(index < 0) index = 0;
        else if(index > maxSlides-1) index = maxSlides-1;

        currentIndex = index;
        sliderContainer.style.left = (index * -100) + "%";
    }

    //Event listeners:

    slider.addEventListener("mousedown", function(e) {
        onMouseDown(getMouseX(e));
    }, true);
    slider.addEventListener("mousemove", function(e) {
        onMouseMove(getMouseX(e));
    }, true);
    slider.addEventListener("mouseup", function() {
        onMouseUp();
    }, true);
    slider.addEventListener("mouseout", function() {
        onMouseUp();
    }, true);

    slider.addEventListener("touchstart", function(e) {

        if(e.touches.length > 1) return;

        onMouseDown(getTouchX(e));

        e.stopPropagation();
        e.preventDefault();

    }, true);
    slider.addEventListener("touchmove", function(e) {

        if(e.touches.length > 1) return;

        onMouseMove(getTouchX(e));

        e.stopPropagation();
        e.preventDefault();

    }, true);
    slider.addEventListener("touchend", function(e) {

        onMouseUp();

        e.stopPropagation();
        e.preventDefault();

    }, true);

}

 

Created and maintained by Piotr and Oskar.

Hosted by DigitalOcean.

It wouldn’t exist without MooTools community.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s