Для начала необходимо создать html разметку под слайдер.
#content — имитация блока на сайте, внутрь которого мы будем помещать сам слайдер.
#slider -блок самого слайдера
.left,.right — кнопки управления
.images — блок с картинками
.pict — дивы, которые оборачивают изображения
<div id="content"> <div id = "slider"> <div class="left"><img src="images/arrow.png"></div> <div class="right"><img src="images/arrow.png"></div> <div class="images"> <div class="pict"><img src="images/1.jpg"></div> <div class="pict"><img src="images/2.jpg"></div> <div class="pict"><img src="images/3.jpg"></div> </div> </div> </div> Далее css, в нем нет ничего сложного. Все изображения получают float:left, #slider получает позиционирование relative, чтобы кнопки управления можно было выровнять с помощью absolute. Правая кнопка поворачивается на 180 градусов, чтобы не пришлось использовать еще одну картинку стрелки.
#content { margin: 200px auto; height: 500px; width: 1000px; } #slider{ width: 100%; height: 100%; position: relative; overflow:hidden; } #slider .left,.right{ width: 50px; height: 50px; box-sizing: border-box; position: absolute; top:40%; cursor: pointer; } #slider .left{ left: 0; } #slider .right{ right: 0; } #slider .left img{ width: 50px; height: 50px; } #slider .right img{ width: 50px; height: 50px; transform: rotate(180deg); } #slider .images .pict{ float: left; } Далее jQuery, тут также нет ничего особо сложного. Основной принцип работы слайдера — смещение у .images свойства marginLeft. «Бесконечность» достигается с помощью перемещения последнего или первого слайда с помощью .prependTo и .appendTo соответственно.
В начале объявляются переменные, которым присваиваются размеры .pict и .image, с помощью .length узнается количество изображений, задается общая длина блока как (количество+1(из-за смещения))*на длину одного.
var pictW,imgW,n,pict,img,currentM,end=true; pict = $('#slider .pict'); img = $('#slider .images'); pictW = parseInt(pict.width()); n = pict.length; imgW=(n+1)*pictW; img.width(imgW); В этом фрагменте происходит перенос последнего слайда в начало, и смещение на 1 слайд в право.
$('#slider .pict:last').prependTo('.images'); currentM = -pictW; Далее код обработки нажатия на правую кнопку. Переменная end не дает листать дальше, пока не закончилась анимация. При нажатии анимировано изменяется свойство marginLeft на величину текущая минус ширина одного слайда. После выполнения анимации первый слайд переносится в конец, а marginLeft возвращается к старому значению.
$('#slider .right').click(function(event){ if(end) { end=false; currentM = currentM - pictW; img.animate({ marginLeft: currentM }, speed, function () { end = true; $('#slider .pict:first').appendTo('.images'); currentM = currentM + pictW; img.css('marginLeft',currentM); }); } }); Для левой кнопки все противоположно. Свойство marginLeft изменяется на величину текущая плюс ширина одного слайда и переносится последний слайд в самое начало ряда.
$(function () { const speed = 500; var pictW,imgW,n,pict,img,currentM,end=true; pict = $('#slider .pict'); img = $('#slider .images'); pictW = parseInt(pict.width()); n = pict.length; imgW=(n+1)*pictW; img.width(imgW); $('#slider .pict:last').prependTo('.images'); currentM = -pictW; img.css('marginLeft',currentM); $('#slider .left').click(function(event){ if(end) { end=false; currentM = currentM + pictW; img.animate({ marginLeft: currentM }, speed, function () { end = true; $('.pict:last').prependTo('.images'); currentM = currentM - pictW; img.css('marginLeft',currentM); }); } }); $('#slider .right').click(function(event){ if(end) { end=false; currentM = currentM - pictW; img.animate({ marginLeft: currentM }, speed, function () { end = true; $('#slider .pict:first').appendTo('.images'); currentM = currentM + pictW; img.css('marginLeft',currentM); }); } }); }); Главными достоинствами данного слайдера является простота и возможность встраивать неограниченное количество изображений. Спасибо за внимание.
ссылка на оригинал статьи https://habrahabr.ru/post/317902/
Добавить комментарий