webdonsk.ruКак сделать слайдер на jquery
Добавил пользователь Владимир З. Обновлено: 10.09.2024
По сути, карусель отличается от слайдера только тем, что слайдер показывает в конкретный момент времени только один элемент списка, а карусель несколько. Хотя многие люди воспринимают и карусель и слайдер как один и тот же элемент интерфейса, только с разным дизайном. Мы будем делать карусель. Но полученные знания можно будет применить для создания слайдера. Хочу напомнить, что статья ориентирована на новичков и ее цель показать принцип работы и внутреннее устройство карусели/слайдера. В реальных проектах лучше использовать готовые решения (возможно собственной разработки), чем писать все самому. Хотя иногда и это имеет смысл.
Для начала создадим обычный документ html. Назовем его index.html:
Теперь нам нужно создать структуру самой карусели. Пускай каждый элемент нашей jQuery карусели будет состоять из картинки и небольшого текста. Как-то так:
Приведем немного нашу карусель в порядок простым CSS кодом. Для этого подключим сам CSS файл:
Потом допишем классы к нашим элементам:
И теперь самое главное, сам CSS код:
Ничего не обычного. Зато страничка приобрела нормальный вид:
Сейчас наша будущая карусель похожа на простой список. Что бы она стала похожа на карусель, нужно завернуть ее в дополнительный блок (div), который скроет часть элементов. Этот блок я называю хайдер. Добавим его в html:
Теперь нужно сделать так, что бы ширина самого списка не была ограничена, а вот хайдер был с ограниченной шириной. Зачем это нужно, станет понятно чуть позже. Изменим для этого код самого списка:
А так же добавим код для хайдера:
Теперь получилось вот так:
Как видите, теперь часть элементов просто скрыта. Теперь нам нужно добавить элементы прокрутки. Это могут быть картинки (обычно стрелки) или просто текст. Мы добавим обычный текст. Для этого в html добавим строчки кода с нашими элементами управления:
А после поправим CSS, что бы элементы управления каруселью нормально отобразились. Теперь весь CSS код будет выглядеть так:
Мы добавили атрибут float для элементов управления и самого хайдера. Кому-то может показаться странным зачем нужен floar со значением left для правого элемента управления. Дело в том, что если ему не задать float, он будет растягиваться на всю ширину пространства. В дальнейшем, когда мы захотим приукрасить элементы управления, это будет нам мешать.
Таким образом страница стала выглядеть вот так:
Получилось вот что:
Приведем в порядок наши элементы управления. Пускай они будут похожи на кнопки:
Ничего особенного. Получилось вот так:
Наконец-то мы подошли к самому интересному. Осталось запрограммировать нашу карусель. Добавим в наш маленький учебный проект два JavaScript файла. Пустой файл slider.js и сам jQuery.js. Я использовал jQuery версии 2.1.3:
Теперь, нам нужно повесить event’ы на наши элементы управления:
Ширина каждого элемента списка — 125 пикселей, как мы уже посчитали выше. То есть, что бы прокрутить карусель на один элемент вправо, нужно задать значение left списка в -125 пикселей. А если мы хотим прокрутить влево, то просто 125 пикселей. На JS мы будем при каждом клике либо добавлять либо отнимать 125 пикселей. Для анимации прокручивания мы будем использовать функцию jquery — animate(..). Первые ее аргумент это массив параметров css для анимации, второй время анимации, третий callback (функция, которая выполниться после анимации). Получается вот так:
Одной из самых популярных задач, которые делаются на jQuery, является создание плагина изображений. У меня на сайте службы поддержки есть как раз такой слайдер. Я создавал этот слайдер изображений с переключателями без плагинов. И его код в этой статье я сейчас приведу.
Для начала разберём HTML-код:
Заголовок слайдера
Думаю, что принцип потянен: есть основной блок container, который содержит блок slider и switch. Последний хранит переключатели. А slider содержит блоки, которые по-очереди будут показываться пользователю. Внутри этих блоков уже может быть, вообще говоря, любой контент.
Теперь добавим CSS:
По сути, данный CSS-код размещает блоки друг под другом. Делая их полностью прозрачными. А единственный блок, который будет видимым, делается непрозрачным, а также размещён всегда поверх остальных. Всё остальное, думаю, понятно.
И, наконец, остался код JavaScript:
Код я прокомментировал достаточно подробно, однако, возможно, не очень понятно, зачем выключать таймер, а после его сразу включать. Ответ простой - сбросить задержку. Допустим, таймер проработал 3 секунды и через 2 секунды он должен сменить блок. Пользователь в этот момент кликает по переключателю, пока там всё сменится, останется до срабатывания таймера примерно 1 секунда. То есть пользователь не успел кликнуть, а таймер ему уже включает следующий блок. Тогда как логично, чтобы при смене блока, таймер снова ждал 5 секунд до следующей автоматической смены.
Вот такой не очень сложный скрипт, но в то же время весьма функциональный и красивый. А целью данной статьи является демонстрация Вам того, что далеко не всегда нужно прибегать к плагинам. Подобный слайдер изображений можно было сделать и с помощью плагина, только вот кода было бы раз в 50 больше (из-за кода плагина, разумеется), плюс Вы не смогли бы вносить мелкие изменения.
Следовательно, использовать плагины стоит только для сложных задач, а для простых - лучше написать всё самому.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 4 ):
Спасибо за урок! Не подскажете, а как добавить еще один переключатель, но уже в виде стрелочек по бокам? Спасибо.
почему то у меня он не работает
Добрый вечер Михаил! Спасибо большое за урок! У меня возникли проблемы, показывает только первую картинку, но остальные не показывает. В чем может быть проблема?
Плагин jQuery UI Slider делает выбранные элементы ползунками. Существуют различные варианты, такие как несколько рукояток, которые можно перемещать с помощью мыши или клавишами стрелок, и диапазонов.
1. Установка
- подключаем библиотеку jQuery версии 1.7+
- подключаем библиотеку jQuery UI с виджетом Slider
- подключаем стиль jQuery UI с виджетом Slider
- подключаем плагин jQuery UI Touch Punch для корректной работы ползунков на тачпадах
- добавляем HTML для нашегно ползунка:
В итоге получим это:
2. Настройки
animate
Определяет, будет ли ползунок передвигаться плавно при клике на ползунке.
true или false, "fast" (быстро) или "slow" (медленно), или число в миллисекундах
По умолчанию: — false
classes
Добавляет дополнительные классы к классам слайдера. Может использоваться, если для разных ползунков используются разные стили.
disabled
Отключает true или включает false слайдер.
По умолчанию: — false
Максимальное значение ползунка.
По умолчанию: — 100
Минимальное значение ползунка.
По умолчанию: — 0
orientation
Горизонтальная "horizontal" или вертикальная "vertical" ориентация слайдера
По умолчанию: — "horizontal"
range
Определяет диапазон ползунка
Значение true включит второй ползунок и диапазон между ними, "min" - диапазон от минимума шкалы до ползунка, "max" - диапазон от ползунка до максимума шкалы
По умолчанию: — false
Шаг значений ползунка, который должен быть кратным разнице между максимальным и минимальным значением шкалы.
По умолчанию: — 1
value
Начальное значение ползунка, если он один
По умолчанию: — 0
values
Начальные значения ползунков, если их два, например [ 10, 20 ]
По умолчанию: — null
3. Методы
Вызов этих функций позволяет быстро влиять на работу ползунка и получать с него данные
$( ".selector" ).slider( "destroy" );
Полностью удаляет функциональность ползунка, что вернет элемент обратно в исходное состояние.
$( ".selector" ).slider( "disable" );
$( ".selector" ).slider( "enable" );
Возобновляет работу ползунка.
$( ".selector" ).slider( "option", < настройки >);
Устанавливает одну или несколько настроек
var option = $( ".selector" ).slider("option", "min");
Получает значение настройки
var option = $( ".selector" ).data().uiSlider.options;
Получает значения всех настроек, например: option.min, option.max и т.д.
$( ".selector" ).slider( "value", 20 );
Устанавливает нужное значение для рукоятки
var selection = $( ".selector" ).slider( "value" );
Получает значение рукоятки
$( ".selector" ).slider( "values", [ 55, 105 ] );
Устанавливает нужные значение для рукояток
$( ".selector" ).slider( "values", [ 0, 105 ] );
Устанавливает нужное значение для рукоятки 0
var values = $( ".selector" ).slider( "values" );
Получает значения рукояток
4. События
change ( event, ui )
Событие, которое происходит при изменении значения ползунка
create ( event, ui )
Событие, которое запускается при создании ползунка
slide ( event, ui )
Событие, которое происходит на каждое движении мыши, при перетаскивании рукоятки ползунка. ui.value представляет текущее значение ползунка.
start ( event, ui )
Событие, которое происходит, когда пользователь начинает перетаскивать рукоятку ползунка
stop ( event, ui )
Событие, которое происходит, когда пользователь заканчивает перетаскивать рукоятку ползунка
5. Вывод значений ползунка
Данный слайдер не имеет смысла, если пользователь не будет видеть данные, которые он им вводит. Для этого выведем на экран эти значения:
Значение ползунка:
Для слайдера из 2-х рукояток:
Значение ползунка:
6. Добавление значений к форме
Очень часто бывает, что данные такого слайдера нужно передать в форму, а не просто показывать на экране. Все делается аналогично выводу на экран, только данные подставляются в скрытое поле input
Значение ползунка:
7. Оформление
Чтобы придать ползунку другой вид, нужно добавить свой стиль ниже оригинального jquery-ui.css (как в примере) или редактировать оригинальный
Другие способы оформления можно поглядеть в отдельной статье: Варианты оформления jQuery UI Slider
8. Описание классов
Ниже представлена таблица с классами слайдера и за что отвечает каждый из них
| Класс | Описание |
|---|---|
| .ui-slider | дорожка слайдера |
| .ui-slider-horizontal | стили для горизонтального слайдера |
| .ui-slider-vertical | стили для вертикального слайдера |
| .ui-slider-handle | стили для рукоятки |
| .ui-slider-range | стили для выбранного диапазона |
| .ui-slider-range-min | стили для выбранного диапазона с настройкой range: "min" |
| .ui-slider-range-max | стили для выбранного диапазона с настройкой range: "max" |
| .ui-state-disabled | стили для заблокированного слайдера (disabled: true) |
Смотрите также:
Горизонтальный таймлайн
Горизонтальный слайдер шкалы времени на jQuery
Пошаговый слайдер
Оригинальный слайдер на jQuery, который листает карточки по кругу в одну сторону
Слайдер для radio кнопок
jQuery плагин radios-to-slider для создания слайдера из radio кнопок
Добавить комментарий:
Комментарии:
Я тут закономерности никакй не увидел, руками только подставлять значения значения.
Тут value - значение по умолчанию, на котором стоит ползунок.
И скрипт:
Я вам премного благодарен за помощь ! Всё получилось идеально ! Спасибо огромное !
Подскажите как один ползунок заставить двигаться другой ползунок синхронно ( в ползунках значения разные ) ?
Через события и методы, например, когда у нас двигается ползунок, происходит событие slide , через ui.value получаем его значение.
Далее обрабатываем это значение как нам нужно и передаем в другой ползунок
$( ".selector" ).slider( "value",значение );
Мне значения менять не нужно в ползунках , нужно просто когда я передвигаю первый за ним передвигался и второй.
Спасибо вам огромное ! Всё получилось ! И последний маленький вопрос . Как отобразить в подсказке над handle свои значения , а не значения бегунка. Данные для подсказки нужны такие min:13, max:24. Данные в slider min:1, max:12
Как в пункте 5 -Вывод значения ползунка, только прибавьте к выводимому значению 12
Александр , спасибо вам большое ещё раз ! С вашей помощью начал потихоньку разбираться и вникать в суть вопроса )))
Итого на вашем сайте ради 1 ползунка будет подключена 2 библиотеки и 1 плагин.
А еще столько же будет на слайдере, модальных окнах и других элементах.
Это к вопросу о быстродействии сайтов
Как сделать чтобы ползунок с диапазоном увеличивался логарифмически или разделить на 2 части и более (например): в 1 части значения 10 — 1000 и шаг 10, во 2 части 1000 — 100 000 шаг 1000?
Сделать 2 ползунка ?
Или пробывать через события, что если значение больше 1000, то меняем шаг.
Спасибо за ответ. В итоге noUiSlider все решает ?
Как сделать, чтобы при вводе в input минимального и максимального значения изменялось положение ползунка? При этом, если ввести min > max, то они менялись местами
Есть в ползунка и их вывод, как их объединить в один вывод?
Есть 2* ползунка
А зачем их объединять в 1 вывод?
Если они полностью идентичны, можно привязать слайдер к классу, а не к айди.
Привет! Спасибо за статью! Работает во всех браузерах , кроме IE11. Это важно, так как задача стоит адаптировать сайт под все браузеры, и под IE11 в том числе (будь он неладен). Подскажи, плиз, как это сделать?
Да вроде как сладер этот поддерживается IE11, но проверить не могу, у меня его нет.
У вас неплохой сайт) Спасибо за информацию,как разработчик/чуток дизайнер могу выразить свою благодарность за внимание к мелочам(анимашки и переходы на js-сине) ?
Приветствую всех.
Помоги с решением моей микро задачи )))
Есть вертикальный слайдер, есть min и max — 0 и 100.
Задача, сделать чтобы ползунок никогда не доходит до своего минимума и максимума, а останавливался допустим на значениях 5 и 95 и на полосе прокрутки при максимальных и минимальных значения всегда оставались маленькие "хвостики"
Это реально сделать?
Если min стоит 0, то он и будет идти на 0, если нужно 5 минимальное, то нужно поставить 5. Соотв. и max тоже.
А чтобы хвостик оставался можно сделать псевдо шкалу, которую можно растянуть и оформить как угодно.
Псевдо шкала? А как её сделать? В двух словах ))
Шкала слайдера прозрачная, а под ней альтернативная, нужного размера и оформления.
Спасибо за идею, сделал ))
И тут же вопросик возник ), при адаптации только у меня не работает ползунок, двигать можно только нажатием на линию скроллинга?
Это на тачпадах? Для етого патч есть
Мне нужно, чтобы пользователь мог сам выставлять максимальное значение для ползунка. Подскажите, пожалуйста, как это осуществить.
А нужкн ли для такой задачи вообще ползунок?
Он как бы изначально же подразумевает значение ОТ и ДО
А у нас это значение не известно, оно может быть и 5 и 5 000 000.
Тут, как мне кажется, нужно просто сделать поле для ввода этого значения.
Пдскажите, как использовать несколько слайдеров на одной странице?
В таком варианте не работает
У вас во втором слайдере перепутаны значения max и min в его настройках
Статья весьма крутая! Мне нужна подсказка, как сделать один ползунок при передвижении которого меняется два разных значения?
Сегодня мы научимся создавать замечательный слайдер контента на jquery.
Простой и функциональный слайдер контента поможет нам в любой ситуации: надо разместить картинку, ссылку или просто текст? Наш слайдер сможет все!
Давайте перейдем скорее к делу. Создадим простую разметку для нашего слайдера:
Тут все просто. div - это блок, в котором находится содержимое слайда. Я поместил туда другой блок, задал ему размеры и залил цветом. Сколько блоков с классом slide, столько слайдов в нашем слайдере.
Теперь к стилям:
Здесь пояснять нечего, ничего сложного. Для кнопок управления используются картинки, остальное все просто.
И теперь парам-пам-пам, сам наш скрипт (не забываем предварительно подключить свежую версию jquery):
По нему немного поясню. 1. Он создает круглые кнопки управления (расположены справа внизу) - которые позволяют перемещаться по слайдам - класс slider-controls с вложенными тегами span с классами control-slide. Активный кружочек дополнительно имеет класс active. 2. Он создает кнопки управления слайдами вправо-влево (появляются при наведении на слайдер) - классы next и prev соответственно. Внешний вид кнопок управления задается стилями.
Также наш скрипт имеет несколько настроек: 1. var SlideSpeed = 700; - цифра 700 - это скорость смены слайдов. Задается в миллисекундах. 2. var TimeOut = 3000; - цифра 3000 - задержка перед автоматической сменой слайдов. Задается в миллисекундах. Вот собственно и все, наш замечательный слайдер контента готов.
Читайте также: