Главная / Программы / Простой слайдер с превью jquery. Простой слайдер с кнопками управления вперед и назад

Простой слайдер с превью jquery. Простой слайдер с кнопками управления вперед и назад

Начну с того, что данная статья написана с целью рассказать о том, каким образом создается слайдер прокрутки изображений для веб-страниц. Эта статья ни в коем случае не несет обучающий характер, она лишь служит примером того, как можно реализовать наш объект рассмотрения. Код, предоставленный в этой статье вы можете использовать как некий шаблон для подобных разработок, надеюсь, что мне удастся достаточно подробно и доступно донести до читателя всю суть мною написанного.

А теперь к делу, не так давно мне нужно было поставить слайдер на один сайт, но поискав в интернете готовые скрипты я не нашел ничего путного, т.к. какие-то работали не так как мне нужно, а другие и вовсе не запускались без ошибок в консоли. Использовать 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() { }

Ее мы будем вызывать в основном блоке нашего кода, до которого мы еще доберемся, а пока что скажем нашей функции, что ей нужно делать:

Для начала мы проверяем, находимся ли мы сейчас на последнем слайде нашей ленты? Для этого мы берем количество всех наших слайдов при помощи $("#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-файл , где мы опишем работу наших кнопок. Что ж, добавим еще одну функцию, она будет показывать нам предыдущий слайд:

Она называется 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, в которой будет храниться индекс кликнутой нами кнопки:

Здесь мы при клике по нашему slide-nav-btn вызываем функцию, которая в первую очередь присваивает переменной navBtnId индекс кликнутой кнопки, то есть ее порядковый номер, так как отсчет начинается с нуля, то если мы кликаем на вторую кнопку, то в navBtnId записывается значение 1. Далее мы делаем проверку, где прибавляем к порядковому номеру кнопки единицу, чтобы получить такое число, будто отсчет шел не с 0, а с 1, сравниваем это число с номером текущего слайда, если они совпадают, то мы не будем предпринимать никаких действий, ведь нужный слайд уже во viewport .

Если же нужный нам слайд находится не в поле зрения viewport , то вычислим расстояние, на которое нам нужно сдвинуть slidewrapper влево, далее меняем значение css-свойства transform на translate (то самое расстояние в пикселях, 0). Это мы уже делали не раз, поэтому вопросов возникнуть не должно. В конце снова сохраняем значение текущего слайда в переменную slideNow , это значение можно вычислить, прибавив к индексу кликнутой кнопки единицу.

На этом, собственно, все, если что-то не понятно, то я оставляю ссылку на jsfiddle, где будет предоставлен весь код, написанный в материале.

Спасибо за внимание!

Теги:

jquery slider
css
css3 animation
html

Добавить метки

Простой, легкий (21Кб в сжатом виде) слайдер, написанный на чистом Javascript, не имеющий никаких зависимостей, т.е. работает без jQuery.

Протестирован в следующих браузерах:

Chrome 26.0
Firefox 20.0
Safari 5.1.7
IE 10
Opera 16.0

Есть неполная поддержа IE8/9 (нет эффектов).

Особенности

Вы можете добавить на страницу неограниченное количество слайдеров, даже разместить один в другом.
Изменяет размеры с зависимости от содержимого, но можно и запретить.
Навигация с помощью клавиатуры - когда курсор находится на слайдере, можно переключать слайдеры с стрелками.
Поддержка мобильных touch событий.

Подключение

Перед закрывающимся тегом необходимо подключить slidr.js или slidr.min.js файл.

HTML разметка

slidr.js может работать с любыми inline , inline-block , block элементами, имеющими аттрибут id . Допускается использовать любые дочерние элементы первого уровня с атрибутом data-slidr , например:

apple
banana
coconut

apple banana coconut

Javascript

После подключения slidr.js станет доступен глобальный объект slidr . Самый простой способ создания slidr:

Slidr.create("slidr-id").start();

Вызов с заданием всех настроек:

Slidr.create("slidr-id", { after: function(e) { console.log("in: " + e.in.slidr); }, before: function(e) { console.log("out: " + e.out.slidr); }, breadcrumbs: true, controls: "corner", direction: "vertical", fade: false, keyboard: true, overflow: true, theme: "#222", timing: { "cube": "0.5s ease-in" }, touch: true, transition: "cube" }).start();

Настройки

Все доступные настройки для slidr.js приведены в таблице ниже.

Параметр Тип По умолч. Description

after	function		callback-функция после смены слайда
before	function		callback-функция до смены слайда
breadcrumbs	bool	false	Показать хлебные крошки для управления слайдами. true или false .
controls	string	border	Расположение стрелок для управления слайдами. border , corner or none .
direction	string	horizontal	Направление по умолчанию для новых слайдов. horizontal или h , vertical или v .
fade	bool	true	Включить эффект затемнения для смены слайдов (fade-in/out). true или false .
keyboard	bool	false	Включить смену сладов с помощью клавиатуры. true или false .
overflow	bool	false	Включить overflow для блока со слайдером. true или false .
pause	bool	false	Не менять слайды автоматически при наведении мыши (необходимо запустить auto()). true или false .
theme	string	#fff	Цвет элементов управления слайдером (хлебных крошек и стрелок). #hexcode или rgba(value) .
timing	object	{}	Custom animation timings to apply. {"transition": "timing"} .
touch	bool	false	Задействовать touch управление на мобильных устройствах. true или false .
transition	string	linear	Эффект смены слайдов. cube , linear , fade или none .

Функции обратного вызова after и before получают следующие данные:

{ id: "slidr-id", in: { el: #, slidr: "data-slidr-in", trans: "transition-in", dir: "direction-in" }, out: { el: #, slidr: "data-slidr-out", trans: "transition-out", dir: "direction-out" } }

Slider.js global API

Глобальное пространство имен slidr предоставляет следующие функции:

/** * Текущая версия * @return {string} major.minor.patch. */ function version() {}; /** * Доступные эффекты перехода. * @return {Array} of transitions. */ function transitions() {}; /** * Создаёт и возвращает Slidr. * Вызов этой функции дважды на одном и том же элементе возвратит уже созданный объект Slidr. * @param {string} id элемента для Slidr. * @param {Object=} opt_settings Настройки для слайдера. */ function create(id, opt_settings) {};

Slider API // Инициализация Slidr со своими настройками var s = slidr.create("slidr-api-demo", { breadcrumbs: true, overflow: true }); // Добавить горизонтальные слайды со стандартным эффектом перехода. // дублирующий элемент массива "one" в конце позводяет Slidr // прокручивать слайды бесконечно s.add("h", ["one", "two", "three", "one"]); // Добавляет вертикальный слайд с эффектом перехода "куб". s.add("v", ["five", "four", "three", "five"], "cube"); // Запуск слайдера. s.start();

Короткая запись

Var s = slidr.create("slidr-api-demo", { breadcrumbs: true, overflow: true }).add("h", ["one", "two", "three", "one"]) .add("v", ["five", "four", "three", "five"], "cube") .start();

Полный список функци API Slidr.js представлен ниже

/** * Start the Slidr! * Automatically finds slides to create if nothing was added prior to calling start(). * @param {string} opt_start `data-slidr` id to start on. * @return {this} */ function start(opt_start) {}; /** * Check whether we can slide. * @param {string} next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return {boolean} */ function canSlide(next) {}; /** * Slide! * @param {string} next a direction ("up", "down", "left", "right") or a `data-slidr` id. * @return {this} */ function slide(next) {}; /** * Adds a set of slides. * @param {string} direction `horizontal || h` or `vertical || v`. * @param {Array} ids A list of `data-slidr` id"s to add to Slidr. Slides must be direct children of the Slidr. * @param {string=} opt_transition The transition to apply between the slides, or uses the default. * @param {boolean=} opt_overwrite Whether to overwrite existing slide mappings/transitions if conflicts occur. * @return {this} */ function add(direction, ids, opt_transition, opt_overwrite) {}; /** * Automatically advance to the next slide after a certain timeout. Calls start() if not already called. * @param {int=} opt_msec The number of millis between each slide transition. Defaults to 5000 (5 seconds). * @param {string=} opt_direction "up", "down", "left", or "right". Defaults to "right". * @param {string=} opt_start The `data-slidr` id to start at (only works if auto is called to start the Slidr). * @return {this} */ function auto(opt_msec, opt_direction, opt_start) {}; /** * Stop auto transition if it"s turned on. * @return {this} */ function stop() {}; /** * Set custom animation timings. * @param {string|Object} transition Either a transition name (i.e. "cube"), or a {"transition": "timing"} object. * @param {string=} opt_timing The new animation timing (i.e "0.5s ease-in"). Not required if transition is an object. * @return {this} */ function timing(transition, opt_timing) {}; /** * Toggle breadcrumbs. * @return {this} */ function breadcrumbs() {}; /** * Toggle controls. * @param {string=} opt_scheme Toggle on/off if not present, else change layout. "border", `corner` or `none`. * @return {this} */ function controls(opt_scheme) {};

Скрол страницы во время смены слайдов

В некоторых браузерах появляется этот неприятный баг. Чтобы исправить его нужно добавить стиль к body:

Body { overflow: hidden; }

Динамическое изменение размера

Slidr сам "понимает", нужно ли изменять размеры слайдера под изображение. Если у блока слайдера указаны размеры, то Slidr не будет автоматически их менять. Если указаны свойства min-width и min-height, то слайдер будет менять свой размер под контент, учитывая эти значения. В противном случае определение размеров будет проходить в автоматическом режиме.

Автоматическое изменение размеров

good gorgeous unbelievable

Статические размеры

good gorgeous unbelievable

Элементы управления Slidr

Разметка элементов управления следующая:

Вы можете кастомизировать любой элемент управления слайдером с помощью CSS селекторов:

Aside .slidr-control.right { width: 50px !important; height: 50px !important; top: 50% !important; margin-top: -25px !important; right: -25px !important; border-radius: 25px; background: url("/static/images/arrow_right.png") 14px 13px no-repeat black; opacity: 0.4; } aside .slidr-control.right:hover { opacity: 1; }

Элемент управления "стрелка" реализован с помощью псевдоселектора:after , поэтому, чтобы его скрыть, используйте следующий код:

// Hide a single arrow within a single controller. aside .slidr-control.right:after { border-color: transparent !important; } // Hide all arrows within a single controller. aside .slidr-control:after { border-color: transparent !important; } // Hide all Slidr arrows. aside .slidr-control:after { border-color: transparent !important; }

Хлебные крошки Slidr

Хлебные крошки имеют простую HTML разметку. Каждый ul обозначает всю строку, а каждый li отдельную хлебную крошку:

...

Стилизация хлебных крошек с помощью CSS:

// Customize the position, size, border color and background color. aside { right: 50% !important; margin-right: -41px !important; } aside .slidr-breadcrumbs li { width: 15px !important; height: 15px !important; margin: 3px !important; } aside .slidr-breadcrumbs li.normal { border-color: white !important; } aside .slidr-breadcrumbs li.active { background-color: black !important; }

Лицензия

Это программное обеспечение может свободно использовать под лицензией MIT.

Время не стоит на месте а с ним и прогресс. Это затронуло и просторы интернета. Уже можно заметить как меняется внешний вид сайтов, особенно большой популярностью пользуется адаптивный дизайн. И в связи с этим появилось не мало новых адаптивных jquery слайдеров , галерей, каруселей или подобных плагинов.
1. Responsive Horizontal Posts Slider

Адаптивная горизонтальная карусель с детальной инструкцией по установке. Выполнена она в простом стиле, но вы можете ее стилизовать под себя.

2. Слайдер на Glide.js

Этот слайдер подходит для любого сайта. Тут используется Glide.js с открытым кодом. Цвета слайдера можно легко изменить.

3. Tilted Content Slideshow

Адаптивный слайдер с контентом. Изюминкой данного слайдера является 3d эффект изображений, а также разные анимации появления в случайном порядке.

4. Слайдер с использованием HTML5 canvas

Очень красивый и впечатляющий слайдер с интерактивными частицами. Выполнен он с помощью HTML5 canvas,

5. Слайдер «Морфинг изображений»

Слайдер с эффектом морфинга (Плавная трансформация из одного объекта к другому). В данном примере слайдер хорошо подойдет для портфолио веб-разработчика или веб-студии в виде портфолио.

6. Круговой слайдер

Слайдер в виде круга с эффектом переворота изображения.

7. Слайдер с размытым фоном

Адаптивный слайдер с переключением и размытием заднего фона.

8. Адаптивный фэшн слайдер

Простой, легкий и адаптивный слайдер для сайта.

9. Slicebox - jQuery 3D image slider (ОБНОВЛЕННЫЙ)

Обновленная версия Slicebox slider с исправлениями и новыми возможностями.

10.Free Animated Responsive Image Grid

Плагин JQuery для создания гибкой сетки изображения, который будет переключать снимки, используя различные анимации и тайминги. Это может хорошо смотреться в качестве фона или декоративного элемента на сайте, так как мы можем настроить выборочное появление новых изображений и их переходов. Плагин выполнен в нескольких вариантах.

11. Flexslider

Универсальный бесплатный плагин для вашего сайта. Этот плагин выполнен в нескольких вариантах слайдера и каруселях.

12. Фоторама

Fotorama - это универсальный плагин. У него есть много настроек, все работает быстро и легко, есть возможность просмотра слайдов на весь экран. Слайдер можно использовать как в фиксированном размере так и адаптивном, с миниатюрами и без, с круговой прокруткой и без и еще много чего.

P.S. Ставил слайдер несколько раз и считаю что он один из лучших

13. Бесплатная и адаптивная 3D галерея-слайдер с миниатюрами.

Экспериментальная галерея-слайдер 3DPanelLayout с сеткой и интересными эффектами анимации.

14. Слайдер на css3

Адаптивный слайдер выполнен при помощи css3 с плавным появлением контента и легкой анимацией.

15. WOW Slider

WOW Slider - это слайдер изображений с потрясающими визуальными эффектами.

17. Elastic

Эластичный слайдер с полной адаптивностью и с миниатюрами слайдов.

18.Â Slit

Это полноэкранный адаптивный слайдер с использованием анимации css3. Выполнен слайдер в двух вариантах. анимация сделана достаточно необычно и красиво.

19. Адаптивная фотогалерея plus

Простой бесплатный слайдер-галерея с подгрузкой изображений.

20. Адаптивный слайдер для WordPress

Адаптивный бесплатный слайдер для WP.

21. Parallax Content Slider

Слайдер с эффектом параллакса и контролем каждого элемента с помощью CSS3.

22. Слайдер с привязкой музыки

Слайдер с использованием открытого исходного кода JPlayer. Этот слайдер напоминает презентацию с музыкой.

23. Слайдер с jmpress.js

Адаптивный слайдер основан на jmpress.js и поэтому позволит использовать некоторые интересные 3D эффекты к слайдам.

24. Fast Hover Slideshow

Слайд шоу с быстрым переключением слайдов. Слайды переключаются при наведении курсора.

25. Image Accordion with CSS3

Аккордеон изображений с помощью css3.

26. A Touch Optimized Gallery Plugin

Это адаптивная галерея которая оптимизирована для тач-устройств.

27. 3D Галерея

3D Wall Gallery - создана для браузера Safari, где будет виден 3D эффект. Если смотреть на другом браузере то функциональность будет в порядке но небудет виден 3D эффект.

28. Слайдер с пагинацией

Адаптивный слайдер с нумерацией страниц с помощью ползунка JQuery UI. идея состоит в том чтобы чтобы использовать простую концепцию навигации. Есть возможность перемотки всех изображений или послайдового переключения.

29.Image Montage with jQuery

Автоматическое расположение изображений в зависимости от ширины экрана. Очень полезная штука при разработке сайта портфолио.

30. 3D Gallery

Простенький 3D круговой слайдер на css3 и jQuery.

31. Полноэкранный режим с 3D эффектом на css3 и jQuery

Слайдер с возможностью полно-экранного просмотра изображений с красивым переходом.

Нужен простой слайдер с автоматической прокруткой. Приступим...

Описание работы слайдера.

Слайды будут выстроены в линию, и через определенное время будут прокручиваться.

Красной рамкой показана видимая часть слайдера.

В конец слайдера нужно продублировать первый слайд. Это нужно для того, чтоб обеспечить прокрутку от третьего слайда к первому. Также нужно добавить последний слайд в начало для возможности прокрутки в обратном направлении от первого слайда к третьему. Ниже показана работа слайдера в прямом направлении.

Когда слайдер доходит до конца, на место последнего слайда мгновенно помещается его копия из начала слайдера. Затем цикл снова повторяется. Таким образом создается иллюзия бесконечного слайдера.

HTML разметка

Для начала сделаем простой слайдер с автоматической прокруткой. Для его работы нужно два контейнера. Первый будет задавать размер видимой области слайдера, а второй нужен для размещения в нем слайдеров. Разметка слайдера будет иметь следующий вид:

Стили слайдера .slider-box{ width : 320px ; height : 210px ; overflow : hidden ; } .slider{ position : relative ; width : 10000px ; height : 210px ; } .slider img{ float : left ; z-index : 0 ; }

Контейнер.slider-box задает размеры слайдера. С помощью свойства overflow:hidden скрываются все элементы которые не входят в область внутри элемента.

Для контейнера.slider задается большая ширина. Это нужно для того, чтоб в него встрочку поместились все слайды.

Слайды выравниваются с помощью свойства float:left.

Ниже показано схематичное расположение блоков слайдера.

Скрипт

Движение слайдов будет осуществляться с помощью плавного изменения свойства margin-left контейнера.slider.

$(function () { var width= $(".slider-box" ) .width () ; // Ширина слайдера. interval = 4000 ; // Интервал смены слайдов. $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Копия последнего слайда помещается в начало. $() .eq (1 ) .clone () .appendTo (".slider" ) ; // Копия первого слайда помещается в конец. // Контейнер.slider сдвигается влево на ширину одного слайда. setInterval("animation()" , interval) ; // Запускается функция animation(), выполняющая смену слайдов. } ) ; function animation() { var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // Текущее смещение блока.slider width= $(".slider-box" ) .width () , // Ширина слайдера. slidersAmount= $(".slider" ) .children () .length ; // Количество слайдов в слайдере. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Если текущий слайд не последний, { margin= margin- width; // то значение margin уменьшается на ширину слайда. } else { // Если показан последний слайд, $(".slider" ) .css ("margin-left" , - width) ; // то блок.slider возвращается в начальное положение, margin=- width* 2 ; } $(".slider" ) .animate ({ marginLeft: margin} , 1000 ) ; // Блок.slider смещается влево на 1 слайд. } ;

В итоге получился простой слайдер с бесконечной автоматической прокруткой.