Draggable slider

by dunerunner

HTML

<div class="controls">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
</div>
<div class="viewport">
    <div id="container" class="slide-container">
        <div class="slide red"></div>
        <div class="slide green"></div>
        <div class="slide blue"></div>
    </div>
</div>

CSS

body {
    margin:0;
}
.controls {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
}
.viewport {
    height:100vh;
    width:100vw;
    overflow:hidden;
}
.slide-container{
    white-space:nowrap;
    font-size:0px;
    transform:translate3d(0,0,0);
    transition:transform 0.4s linear;
}
.slide {
    height:100vh;
    width:100vw;
    display:inline-block;
    font-size:16px;
}
.red {
    background:red;
}
.blue {
    background:blue;
}
.green {
    background:green;
}
.draggable {
    transition:none;
}

JavaScript

$(document).ready(function(){
    var currentSlide = 0;
    var numberOfSlides = 3;
    function setSlide(index) {
        var x =  index * 100 + '%';
        currentSlide = index;
        $('#container').css('transform', 'translate3d(-'+x+',0,0)');
    }
    $('.controls').on('click','a',function(e) {
        e.preventDefault();
        var index = $(this).index();
        currentSlide = index;
        setSlide(index);
    });
    var offset;
    
    var windowWidth = window.innerWidth;
    var slideDist;
    function mouseMove(e) {
        var elementX;
        if(!offset) {
            offset = e.offsetX;
        }
        slideDist = e.clientX - offset;
        if((slideDist > 0 && currentSlide === 0) || (slideDist < 0 && currentSlide === numberOfSlides - 1)) {
             slideDist = 0;
        }
        elementX = slideDist - currentSlide * windowWidth;
        $('#container').css('transform', 'translate3d('+elementX+'px,0,0)');
    }
    $('#container').on('mousedown',function(){
        $(this).addClass('draggable');
        $('#container').on('mousemove', mouseMove);
    });
    
    $('#container').on('mouseup',function() {
        offset = null;
        
        $(this).off('mousemove',mouseMove);
        if(Math.abs(slideDist) > 0.4 * windowWidth) {
            if(slideDist > 0) {
                setSlide(currentSlide - 1);
            } else {
                setSlide(currentSlide + 1);
            }
        } else {
            setSlide(currentSlide);
        }
        slideDist = null;
        $(this).removeClass('draggable');
    });
});