Начну с того, что данная статья написана с целью рассказать о том, каким образом создается слайдер прокрутки изображений для веб-страниц. Эта статья ни в коем случае не несет обучающий характер, она лишь служит примером того, как можно реализовать наш объект рассмотрения. Код, предоставленный в этой статье вы можете использовать как некий шаблон для подобных разработок, надеюсь, что мне удастся достаточно подробно и доступно донести до читателя всю суть мною написанного.
А теперь к делу, не так давно мне нужно было поставить слайдер на один сайт, но поискав в интернете готовые скрипты я не нашел ничего путного, т.к. какие-то работали не так как мне нужно, а другие и вовсе не запускались без ошибок в консоли. Использовать jQuery – плагины для слайдера мне показалось уж слишком неинтересным, т.к. я этим хоть и решу задачу, но у меня не останется понимания о работе сего механизма, да и использовать плагин ради одного слайдера не очень-то и оптимально. Разбираться в кривых скриптах мне также было не очень-то и охота, потому я и решил написать свой собственный скрипт для слайдера, который сам и размечу как мне нужно.
Для начала нам необходимо определиться с логикой работы самого слайдера, а потом уже приступать к реализации, на этом этапе очень важно четкое понимание работы этого механизма, потому что без него нам не написать кода, работающего в точности так, как мы хотим.
Главным объектом у нас будет viewport
, то есть блок, в котором мы будем видеть, как крутятся наши картинки, в нем у нас будет slidewrapper
, это будет нашим блоком, содержащим в себе все изображения, выстроенными в одну линию, и который будет менять свою позицию внутри самого viewport
.
Далее, по бокам внутри viewport
, вертикально посередине, будут располагаться кнопки назад и вперед, при клике на которые мы также будем менять позицию нашего slidewrapper
относительно viewport
, тем самым вызывая эффект пролистывания картинок. И, наконец, последним объектом будут наши кнопочки навигации, находящиеся в нижней части viewport
.
При клике по ним, мы просто будем смотреть на порядковый номер этой кнопочки и двигать на нужный нам слайд опять же путем смещения slidewrapper
(смещение будет производиться через изменение css-свойства transform
, значение которого будет постоянно вычисляться).
Думаю, логика работы всего этого дела должна быть понятна после выше мною изложенного, но если всё же где-то возникли недопонимания, то ниже в коде все прояснится, нужно лишь немного терпения.
А теперь давайте же писать! Первым делом откроем наш index-файл и пропишем туда нужную нам разметку:
Как видим, ничего сложного, block-for-slider служит как раз таки блоком, в который наш слайдер будет помещен, внутри него уже сам viewport , в котором находится наш slidewrapper , он же вложенный список, здесь li являются слайдами, а img – картинками внутри них. Прошу обратить внимание на то, что все картинки должны быть одного размера или, хотя бы, пропорций, иначе слайдер будет криво смотреться, т.к. его размеры на прямую зависят от пропорций изображения.
Теперь нам необходимо стилизовать все это дело, обычно стили особо не комментируют, но я решил все-таки заострить на этом внимание, чтобы в дальнейшем не происходило недопонимания.
body { margin: 0; padding: 0; } #block-for-slider { width: 800px; margin: 0 auto; margin-top: 100px; } #viewport { 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; } #slidewrapper { 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; } #slidewrapper ul, #slidewrapper li { margin: 0; padding: 0; } #slidewrapper li { width: calc(100%/4); list-style: none; display: inline; float: left; } .slide-img { width: 100%; }
Начнем с block-for-slider , это, повторюсь, наш блок на странице, который мы отведем под слайдер, его высота будет зависеть от его ширины и от пропорций нашего изображения, т.к. viewport занимает всю ширину block-for-slider , то и сам slide имеет такую же ширину, а, соответственно, и картинка внутри него меняет свою высоту в зависимости от ширины (пропорции сохраняются). Этот элемент на своей странице я расположил горизонтально по середине, сверху отступил 100px, сделав его позицию более удобной для примера.
Элемент viewport
, как уже говорилось, занимает всю ширину нашего block-for-slider
, он имеет свойство overflow:hidden
, оно позволит нам скрыть нашу ленту изображений, которая вылазит за рамки viewport.
Следующее css-свойство - user-select:none
, позволяет избавится от синего выделения отдельных элементов слайдера при многочисленных кликах по кнопкам.
Переходим к slidewrapper , почему же position:relative , а не absolute ? Все очень просто, т.к. если мы выберем второй вариант, то при свойстве viewport overflow:hidden нам ни покажется ровно ничего, т.к. сам viewport не станет подстраиваться под высоту slidewrapper , из-за чего будет иметь height:0 . Почему ширина имеет такое значение и зачем мы ее вообще задаем? Дело в том, что наши слайды будут иметь ширину, равную 100% от viewport , а чтобы расставить их в линию, нам нужно место, где они будут стоять, таким образом ширина slidewrapper должна равняться 100% ширины viewport , умноженной на количество слайдов (в моем случае на 4). Что касается transition и transition-timing-function , то здесь 1s значит, что смена смена положения slidewrapper будет происходить в течении 1 секунды и мы будем это наблюдать, а ease-in-out – вид анимации, при котором она сначала идет медленно, ускоряется до середины, а после снова замедляется, здесь вы уже можете установить значения по своему усмотрению.
Следующий блок свойств задает slidewrapper и его дочерним элементам нулевые отступы, здесь комментарии излишни.
Далее мы стилизуем наши слайды, их ширина должна равняться ширине viewport , но т.к. они находятся в slidewrapper , ширина которого равна ширине viewport умноженной на кол-во слайдов, то чтобы получить ширину viewport снова, нам нужно 100% от ширины slidewrapper поделить на кол-во слайдов (в моем случае, опять же, на 4). После превратим их в строчные элементы при помощи display:inline и зададим обтекание слева, добавив свойство float:left . Про list-style:none я могу сказать, что использую его для того чтобы убрать дефолтный маркер у li , в большинстве случаев является неким стандартом.
Со slide-img все просто, картинка будет занимать всю ширину slide , slide подстроится под ее высоту, slidewrapper подстроится под высоту slide , а высота viewport в свою очередь примет значение высоты slidewrapper , таким образом высота нашего слайдера будет зависеть от пропорций изображения и размеров блока, предоставленного под слайдер, о чем я уже и писал выше.
Думаю на этом мы со стилями разобрались, сделаем пока что простой показ слайдов без кнопок, а после того, как убедимся что он исправно работает, добавим и стилизуем их.
Откроем наш js-файл , в котором и будет код слайдера, не забудьте подключить jQuery , т.к. писать мы будем при помощи этого фреймворка. Я, к слову, на момент написания статьи, использую версию jQuery 3.1.0 . Сам же файл со скриптом необходимо подключить в самом конце тега body , т.к. мы будем работать с DOM-элементами, которые необходимо инициализировать в первую очередь.
Пока что нам нужно объявить пару переменных, одна будет хранить в себе номер слайда, который мы видим в определенный момент времени во viewport , я назвал ее slideNow , а вторая будет хранить количество этих самых слайдов, это slideCount .
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
Переменной slideNow необходимо задать начальное значение 1, т.к. при загрузке страницы мы, исходя из нашей разметки, будем видеть первый слайд во viewport .
В slideCount
мы поместим количество дочерних элементов slidewrapper
, тут все логично.
Далее необходимо создать функцию, которая как раз-таки и будет отвечать за переключение слайдов справа налево, объявим ее:
function nextSlide() { }
Ее мы будем вызывать в основном блоке нашего кода, до которого мы еще доберемся, а пока что скажем нашей функции, что ей нужно делать:
function nextSlide() { if (slideNow == slideCount || slideNow slideCount) { $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; } else { translateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css({ "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", }); slideNow++; } }
Для начала мы проверяем, находимся ли мы сейчас на последнем слайде нашей ленты? Для этого мы берем количество всех наших слайдов при помощи $("#slidewrapper").children().length и сверяем его с номером нашего слайда, если они оказываются равными, то это значит что нам нужно начать показывать ленту заново, с 1 слайда, а значит меняем css-свойство transform у slidewrapper на translate(0, 0) , таким образом смещая его в исходное положение, чтобы в нашем поле зрения оказался первый слайд, не забудем также про –webkit и –ms для адекватного кроссбраузерного отображения (см. справочник по css-свойствам ). После этого не забудем обновить значение переменной slideNow , сообщив ей, что в поле зрения находится слайд номер 1: slideNow = 1;
В это же условие входит проверка на то, что номер слайда, который мы видим, находится в пределах количества наших слайдов, если же каким-то образом это не выполнится, то снова вернемся на 1-ый слайд.
Если же первое условие не выполняется, то это говорит о том, что мы на данный момент не находимся ни на последнем слайде, ни на каком-то несуществующем, а значит нам необходимо переключиться на следующий, сделаем мы это путем смещения slidewrapper влево на значение, равное ширине viewport , смещение снова будет происходить через знакомое нам свойство translate , значение которого будет равным "translate(" + translateWidth + "px, 0)" , где translateWidth – расстояние, на которое смещается наш slidewrapper . Кстати, объявим эту переменную вначале нашего кода:
var translateWidth = 0;
После перехода на следующий слайд скажем нашему slideNow, что мы видим следующий по счету слайд: slideNow++;
На данный момент у некоторых читателей может возникнуть вопрос: почему мы не заменили $("#viewport").width() на какую-нибудь переменную, например slideWidth , чтобы всегда иметь под рукой ширину нашего слайда? Ответ очень прост, если наш сайт адаптивный, то, соответсвтенно, блок, выделенный под слайдер тоже адаптивный, исходя из этого можно понять, что при изменении размеров ширины окна без перезагрузки страницы (например, поворот телефона на бок), ширина viewport изменится, а, соответсвенно, изменится и ширина одного слайда. В таком случае наш slidewrapper будет смещаться на значение той ширины, которая была изначально, а значит картинки будут отображаться частями или вовсе не отображаться во viewport . Записав в нашу функцию $("#viewport").width() вместо slideWidth мы заставляем ее при каждом переключении слайдов вычислять ширину viewport , тем самым обеспечивая при резком изменении ширины экрана докрутку до нужного нам слайда.
Впрочем-то, функцию мы написали, теперь необходимо вызывать ее через определенный интервал времени, интервал мы тоже можем хранить в переменной, чтобы при желании его изменить, поменять лишь одно значение в коде:
var slideInterval = 2000;
Время в js указывается в миллисекундах.
Теперь напишем такую конструкцию:
$(document).ready(function () { setInterval(nextSlide, slideInterval); });
Тут все проще некуда, мы через конструкцию $(document).ready(function () {}) говорим о том, что следующие действия необходимо выполнять после полной загрузки документа. Далее же мы просто вызываем функцию nextSlide с интервалом, равным slideInterval , при помощи встроенной функции setInterval .
После всех действий, которые мы выполнили выше, наш слайдер должен прекрасно крутиться, если же у вас что-то пошло не так, то проблема может быть либо в версии jQuery
, либо в неправильном подключении каких-либо файлов. Также не нужно исключать, что вы могли допустить где-либо ошибку в коде, так что могу лишь посоветовать все перепроверить.
Тем временем двигаемся дальше, добавим к нашему слайдеру такую функцию, как остановка прокрутки при наведении курсора, для этого нам необходимо прописать в основном блоке кода (внутри конструкции $(document).ready(function () {}))
такую вещь:
$("#viewport").hover(function(){ clearInterval(switchInterval); },function() { switchInterval = setInterval(nextSlide, slideInterval); });
Чтобы начать анализировать этот код, нам нужно знать, что такое switchInterval . Во-первых, это переменная, в которой хранится периодический вызов функции nextSlide, попросту говоря, мы эту строчку кода: setInterval(nextSlide, slideInterval); , превратили в эту: switchInterval = setInterval(nextSlide, slideInterval); . После этих манипуляций наш основной блок кода принял следующий вид:
$(document).ready(function () { var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function(){ clearInterval(switchInterval); },function() { switchInterval = setInterval(nextSlide, slideInterval); }); });
Здесь я использую событие hover , что означает «при наведении», это событие позволяет отследить тот момент, когда я навожу курсор на какой-либо объект, в данном случае на viewport .
После наведении я очищаю интервал, который укажу в скобках (это наш switchInterval ), далее, через запятую, я пишу, что я буду делать, когда отведу курсор обратно, в этом блоке я снова присваиваю нашему switchInterval периодический вызов функции nextSlide .
Теперь, если мы проверим, то увидим, как наш слайдер реагирует на наведение курсора, останавливая переключение слайдов.
Вот и пришло время добавлять кнопки к нашему слайдеру, начнем с кнопок вперед-назад.
Первым делом разметим их:
Поначалу данная разметка может быть непонятной, скажу сразу, что обернул эти две кнопки в один div с классом prev-next-btns просто для своего удобства, вы можете этого не делать, результат от этого не изменится, сейчас мы добавим им стили и все станет ясно:
#prev-btn, #next-btn { position: absolute; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; top: calc(50% - 25px); } #prev-btn:hover, #next-btn:hover { cursor: pointer; } #prev-btn { left: 20px; } #next-btn { right: 20px; }
Сначала мы позиционируем наши кнопки через position:absolute , тем самым будем свободно управлять их положением внутри нашего viewport , далее укажем размеры этих кнопок и при помощи border-radius закруглим углы так, чтобы эти кнопки превратились в круги. Цвет их будет белый, то есть #fff , а их отступ от верхнего края viewport будет равен половине высоты этого viewport минус половина высоты самой кнопки (в моем случае 25px), таким образом мы сможем их расположить вертикально по центру. Далее мы укажем, что при наведении на них, наш курсор изменится на pointer и, в конце концов, сообщим нашим кнопкам по отдельности, что они должны отступать от своих краев на 20px, чтобы мы могли их видеть так, как нам было бы удобно.
Повторюсь, что стилизовать элементы страницы вы можете так, как хотите, я лишь привожу пример тех стилей, которые я решил использовать.
После стилизации наш слайдер должен выглядеть примерно вот так:
Далее, снова переходим в наш js-файл
, где мы опишем работу наших кнопок. Что ж, добавим еще одну функцию, она будет показывать нам предыдущий слайд:
function prevSlide() { if (slideNow == 1 || slideNow slideCount) { translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css({ "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", }); slideNow = slideCount; } else { translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css({ "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", }); slideNow--; } }
Она называется prevSlide , вызываться она будет только при клике на prev-btn . Сначала делаем проверку на то, находимся ли мы на 1-ом слайде или нет, здесь мы также проверяем, не вышел ли наш slideNow за границы реального диапазаона наших слайдов и, в случае, если какое-то из условий сработает, перместимся на последний слайд, сместив slidewrapper на нужное нам значение. Это значение мы вычислим по формуле: (ширина одного слайда)*(кол-во слайдов – 1), все это берем со знаком минус, т.к. смещаем его влево, получается, что viewport теперь будет показывать нам последний слайд. В конце этого блока нам также нужно сказать переменной slideNow , что сейчас в нашем поле зрения находится последний слайд.
Если же мы не находимся на первом слайде, то нам нужно сместиться на 1 назад, для этого опять же меняем свойство transform у slidewrapper . Формула такая: (ширина одного слайда)*(номер текущего слайда – 2), все это, опять же, берем со знаком минус. Но почему же -2, а не -1, нам же нужно переместиться как раз таки на 1 слайд назад? Дело в том, что если мы находимся, скажем, на 2-ом слайде, то переменная x свойства transform:translate(x,0) нашего slidewrapper уже равна ширине одного слайда, если мы ему скажем, что от номера текущего слайда нужно отнять 1, то снова получим единицу, на которую уже смещен slidewrapper , поэтому нужно будет смещать на 0 этих самых ширин viewport , а значит на slideNow - 2.
Теперь нам осталось внести в основной блок кода эти строки:
$("#next-btn").click(function() { nextSlide(); }); $("#prev-btn").click(function() { prevSlide(); });
Тут мы просто отслеживаем, был ли произведен клик на наши кнопки, и в этом случае вызываем нужные нам функции, все просто и логично.
Теперь добавим кнопки навигации по слайдам, снова возвращаемся в разметку:
Как видим, внутри viewport появился вложенный список, дадим ему идентефикатор nav-btns , внутри него li – наши кнопочки навигации, им присвоим класс slide-nav-btn , впрочем-то с разметкой можно и закончить, приступаем к стилям:
#nav-btns { position: absolute; width: 100%; bottom: 20px; padding: 0; margin: 0; text-align: center; } .slide-nav-btn { position: relative; display: inline-block; list-style: none; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; margin: 3px; } .slide-nav-btn:hover { cursor: pointer; }
Блоку nav-btns , в котором находятся наши кнопочки, даем свойство position:absolute , для того, чтобы он не растянул viewport по высоте, т.к. у slidewrapper свойство position:relative , ширину в 100% мы задаем, чтобы при помощи text-align:center сцентрировать кнопки горизонтально относительно viewport , далее c помощью свойства bottom даем понять нашему блоку, что он от нижнего края должен находиться на расстоянии в 20px.
С кнопками мы делаем тоже самое, что и со слайдами, но при этом теперь задаем им display:inline-block , т.к. при display:inline они не реагируют на width и height , т.к. находятся в абсолютно позиционированном блоке. Цвет их сделаем белый и при помощи уже знакомого нам border-radius придадим им форму круга. При наведении на них поменяем вид нашего курсора для привычного отображения.
А теперь приступаем уже к jQuery – части
:
Для начала объявим переменную navBtnId, в которой будет храниться индекс кликнутой нами кнопки:
var navBtnId = 0;
$(".slide-nav-btn").click(function() { navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) { translateWidth = -$("#viewport").width() * (navBtnId); $("#slidewrapper").css({ "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", }); slideNow = navBtnId + 1; } });
Здесь мы при клике по нашему slide-nav-btn вызываем функцию, которая в первую очередь присваивает переменной navBtnId индекс кликнутой кнопки, то есть ее порядковый номер, так как отсчет начинается с нуля, то если мы кликаем на вторую кнопку, то в navBtnId записывается значение 1. Далее мы делаем проверку, где прибавляем к порядковому номеру кнопки единицу, чтобы получить такое число, будто отсчет шел не с 0, а с 1, сравниваем это число с номером текущего слайда, если они совпадают, то мы не будем предпринимать никаких действий, ведь нужный слайд уже во viewport .
Если же нужный нам слайд находится не в поле зрения viewport , то вычислим расстояние, на которое нам нужно сдвинуть slidewrapper влево, далее меняем значение css-свойства transform на translate (то самое расстояние в пикселях, 0). Это мы уже делали не раз, поэтому вопросов возникнуть не должно. В конце снова сохраняем значение текущего слайда в переменную slideNow , это значение можно вычислить, прибавив к индексу кликнутой кнопки единицу.
На этом, собственно, все, если что-то не понятно, то я оставляю ссылку на jsfiddle, где будет предоставлен весь код, написанный в материале.
Спасибо за внимание!
Теги:
- jquery slider
- css
- css3 animation
- html
Большое эффектное слайд-шоу с использованием jQuery технологий.
2. jQuery плагин «Scale Carousel»
Масштабируемое слайд-шоу с использованием jQuery. Вы сможете задать размеры для слайд-шоу, которые вам больше всего подходят.
3. jQuery плагин «slideJS»
Слайдер изображений с текстовым описанием.
4. Плагин «JSliderNews»
При наведении курсора на стрелки навигации появляется круглая миниатюра следующего слайда.
6. Симпатичный jQuery слайдер «Presentation Cycle»
jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.
7. jQuery плагин «Parallax Slider»
Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.
8. Свежий, легкий jQuery слайдер «bxSlider 3.0»
На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.
9. jQuery слайдер изображений, плагин «slideJS»
Стильный jQuery слайдер, безусловно сможет украсить ваш проект.
10. jQuery плагин слайд-шоу «Easy Slides» v1.1
Простой в использовании JQuery плагин для создания слайд-шоу.
11. Плагин «jQuery Slidy»
Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.
12. jQuery CSS галерея с автоматической сменой слайдов
Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.
13. jQuery слайдер «Nivo Slider»
Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов.
14. jQuery слайдер «MobilySlider»
Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.
15. jQuery Плагин «Slider²»
Легкий слайдер с автоматической сменой слайдов.
16. Свежий javascript слайдер
Слайдер с автоматической сменой изображений.
Плагин для реализации слайд-шоу с автоматической сменой слайдов. Есть возможность управлять показом с помощью миниатюр изображений.
jQuery CSS слайдер изображений с использованием плагина NivoSlider .
19. jQuery слайдер«jShowOff»
Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.
20. Плагин «Shutter Effect Portfolio»
Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.
21. Легкий javascript CSS слайдер «TinySlider 2»
Реализация слайдера изображений с использованием javascript и CSS.
22. Обалденный слайдер «Tinycircleslider»
Стильный круглый слайдер. Переход между изображениями осуществляется с помощью перетаскивания по окружности ползунка в виде красного круга. Отлично впишется в ваш сайт, если вы в дизайне используете круглые элементы.
23. Слайдер изображений на jQuery
Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.
24. Галерея с миниатюрами «Slider Kit»
Галерея «Slider Kit». Прокрутка миниатюр осуществляется как в вертикальном так и горизонтальном направлении. Переход между изображениями осуществляется с помощью: колеса мыши, щелчка мыши или наведения курсора на миниатюру.
25. jQuery слайдер содержимого «Slider Kit»
Вертикальный и горизонтальный слайдер контента на jQuery.
26. jQuery слайд-шоу «Slider Kit»
Слайд-шоу с автоматической сменой слайдов.
27. Легкий профессиональный javascript CSS3 слайдер
Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.
jQuery слайд-шоу с миниатюрами.
29. Простое jQuery слайд-шоу
Слайд-шоу с кнопками навигации.
30. Потрясное слайд-шоу jQuery «Skitter»
jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.
31. Слайд-шоу «Awkward»
Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.
Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.
Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.
34. «Flux Slider» слайдер на jQuery и CSS3
Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.
35. jQuery плагин «jSwitch»
Анимированная jQuery галерея.
Легкое слайд-шоу на jQuery c автоматической сменой слайдов.
37. Новая версия плагина «SlideDeck 1.2.2»
Профессиональный слайдер контента. Возможны варианты с автоматической сменой слайдо, а также вариант с использованием колеса мыши для перехода между слайдами.
38. jQuery слайдер «Sudo Slider»
Легкий сладер изображений на jQuery. Очень много вариантов реализации: горизонтальная и вертикальная смена изображений, со ссылками на номер слайда и без них, с подписями изображений и без, различные эффекты смены изображений. Есть функция автоматической смены слайдов. Ссылки на все примеры реализации можно найти на демонстрационной странице .
39. jQuery CSS3 слайд-шоу
Слайд-шоу с миниатюрами поддерживает режим автоматической смены слайдов.
40. jQuery cлайдер «Flux Slider»
Слайдер с множеством эффектов смены изображений.
41. Простой jQuery слайдер
Стильный слайдер изображений на jQuery.
42. «Craftyslide» cлайд-шоу jQuery
jQuery HTML5 cлайд-шоу, растягивающееся на всю ширину экрана со звуковым сопровождением.
Простое слайд-шоу на jQuery.
То иногда приходится решать задачи, связанные с фронтэндом, несмотря на то, что я его недолюбливаю 🙂
О моём отношению к всему, что связано с «прекрасным» вы, собственно говоря, могли оценить по дизайну данного сайта, который разрабатывался мною единолично 🙂
Однако, сравнительно недавно я столкнулся с необходимостью реализации слайдера на JavaScript, причём сделать это нужно было без каких-либо готовых библиотек и даже без всеми любимого jQuery.
Вызвана данная необходимость была тем, что в результате должен был получиться JS скрипт, который через сторонний сервис подключался бы на сайт. Следовательно, готовые карусели на JavaScript сразу отпадали, т.к. для их интеграции нужно было в HTML код сайта добавлять подключение библиотеки через тэг script и копировать сами файлы либы на сервер или тянуть их по cdn, но для этого снова потребовалось бы править код ресурса.
Как сделать JavaScript слайдер: началоСегодня, думаю, что каждый, кто попадал в похожую ситуацию, начинал с поисков имеющихся наработок, т.к. когда задача сделать JS карусель стоит в рамках работы — это всегда должно быть сделано максимально быстро. И при таких условиях сидеть и выдумывать свои велосипеды, ясное дело, никто не позволит.
Заказчикам всегда наплевать на то, как код написан, какая у него архитектура, главное — видеть результат!
В итоге, как вы поняли, перед тем, как написать слайдер на JavaScript без jQuery, я решил подыскать готовый и доработать его под свои нужды. Почему без jQuery? Да потому что на целевом ресурсе, куда я планировал подключать свой слайдер через сервис, вызов jQuery в коде был расположен позже скрипта, подключаемого сервисом. Поэтому jQuery конструкции в моём коде просто не воспринимались.
В качестве основы я взял этот JavaScript слайдер изображений — https://codepen.io/gabrieleromanato/pen/pIfoD.
Остановиться я решил именно на нём, т.к. его JS код был написан с применением принципов ООП и классы в нём основываются на прототипах, а не на банальных функциях.
Честно говоря, я глубоко не понимаю и не признаю сегодняшнюю шумиху вокруг JavaScript с использование ООП, фреймворков и прочих архитектурных штук в языке, который изначально задумывался как простенький язык динамических сценариев. Равно как и сам JS я откровенно недолюбливаю с его синтаксическим винегретом, позволяющим одни и те же конструкции писать несколькими способами.
Но, к сожалению, в современном мире мои позиции мало кто разделяет, т.к. данный язык развивается сумасшедшими темпами и предпринимает даже попытки завоевать умы бэкенд разработчиков с помощью Node.js как альтернативы Java, PHP, C#, Ruby и других монстров.
В итоге, чтобы банально не остаться без работы, приходится по-тихоньку с JavaScript разбираться. А в выбранной мною реализации слайдера на чистом JavaScript я встретил то, что, как вы поняли, презираю в данном языке. Поэтому я её и выбрал, чтобы был хоть какой-то повод поработать и разобраться с JavaScript ООП и прототипными классами — иначе я бы к ним добровольно никогда в жизни не прикоснулся бы 🙂
На базе найденного мною кода мне необходимо было разработать слайдер на чистом JS во всплывающем окне (такую штуку ещё называют popup, попап и т.д.), который имел бы кнопки переключения слайдов и кликабельные индикаторы текущего слайда. Также нужно было сделать кнопку для закрытия данного окна.
Вот, что у меня получилось в итоге.
Делаем библиотеку JS слайдераСперва я решил всё реализовать по уму и сделать JavaScript слайдер для сайта в виде библиотеки, подключаемой на сайт одним-единственным скриптом, в котором будут вызываться компоненты слайдера, разбитые по подкаталогам. Назвать её я решил popupSlider.js в честь её изначального предназначения.
Её код можно найти на GitHub по этому адресу — https://github.com/Pashaster12/popupSlider.js
Структура библиотеки вышла следующая:
Папка slides предназначена для картинок слайдов. В controls размещены картинки элементов управления JS каруселью (кнопки закрытия слайдера и переключения слайдов). А в assets — статические элементы JS слайдера: HTML разметка и файл с CSS стилями.
Ну, а файл popupSlider.js — это и есть сердце самой библиотеки, в котором прописаны действия JavaScript карусели и устанавливается связь с остальными файлами. Именно его мы и будем подключать на сайте, а он уже будет вызывать остальные.
Я решил начать с HTML разметки нашей JS карусели картинок, которая в моём случае выглядит так:
Text 1
Text 2
Text 3
Для оформления слайдера на JavaScript в виде попапа я использовал следующие стили:
#slider { margin: auto; width: 600px !important; overflow: hidden; } #slider-wrapper { width: 9999px; height: 343px; position: relative; transition: left 400ms linear; } .slide { float: left; width: 600px; position: relative; overflow: hidden; } .caption { width: 600px; height: 110px; line-height: 1.5; font-size: 15px; font-weight: 300; text-align: center; color: #000; display:table; } .caption-container { display: table-cell; vertical-align: middle; padding: 0 20px; } #slider-nav { position: absolute; bottom: -36px; text-align: center; left: 50%; transform: translateX(-50%); } #slider-nav a { width: 8px; height: 8px; text-decoration: none; color: #000; display: inline-block; border-radius: 50%; margin: 0 5px; background-color: #fafafa; } #slider-nav a.current { background-color: #337ab7; } .horizontal-controls { position: absolute; display: inline-block; width: 12px; height: 20px; top: 50%; margin-top: -10px; } #prev { background: url(../controls/arrow_left_inactive.png); left: -40px; } #prev:hover { background: url(../controls/arrow_left_active.png); } #next { background: url(../controls/arrow_right_inactive.png); right: -40px; } #next:hover { background: url(../controls/arrow_right_active.png); } #cq-popup { width: 600px; z-index: 23; left: calc(50%); top: calc(50%); position: fixed !important; background-repeat: no-repeat; background-position: right; background-color: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana"; transform: translate(-50%, -50%) scale(1); } #cq-popup .header { display: inline-block; font-size: 17px; font-weight: 500; } #cq-popup > div { width: 500px; font-size: 22px; line-height: 36px; } #cq-popup-btclose { text-decoration: none; position: absolute; right: -40px; top: 0; background: url(../controls/btn_delete_inactive.png); height: 16px; width: 16px; } #cq-popup-btclose:hover { background: url(../controls/btn_delete_active.png); } #cq-popup-bg { position: fixed; top:0; width: 100%; height: 100%; background: rgba(51,51,51,0.8); z-index: 22; }
В результате применения данных стилей JS карусель выглядит следующим образом:
И HTML разметку, и CSS стили я вынес в отдельные файлы popupSlider.html и popupSlider.css, которые расположены в директории assets библиотеки слайдера на JavaScript. Я сделал это специально, чтобы пользователи при использовании данного кода могли без проблем корректировать разметку и оформление, не лазя в JS коде, где вынесенное нужно было бы прописать напрямую.
Кроме того, многие ещё любят минимизировать JS для ускорения загрузки сайта. Так что кастомизировать данное решение при указанных условиях было бы очень сложно.
В итоге, я решил просто подключать готовые файлы в главном файле библиотеки popupSlider.js, который для моей постановки задачи принял следующий вид:
Function Slider(element) { this.loadStatic(); this.el = document.querySelector(element); this.init(); } Slider.prototype = { init: function () { this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this.el.querySelector("#prev"); this.navigate(); }, navigate: function () { var self = this; for (var i = 0; i < this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index > 1) this.prevBtn.style.display = "block"; else if (index == 1) this.prevBtn.style.display = "none"; }, setCurrentLink: function (link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
Немного комментариев по поводу приведённого кода. Содержимое файла popupSlider.js является одним JavaScript классом Slider, который, как и в PHP, содержит конструктор и методы класса. Только в JS определение конструктора, в отличие от PHP, является обязательным.
Конструктор определяется с помощью следующей конструкции:
Function Slider(element) { //код конструктора }
Внутри конструктора должны быть прописаны действия, которые будут выполняться при создании объекта класса.
Сами методы класса будут находиться внутри прототипа и будут доступны для всех экземпляров данного JavaScript класса. JS прототип в моём случае описывается следующей конструкцией:
Slider.prototype = { //методы }
Вызываться за пределами тела класса они будут следующим образом:
Var slider = new Slider(); slider.class_method();
А внутри самого кода класса доступен следующий способ:
This.class_method();
Главное только не забывать, что в JavaScript значение this зависит от контекста вызова, поэтому в телах некоторых методов, в которых нужно было вызывать методы и свойства класса, присутствует такая конструкция:
Var self = this; self.class_method(); //чтобы обратиться к методу, находящемся на уровень выше кода описываемого метода
Вроде обо всех нюансах написания кода я рассказал. Теперь пару слов о методах нашего JavaScript класса, внутри которых содержатся описания действий JS карусели картинок.
loadStatic()
Самый первый метод, вызывающийся при создании экземпляра класса в конструкторе. Отвечает за добавление в HTML кода страницы сайта HTML разметки слайдера и файла со стилями.
Сначала в памяти создаётся новый тэг link с помощью JavaScript функции document.createElement() и ему присваиваются значения всех необходимых атрибутов, в том числе и путь к CSS файлу со стилями JS слайдера. И, в конце-концов, он добавляется в HTML страницы с помощью JavaScript метода appendChild() в конец секции head, где и должны стилей.
Далее мы делаем то же самое для файла с HTML разметкой нашего слайдера на чистом JavaScript. Вот только здесь есть маленький нюанс: просто так HTML файл внутри такого же подключить нельзя, как мы сделали это с CSS файлом. Для этого есть специальные библиотеки, например, для того, чтобы подключить HTML в HTML, отлично подходит либа от w3.org — https://www.w3schools.com/howto/howto_html_include.asp
Но тогда её пришлось бы или подключать в саму библиотеку слайдера, или просить о самостоятельной её установке пользователей. Но всё это неоптимально, т.к. требует много телодвижений и замедляет скорость загрузки сайта за счёт дополнительных скриптов.
В итоге, я решил получать содержимое HTML файла внутри JavaScript кода и загружать его в новый div элемент, создаваемый в памяти, как я делал это ранее для подключения CSS файла в JavaScript. Сгенерированный элемент подключается в самый конец секции body HTML кода страницы сайта.
Если хотите вставить div с разметкой слайдера не просто в конец body, а в какой-то конкретный контейнер, то можете вместо следующего кода:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Прописать следующее, указав нужный идентификатор целевого контейнера (в моём случае HTML JS слайдера будет расположен в элементе с id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
Метод, который вызывается в конструкторе после loadStatic(), и нужен для инициализации свойств класса, соответствующих основным HTML элементам, к которым мы будем обращаться в следующем коде.
В конце вызывается метод navigate().
navigate()
В данном методе происходит указание действий, происходящих при клике на кнопки переключения слайдов и элементы навигации, расположенные под самим слайдером, в виде кружочков.
Сам JavaScript код смены слайдов для удобства я вынес в отдельный метод slide(), а в данном я только навешиваю его на событие click для каждой круглой кнопки в цикле.
При клике на кнопки «предыдущий слайд»/»следующий слайд» я, как видите, решил всего лишь эмулировать нажатие на соответствующий кружочек, определяя нужный относительно текущего, у которого имеется CSS класс current.
slide(element)
Метод, «отвечающий за магию» самой JavaScript карусели, в котором содержится код, меняющий слайды местами. В самом начале вызывается метод setCurrentLink(), о котором мы поговорим чуточку позже.
В качестве входного параметра в него передаётся объект кнопки навигации JS слайдера в виде кружочка.
Само переключение слайдов работает следующим образом:
В конце метода описано поведение для кнопок «предыдущий слайд»/»следующий слайд», оформленных в виде стрелок влево/вправо соответственно. Если текущий слайд — первый из всего списка, то кнопка перехода к предыдущему слайду скрывается. Если последний, то убираем кнопку перехода к следующему слайду.
setCurrentLink(link)
Данный метод нашего класса JavaScript слайдера отвечает за подсветку навигационной круглой кнопки, соответствующей текущему элементу. Т.е. если у нас выбран второй слайд, то будет подсвечиваться вторая кнопочка.
В качестве входного параметра в функцию передаётся объект кнопки, которая должна быть выделена как текущая.
Логика выделения текущего элемента проста:
Самый последний метод класса, в котором определяется действие при нажатии на кнопку закрытия слайдера в виде крестика. Здесь, собственно говоря, код самый понятный из всего, содержащегося в классе JS слайдера.
При нажатии на кнопку закрытия, доступ к которой получается по её идентификатору, происходит удаление со страницы элемента слайдера и элемента, задающего полупрозрачный фон. Они также, в свою очередь, получаются по уникальным идентификаторам.
Сам метод вызывается внутри описанного ранее navigate(), который содержит в себе все сценарии действий, происходящих на нашем JavaScript слайдере.
Кстати, если вы захотите сделать закрытие слайдера при клике за его пределами, то достаточно в данный метод добавить следующий код:
Document.getElementById("cq-popup-bg").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove();
JavaScript слайд шоу на базе разработанной библиотекиИногда на практике может потребоваться сделать JS карусель с прокруткой, которую часто называют слайд шоу. В моём случае этого не требовалось, но я всё же решил сделать такую на базе итогового кода библиотеки для случая, когда это может пригодиться.
На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.
SlideShow: function (timeout) { var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); }, timeout); }
Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.
Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().
Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.
Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):
Self.slideShow(2000);
После этого проверяйте работу JavaScript слайдера, не забыв при этом почистить и браузера.
По идее, всё должно работать. Если нет — изучайте ошибки в консоли браузера и делитесь ими в комментариях.
В итоге, у нас получилось JS слайд шоу, в котором слайды переключаются автоматически и по кругу, т.е. при достижении последнего слайда шоу переходит на новый цикл, и показ снова начинается с самого первого элемента.
При работе с различными библиотеками JS каруселей картинок и отзывов я заметил, что данную практику разработчики активно применяют, но с некоторым дополнением. Во всех увиденных мною решениях автоматический показ слайдов прерывается, если пользователь сделал ручное переключение. Поэтому я решил сделать подобное и в своей библиотеке.
Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.
В итоге, получился следующий код, который я решил не оформлять отдельным методом:
ClearInterval(self.slideCycle);
И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:
Link.addEventListener("click", function (e) {...}); self.prevBtn.addEventListener("click", function (e) {...}); self.nextBtn.addEventListener("click", function (e) {...});
Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.
Интеграция JavaScript слайдера на сайтИтак, наш слайдер на чистом JS готов. Осталось теперь только подключить его на сайт.
Для этого необходимо выполнить последовательно следующие шаги, которые являются стандартными действиями при интеграции каких-либо сторонних JavaScript библиотек вообще.
Шаг 1
. Копируем файлы библиотеки к себе на сайт в отдельный каталог.
Шаг 2
. Добавляем следующий код в HTML страниц, на которых необходимо будет отображение слайдера, разместив его перед закрывающимся тэгом body:
Шаг 3 . Размещаем следующий код вызова JS карусели в каком-либо существующем JavaScript файле, который подключается на странице после подключения самого слайдера:
Var aSlider = new Slider("#slider");
Как видите, данный код, — это, по сути, создание объекта класса Slider, который содержится в popupSlider.js. Именно поэтому его вызов должен быть только после подключения самого файла класса на страницу.
Добавление новых слайдов в JavaScript карусельЗдесь всё очень просто. Поскольку слайды у нас берутся из отдельной директории библиотеки slides , то при добавлении новых картинок нужно будет просто закинуть в неё нужные файлы, задав им предварительно такой же размер, как и у других.
А затем в коде файла assets/popupSlider.html добавить новый блок в контейнер с id slider-wrapper :
Text
В принципе, можете просто скопировать аналогичный существующий и изменить в нём путь к файлу изображения и текст подписи (если она вообще будет нужна).
Также необходимо будет добавить новый элемент навигации в виде кружочка, т.к. на данный момент автоматическое его добавление пока не реализовано. Для этого нужно будет добавить следующий код в контейнер с id slider-nav , прописав его в самом конце:
Значение атрибута data-slide должно быть больше самого большого у остальных элементов. Достаточно всего лишь увеличить максимальное текущее на единицу.
Упаковка JS карусели в единый скриптВсё, слайдер на JavaScript готов и подключен. Я лично рекомендую использовать данный вариант на практике, если он вам вообще пригодится 🙂
Для ускорения работы его, кстати, можете ещё дополнительно сжать статические компоненты: CSS, HTML и JavaScript файлы. Я не стал этого делать и предлагать вам минифицированный код, потому что систем сборок фронтэнда сейчас очень много: Gulp, Grunt, Webpack и другие. И у каждой из них свои алгоритмы сжатия и подключения файлов.
К тому же, минифицированные результаты на разных ОС могут работать по-разному. В общем, причин много.
Да и сами исходники у меня вышли, я считаю, не такие уж тяжеловесные, что нуждаются в данной процедуре. Но если же вам они будут необходимы, то настройте минификацию самостоятельно с учётом вашей ОС и сборщика.
Как я писал в самом начале, для решения поставленной мне изначально задачи нужно было получить единый JS файл для корректного использования моего слайдера через сторонний сервис на сайте. По этой причине я, собственно говоря, и не стал пользоваться готовыми сторонними библиотеками.
Тогда вариант единого скрипта JavaScript карусели вам придётся как нельзя кстати, т.к. весь контент будет содержаться прямо в нём, в том числе и HTML/CSS код, который в случае библиотеки хранится в отдельных файлах.
Скрипт в моём случае состоит из двух частей. В первой части располагалось содержимое файла popupSlider.js, которое я второй раз не буду приводить. Вставьте его самостоятельно, убрав из кода класса описание метода loadStatic() и его вызов, т.к. они нам не понадобятся.
Вторая же часть единого скрипта JavaScript слайдера для сайта представляет собой обработчик события DOMContentLoaded, которое наступает при загрузке содержимого страницы.
Там у нас будет происходить добавление на страницу HTML/CSS кода JS карусели и создание объекта класса Slider, что равносильно активации самого слайдера.
Схематично код выглядит следующим образом:
/* содержимое popupSlider.js без описания метода loadStatic() и его вызова */ document.addEventListener("DOMContentLoaded", function(){ var str = "\ \ /*css код*/ \ /* html код */ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Поскольку в моём случае вариант загрузки файлов на сервер был вообще закрыт, мне пришлось загрузить файлы картинок элементов управления JavaScript каруселью на облако и вместо путей к ним в HTML и CSS коде прописать ссылки, сгенерированные при сохранении.
Если у вас таких сложностей нет, то можете ничего не менять, но не забыть скопировать каталоги slides и controls библиотеки на сервер и указать правильные пути к ним.
Самописный JS слайдер — перспективы развитияЧестно скажу, что заниматься целенаправленной поддержкой и развитием созданного мною решения я заниматься не планирую 🙂 На данный момент подобных слайдеров существует вагон и маленькая тележка, которые, в отличие от моего имеют свою историю, тщательно оттестированы и поддерживаются обширным комьюнити пользователей и разработчиков.
Мне же начинать весь этот путь с нуля в одиночку и создавать ещё один велосипед как-то не интересно, да и времени на это толком нет. Но, зато данный JavaScript слайдер является отличной возможностью попрактиковаться в разработке путём рефакторинга его кода и реализации новых интересных функций, которых, возможно, на данный момент ещё нет.
Так что если вам, как и мне, нужна будет кодовая база для экспериментов и вы располагаете хоть каким-то лишним свободным временем — копируйте себе код описанного мною JavaScript слайдера или присоединяйтесь к контрибьюторам на GitHub. Репозиторий открытый, а ссылку на него я предоставил в начале статьи.
Если вы хотите прокачать свои фронтэнд скилы на моём творении, могу вам даже подкинуть небольшой список правок и доработок, в которых нуждается код и которые, возможно, будут интересны вам в плане их реализации:
Приведённый мною список правок, естественно, не конечный и может быть дополнен. Пишите о своих предложениях, мыслях и пожеланиях в комментариях под статьёй и делитесь со своими друзьями через социальные сети, чтобы их также привлечь к разработке.
Прошу мой код строго не судить, т.к., я как я уже говорил, Frontend спецом я себя не считаю и не являюсь. Также я открыт для всех ваших замечаний по стилю кодирования и надеюсь, что смогу что-то у вас перенять, а вы — у меня, т.е. выполнить основное предназначение разработки и поддержки OpenSource продукции.
Вступайте в сообщества проекта, подписывайтесь на обновления и можете даже помочь мне материально с помощью формы прямо под самой статьёй, если я чем-то смог вам помочь или вам просто нравится то, чем я занимаюсь 🙂
У меня всё! Всем добра! 🙂
Сегодня мы рассмотрим как можно сделать слайдер на jQuery своими руками.
Слайдер (или как некоторые его называют Ротатор) - это блок на сайте, который состоит из набора картинок со ссылками (и возможно текстом), которые время от времени меняют друг друга.
Итак. Для начала нам нужно сделать блок, который будет содержать все картинки (назовём его viewport, так сказать «область видимости слайдера»).
В него положим ненумерованный список (ul) для того, чтобы можно было удобно хранить все слайды в одном месте (в принципе можно использовать любой блочный контейнер с поддержкой внутренних элементов).
Ну и соответсвенно сами слайды, которые будут находится в слайдер на jQuery.
Вот такой вот HTML должен получится:
- Slide 1
- Slide 2
- Slide 3
Сразу пропишем CSS, чтобы свёрстанный HTML правильно работал.
Итак:
1) нам нужно сделать так, чтобы viewport показывал только нужный в данный момент контент, а остальные слайды были скрыты
2) чтобы контейнер для слайдов (ul, который лежит внутри viewport) мог спокойно двигаться влево и вправо
3) чтобы слайды (которые у нас сделаны в виде элементов списка располагались друг за другом слева направо).
Вот CSS, с ним всё просто: overflow:hidden для vieport, position: absolute для ul и float: left для li.
Viewport{ width: 300px; height: 100px; overflow: hidden; position: relative; } .slidewrapper{ position: absolute; left: 0; top: 0; height: 100px; margin: 0; padding: 0; } .slide{ width: 300px; height: 100px; float: left; list-style: none; margin: 0; padding: 0; background: #ff0000; } .second{ background: #00ff00; } .third{ background: #0000ff; }
Для примера выбарны размеры viewport и слайдов 300х100 пикселей (но они обязательно должны совпадать у vieport и слайда). Классы first, second и third - используются только для того, чтобы задать цвета слайдов для наглядности, в вашей реализации этих классов может и не быть.
JS. Слайдер на jQueryТеперь перейдём к jQuery коду, который сам по себе также не представляет из себя ничего сверх-сложного.
Нам нужно сделать так, чтобы слайды пролистывались с определённым периодом времени (javascript setInterval), и чтобы при наведении на слайд, движение приостанавливалось (чтобы человек мог прочитать содержимое слайда).
Вот и получаем такой вот jQuery код:
Var slideWidth=300; var sliderTimer; $(function(){ $(".slidewrapper").width($(".slidewrapper").children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $(".viewport").hover(function(){ clearInterval(sliderTimer); },function(){ sliderTimer=setInterval(nextSlide,1000); }); }); function nextSlide(){ var currentSlide=parseInt($(".slidewrapper").data("current")); currentSlide++; if(currentSlide>=$(".slidewrapper").children().size()) { currentSlide=0; } $(".slidewrapper").animate({left: -currentSlide*slideWidth},300).data("current",currentSlide); }
По порядку:
1) объявляем переменную = длинне слайда
2) объявляем переменную-хендлер таймера (который будет отсчитывать период смены слайдов)
3) когда страница загрузится запускаем таймер и привязываем действия на наведение мышки на слайд (чтобы приостановить движение слайдов под мышкой)
4) ставим длинну ul-контейнера = длинне слайда*на количесвто слайдов (чтобы слайды не перекидывались на 2-рую строку).
5) пишем функцию, которая и делает смену слайдов (проверяем где сейчас находимся - на каком слайде, при помощи аттрибута data-current ul-контейнера; увеличиваем текущую позицию; проверяем, чтобы не вылезала за рамки всех слайдов; смещаем слайдер-контейнер влево на нужное количество пикселей).
Мы разработали рабочий вариант слайдер на jQuery, который работает, и можно легко применить в работе над сайтом.
На последок код выложен на jsfiddle.net, где можно поклацать и поиграться.
http://jsfiddle.net/FUxWc/
Если будут вопросы - комменты открыты, ответим, поможем, подскажем.
Приветствую вас вновь на моем блоге. Сегодня в css благодаря новым селекторам появилась возможность делать слайдер без скриптов. Итак, в этой статье я покажу вам, как сделать адаптивный слайдер на css3?
План урокаИтак, сегодня я очень подробно покажу вам, как создать свой слайдер без скриптов, адаптировать его под любые устройства и легко менять в будущем его внешний вид, а также добавлять новые слайды. Мы сделаем всего 3 слайда, которые будут переключаться вручную при клике на кнопки. Что ж, приступим!
Разметка слайдераВ первую очередь необходимо понять, какой будет разметка. На этом скриншоте вы можете увидеть мой пример разметки, по ней и я буду сегодня работать.
Также я продублирую все это кодом, чтобы вы могли скопировать и вставить себе.
Первым делом нужно создать кнопки переключатели слайдов. Поскольку слайда будет три, то столько же нужно и кнопок:
Каждая получает свой, уникальный идентификатор, а одна выбрана по умолчанию.
Последний кусок кода, который нам нужен. Он выводит подписи к кнопкам, но на самом деле мы используем их для того, чтобы скрыть кнопки по умолчанию (радио кнопки не оформляются через стили) и вместо них поставить эти блоки-подписи, которые можно оформить. Именно они и будут служить кнопками-переключателями, а связка с radio-кнопками делается через специальный атрибут for .
А теперь весь этот код нужно обернуть в один общий контейнер. Пусть это будет блок с классом wrap .
Начинаем создавать слайдер — первоначальные стили для страницыИтак, для начала мы зададим общие стили, которые помогут сбросить все отступы по умолчанию, а заодно и сделать так, чтобы внутренние отступы и рамки учитывались в ширине элементов. Это делается так:
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
К слову, * — означает все селекторы. То есть такой универсальный и глобальный селектор.
Оформляем контейнер. Именно сам блок, который содержит в себе все 3 наши важные части — кнопки, слайды и подписи.
Ширину и высоту вы можете выставлять ЛЮБУЮ , в зависимости от того, каких размеров будут ваши фотографии для слайдов. Я заранее обрезал фотографии до размеров 600 на 350 пикселей, поэтому и указываю такие размеры. Margin: 0 auto выравняет контейнер ровно по центру страницы, а относительное позиционирование позволит точно разместить кнопки в самом контейнере позднее.
Оформляем слайдер и слайдыВначале вот такие стили:
Slider { background-color: #999; height: inherit; overflow: hidden; position: relative; width: inherit; }
Укажем слайдеру такие же ширину и высоту, как и общему контейнеру. Также указываем цвет и позиционирование, а свойство overflow: hidden обрезает все, что не попадает в блок.
Следующим делом нужно оформить сами слайды:
Slides { height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; } .auto1 { background-image: url(bmw.jpg); } .auto2 { background-image: url(audi.jpg); } .auto3 { background-image: url(porshe.jpg); }
Также указываем ширину и высоту как и у слайда. Значение inherit позволяет наследовать значение родительского блока. С помощью свойств z-index и opacity мы сделаем наши картинки невидимыми. Ниже мы четко прописываем фоновые изображения.
Пока что мы ничего не увидим, только серый фон, потому что наши изображения скрыты.
Теперь нужно убрать стандартные радио-кнопки и вместо них стилизовать подписи.
Wrap > input { display: none; }
Убираем радио-кнопки.
Wrap .control { position: absolute; margin-left: -50px; left: 50%; }
С помощью этих стилей мы отцентрируем блок с кнопками по центру.
Wrap label { cursor: pointer; display: inline-block; height: 25px; margin: 10px; position: relative; width: 25px; border: 2px solid grey; border-radius: 30%/10px; }
Эти стили делают очень важное дело — они позволяют нам оформить кнопки. Нужно задать размеры кнопок, установить для них блочно-строчный тип, отступы и серую рамку. Еще можно добавить скругление углов.
Теперь у нас есть три кнопки по центру ниже слайдов, это просто серые рамки. Давайте сделаем так, чтобы при клике по кнопке в ней появлялось какое-нибудь изображение, свидетельствующее о том, что кнопка активна в данный момент. Кстати, такой же прием, только с чекбоксами, я показываю в .
Поскольку мы с вами переключаем изображения автомобилей, я нашел в сети иконку руля, уменьшил ее до размеров примерно 20 на 20. Теперь дело замалым — добавлять фоновое изображение кнопке, если на нее кликнули.
#point1:checked ~ .control label:nth-of-type(1), #point2:checked ~ .control label:nth-of-type(2), #point3:checked ~ .control label:nth-of-type(3) { background: url(wheel.png) no-repeat 50% 50%; }
Это делается с помощью таких селекторов. Что они делают? По сути, это сложный селектор, в нем записано целое условие. Это чем-то похоже на программирование. Он обозначает следующее: если радио-кнопка выбрана, то нужно применить стиль к подписи, которая идет где-то дальше в разметке. Теперь при клике на кнопки у них внутри появляется изображение руля!
На самом деле нам осталось сделать совсем чуть-чуть. А именно, сделать так, чтобы вместо серой области в слайдере появились изображения с автомобилями, которые бы успешно перелистывались. Для этого нужно применить еще одни сложные селекторы:
#point1:checked ~ .slider > .auto1, #point2:checked ~ .slider > .auto2, #point3:checked ~ .slider > .auto3 { opacity: 1; z-index: 1; }
Что происходит? Сейчас, если вы попробуете слайдер в действии, он будет полностью рабочим. Этими селекторами мы указываем следующее: если нажата радио-кнопка, сделай видимым нужный слайд, который лежит где-то дальше в html-коде (дальше радио-кнопок).
Таким образом, при клике на первую кнопку, нам показывается автомобиль BMW, при клике на вторую — Audi, при клике на третью — Porshe. А еще все это время при переключении иконка руля появляется в той кнопке, слайд для которой активен.
Итак, мы сделали слайдер. Осталось его адаптировать.
Пока наш слайдер имеет фиксированную ширину в 600 пикселей. Соответственно, на экранах меньше этой ширины начнут возникать проблемы. В частности, появится горизонтальная полоса прокрутки. Чтобы этого избежать, нам совсем чуть-чуть нужно подправить уже написанный код. Вот что нужно изменить:
Итого все изменения можно увидеть в этом коде:
Wrap{ max-width: 600px; } .slider{ width: 100%; }
Отлично, теперь осталось прописать пару медиа-запросов, чтобы сделать слайдер полностью адаптивным, а также масштабировать изображения под новые экраны. Экспериментальным путем я выяснил, что картинка-слайд начинает не помещаться на экране примерно при ширине окна в 600 пикселей. Значит, примерно на этом участке и нужно сделать изменение стилей. Для этого напишем первый медиа-запрос.
Кстати, подробно о медиа-запросах и их применении я написал . Советую ознакомиться с ней тем, у кого нет никакого представления об адаптивном дизайне.
Соответственно, чтобы на ширине 650 пикселей и меньше все отображалось хорошо, я предлагаю такое изменение стилей:
@media screen and (max-width: 650px){ .wrap{ max-width: 480px; height: 280px; } .slides{ background-size: cover; } }
Ширина самого слайдера уменьшится, также уменьшится и высота. Для самих слайдов мы прописали свойство, которое масштабирует изображения так, чтобы они сохраняя свои пропорции полностью помещались в слайдер, не обрезаясь при этом.
Отлично, теперь вы можете проверить и убедиться, что при ширине менее 650 пикселей слайдер трансформируется и выглядит хорошо, не обрезая картинку.
Последняя точка — ширина примерно в 400 пикселей. На ней наша картинка опять начинает не помещаться и нужно предпринимать меры. Для этого напишу еще один медиа-запрос:
@media screen and (max-width: 400px){ .wrap{ max-width: 320px; height: 180px; } .slides{ background-size: cover; } }
Все то же самое, только вновь уменьшаем ширину и высоту контейнера. Отлично, теперь наш слайдер полностью адаптивный! Даже на мобильном телефоне с шириной 320 пикселей он будет смотреться отлично. Впрочем, смотрите сами:
Благодаря медиа-запросам изображения пропорционально уменьшаются, сохраняя свои пропорции.
Добавляем слайдеру эффекты при переходахМожно прописать слайдам какой-нить эффект при переходах (.slides), а при появлении изображения отменять действие эффекта. Чтобы увидеть результат, вам нужно обязательно задать слайдам свойство transition , чтобы переходы были плавными. Пример эффекта:
Slides{ transform: rotate(50deg); transition: 1s; }
Теперь достаточно селектору, который делает слайд видимым, прописать отмену трансформации:
#point1:checked ~ .slider > .auto1{ transform: none; }
И так сделать для всех слайдов. Соответственно, изначально изображение будет повернуто и будет невидимо, а при его появление будет возникать эффект плавного возвращения в исходное положение. Соответственно, вы можете придумать свои эффекты. Что ж, слайдер мы сделали, на этом у меня все. Если у вас есть вопросы, жду в комментариях.
Как сделать так, чтобы при клике по слайду происходил переход по привязанной к слайду ссылке?Иными словами, сейчас у нас просто картинки, а как сделать их кликабельными. Для этого у вас уже должен быть готовый слайдер по этому уроку. Далее вам в html-коде нужно найти кусок, отвечающий за сами слайды. Вот он на скриншоте:
Как видите, я вставил внутрь первого и второго слайда ссылки. Итак, при клике на первый слайд произойдет переход на Гугл, при клике на второй — на Яндекс. Хочу отметить, что ссылка будет открываться в этом же окне, то есть текущая страница со слайдером в таком случае исчезнет. Если вам нужно открывать ссылки со слайдов в новом окне, в каждый тег необходимо добавить атрибут target = "_blank".
Но это не все, что нужно сделать! Сейчас еще ничего не работает, чтобы картинки стали кликабельны, нужно добавить в css вот что:
Slides a{ display: block; width: 100%; height: 100%; }
То есть для всех слайдов делаем ссылку блочным элементом, и указываем ей ширину и высоту 100%, чтобы она занимала все пространство картинки. Теперь все должно работать, можете проверить. Просто замените адреса в ссылках и можно пользоваться.
Альтернативный css3 слайдер на анимационных эффектахДругой пример css3 слайдера. В этот раз мы сделаем его за счет анимации. В целом, это получится даже проще, чем первым способом.
Создание слайдера с помощью keyframesНачать нужно с html-разметки. В этом случае она будет совсем простой, всего один блок с идентификатором:
Для слайдов я подготовил 3 картинки одинаковых размеров. В моем случае получилось 448 пикселей в ширину и 251 в длину. Это размеры картинок. Я рекомендую вам, чтобы все размеры были одинаковы, тогда вообще никаких проблем с нашим слайдером не будет.
Я задал ему размеры такие же, как у каждой картинки, сделал по центру родительского блока, а также уже задал в качестве фона первую картинку. Теперь все выглядит так:
У нас просто фоновая картинка в блоке, и больше ничего. Для простоты я сохранил картинки, которые использую в этом примере под названиями 1, 2 и 3.
А вот теперь начинается самое интересное. Самое время прописать ту самую анимацию, которая заставит фоновое изображение изменяться. Это делается с помощью конструкции @keyframes .
@keyframes slider{ 0%{ background: url(1.jpg);} 33%{ background: url(2.jpg);} 66%{ background: url(3.jpg);} }
Давайте подробнее рассмотрим этот кусок кода. К слову, его нужно поместить в css-файл. После ключевого слова @keyframes идет имя анимации, оно может быть абсолютно любым, но в нем могут быть только латинские символы. Далее открываются фигурные скобки и уже в них записывается каждый отдельный анимационный эффект.
Что же мы тут видим? Во-первых, сначала указывается временной отрезок в анимации, а потом в фигурных скобках пишутся свойства, которые должны применяться в этот момент. Мы как бы говорим браузеру, что в самом начале анимации фоном должно быть изображение 1.jpg , далее на трети выполнения анимации оно должно быть изменено на 2.jpg , ну и ближе к концу опять на другое изображение.
