Адаптивный слайдер карусель, с плавным эффектом автопрокрутки HTML5 + CSS3 + jQuery

<div id="slider-wrap">
    <div id="active-slide">
        <div id="slider">
            <div class="slide"><img src="1.jpg"></div>
            <div class="slide"><img src="2.jpg"></div>
            <div class="slide"><img src="3.jpg"></div>
            <div class="slide"><img src="4.jpg"></div>
        </div>
    </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

body {
    color: #4f4f5a;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
}

#slider-wrap{ 
    max-width:800px;
    margin: 0 auto;
    margin-top: 80px;
}

#active-slide {
    width: 100%;
    display: table;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#slider{
    position: relative;
    width: calc(100% * 4);
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    -webkit-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.slide{
    width: calc(100%/4);
    list-style: none;
    display: inline;
    float: left;
}

.slide img {
    width:100%;
}

.Radio-But{
    margin-top:10px;
    text-align:center;
}

.Radio-But .ctrl-select {
    margin:2px;
    display:inline-block;
    width:16px;
    height:16px;
    overflow:hidden;
    text-indent:-9999px;
    background:url(radioBg.png) center bottom no-repeat;
}

.Radio-But .ctrl-select:hover {
    cursor:pointer;
    background-position:center center;
}

.Radio-But .ctrl-select.active {
    background-position:center top;
}

#prewbutton, #nextbutton {
    display:block;
    width:40px;
    height:100%;
    position:absolute;
    top:0;
    overflow:hidden;
    text-indent:-999px;
    background: url("arrowBg.png") left center no-repeat;
    opacity:0.5;
    z-index:3;
    outline:none !important;
}

#prewbutton {
    left:10px;
}

#nextbutton {
    right:10px;
    background:url(arrowBg.png) right center no-repeat;
}

#prewbutton:hover, #nextbutton:hover {
    opacity:1;
}

$(document).ready(function () {

var timeList = 700;
var TimeView = 5000;
var RadioBut = true;

var slideNum = 1;
var slideTime;
slideCount = $("#slider .slide").length;

var animSlide = function(arrow){
    clearTimeout(slideTime); 

    if(arrow == "next"){
	  if(slideNum == slideCount) { slideNum=1; }
	  else{slideNum++}
       translateWidth = -$('#active-slide').width() * (slideNum - 1);
       $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
	   rotator(); 
    }
    else if(arrow == "prew")
    {	
       if(slideNum == 1) { slideNum=slideCount; }
	  else{slideNum-=1}
	  translateWidth = -$('#active-slide').width() * (slideNum - 1); 
       $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }else{
       slideNum = arrow;
	  translateWidth = -$('#active-slide').width() * (slideNum -1);
       $('#slider').css({'transform': 'translate(' + translateWidth + 'px, 0)'});
    }

    $(".ctrl-select.active").removeClass("active");
    $('.ctrl-select').eq(slideNum - 1).addClass('active');
}

    if(RadioBut){
    var $linkArrow = $('<a id="prewbutton" href="#">&lt;</a><a id="nextbutton" href="#">&gt;</a>')
        .prependTo('#active-slide');
        $('#nextbutton').click(function(){
           animSlide("next");
           return false;
           })
        $('#prewbutton').click(function(){
           animSlide("prew");
           return false;
           })
    }
        var adderSpan = '';
        $('.slide').each(function(index) {
               adderSpan += '<span class = "ctrl-select">' + index + '</span>';
           });
        $('<div class ="Radio-But">' + adderSpan +'</div>').appendTo('#slider-wrap');
        $(".ctrl-select:first").addClass("active");
        $('.ctrl-select').click(function(){
        var goToNum = parseFloat($(this).text());
        animSlide(goToNum + 1);
        });
        var pause = false;
        var rotator = function(){
               if(!pause){slideTime = setTimeout(function(){animSlide('next')}, TimeView);}
               }
        $('#slider-wrap').hover(
           function(){clearTimeout(slideTime); pause = true;},
           function(){pause = false; rotator();
           });
        
    var clicking = false;
    var prevX;
    $('.slide').mousedown(function(e){
        clicking = true;
        prevX = e.clientX;
    });

    $('.slide').mouseup(function() {
     clicking = false;
    });

    $(document).mouseup(function(){
        clicking = false;
    });

    $('.slide').mousemove(function(e){
        if(clicking == true)
         {
             if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); }
             if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); }
           clicking = false;
        }
    });
    $('.slide').hover().css('cursor', 'pointer');
    rotator();  

});

Отправить