123

body { margin:0; text-align:center; } body .slider { overflow:hidden; /* Скрываем всё что за блоком слайдера */ position:relative; width:100%; height:500px; margin:0 auto; } body .slider .slides { position:relative; transition:1s; /* Задаем время изменения блока, отвечает за плавную прокрутку */ } body .slider .slides .slide { float:left; display:block; } body .slider .slides .slide img{ max-width:730px; height:500px; } body .slider .next { position:absolute; height:50px; width:50px; background:#009900; right:0; top:225px; z-index:1; cursor:pointer; } body .slider .prev { position:absolute; height:50px; width:50px; background:#009900; left:0; top:225px; z-index:1; cursor:pointer; } $(document).ready(function() { // Ждём загрузки страницы var slides = $(".slider .slides").children(".slide"); // Получаем массив всех слайдов var width = $(".slider .slides").width(); // Получаем ширину видимой области var i = slides.length; // Получаем количество слайдов var offset = i * width; // Задаем начальное смещение и ширину всех слайдов i--; // уменьшаем кол-во слайдов на один ( для проверки в будущем ) $(".slider .slides").css('width',offset); // Задаем блоку со слайдами ширину всех слайдов offset = 0; // Обнуляем смещение, так как показывается начала 1 слайд $("body .slider .next").click(function(){ // Событие клика на кнопку "следующий слайд" if (offset 0) { // Проверяем, дошли ли мы до конца offset -= width; // Уменьшаем смещение до предыдущего слайда $(".slider .slides").css("transform","translate3d(-"+offset+"px, 0px, 0px)"); // Смещаем блок со слайдами к предыдущему } }); });