Карусель, ротатор, слайдер

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="slider">
<div class="next"></div>
<div class="prev"></div>
<div class="slides">
<div class="slide">
<img src="http://masyamba.ru/%D0%9F%D0%BB%D1%8F%D0%B6%D0%B8/2%20%D0%9F%D0%BB%D1%8F%D0%B6.jpg" />
</div>
<div class="slide">
<img src="http://masyamba.ru/%D0%9F%D0%BB%D1%8F%D0%B6%D0%B8/3%20%D0%9F%D0%BB%D1%8F%D0%B6.jpg" />
</div>
<div class="slide">
<img src="http://masyamba.ru/%D0%9F%D0%BB%D1%8F%D0%B6%D0%B8/4%20%D0%9F%D0%BB%D1%8F%D0%B6.jpg"/>
</div>
</div>
<div class="navigation"></div>
</div>
</body>
</html>

CSS

body {
margin:0;
text-align:center;
}
body .slider {
overflow:hidden; /* Скрываем всё что за блоком слайдера */
position:relative;
width:500px;
height:300px;
margin:0 auto;
}
body .slider .slides {
position:relative;
transition:1s; /* Задаем время изменения блока, отвечает за плавную прокрутку */
}
body .slider .slides .slide {
float:left;
display:block;
}
body .slider .slides .slide img{
width:500px;
height:300px;
}
body .slider .next {
position:absolute;
height:50px;
width:50px;
background:#009900;
right:0;
top:125px;
z-index:1;
cursor:pointer;
}
body .slider .prev {
position:absolute;
height:50px;
width:50px;
background:red;
left:0;
top: 125px;
z-index:1;
cursor:pointer;
}
body .slider .navigation {
position:absolute;
width:100%;
bottom:40px;
left:0;
z-index:1;
cursor:pointer;
}
body .slider .navigation .dot{
display:inline-block;
width:16px;
height:16px;
background:#666666;
cursor:pointer;
border-radius:16px;
margin:0 20px;
border:1px solid #666666;
}
body .slider .navigation .active{
background:#fff;
}

JavaScript

VAR slides = $(".slider .slides").children(".slide"); // Получаем массив всех слайдов
VAR width = $(".slider .slides").width(); // Получаем ширину видимой области
VAR i = slides.length; // Получаем количество слайдов
VAR offset = i * width; // Задаем начальное смещение и ширину всех слайдов
VAR cheki = i-1;
$(".slider .slides").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов
FOR (j=0; j < slides.length; j++) {
IF (j==0) {
$(".slider .navigation").append("<div class='dot active'></div>");
}
ELSE {
$(".slider .navigation").append("<div class='dot'></div>");
}
}
VAR dots = $(".slider .navigation").children(".dot");
offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд
i = 0; // Обнуляем номер текущего слайда
$('.slider .navigation .dot').click(FUNCTION(){
$(".slider .navigation .active").removeClass("active");              
$(THIS).addClass("active");
i = $(THIS).index();
offset = i * width;
$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
});
$("body .slider .next").click(FUNCTION(){    // Событие клика на кнопку "следующий слайд"
IF (offset < width * cheki) {    // Проверяем, дошли ли мы до конца
offset += width; // Увеличиваем смещение до следующего слайда
$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к следующему
$(".slider .navigation .active").removeClass("active");   
$(dots[++i]).addClass("active");
}
});
$("body .slider .prev").click(FUNCTION(){    // Событие клика на кнопку "предыдущий слайд"
IF (offset > 0) { // Проверяем, дошли ли мы до конца
offset -= width; // Уменьшаем смещение до предыдущегоо слайда
$(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему
$(".slider .navigation .active").removeClass("active");   
$(dots[--i]).addClass("active");
}
});