Интересные слайдеры. Подборка адаптивных слайдеров

В этой статье разберём как можно очень просто с помощью CSS Flexbox и CSS трансформаций создать адаптивный слайдер для сайта.

Проект слайдера под названием chiefSlider расположен на GitHub. Перейти на него можно по этой ссылке .

Слайдер с одним активным слайдом (без зацикливания):

Слайдер с тремя активными слайдами (без зацикливания):

Пример, в котором показан как можно применить слайдер для ротации статей:

Перечислим основные преимущества данного слайдера:

• во-первых, он не создаёт клоны элементов (item) для организации зацикливания, как это реализовано, например, в плагинах OwlCarousel и slick ;
• во-вторых, он не зависит от библиотеки jQuery ; это не только убирает дополнительные требования, но и делает его более лёгким;
• в-третьих, он практически не вносит никакие изменения в DOM документа ; единственное, что он делает - это добавляет или изменяет значения CSS трансформаций у элементов слайдера;
• в-четвертых, он содержит только минимальный набор функций ; дополнительный функционал можно добавить в зависимости от задачи;
• в-пятых, он является адаптивным , т.е. его можно использовать на любых сайтах; адаптивность слайдера настраивается с помощью CSS;
• в-шестых, количество активных элементов настраивается с помощью CSS; это означает, что его можно использовать для создания карусели как с одним активным слайдом, так и с любым другим их количеством.

Установка слайдера выполняется за 3 шага:

• добавить CSS слайдера chiefSlider на страницу или в CSS-файл, подключённый к странице;
• поместить HTML код слайдера в необходимое место страницы;
• вставить JavaScript код на страницу или в js-файл, подключённый к странице.

CSS и JavaScript код желательно минимизировать, это действие обеспечит более быструю загрузку страницы.

Создание слайдера chiefSlider будет состоять из создания HTML кода, CSS и JavaScript (без jQuery).

HTML код слайдера chiefSlider :

Как видно, слайдер имеет очень простую HTML архитектуру. Начинается она с основного блока, который имеет класс slider . Данный блок состоит из 3 элементов.

Первый элемент - это.slider__wrapper . Он выступает в качестве обёртки для элементов.slider__item (слайдов).

Остальные два элемента (.slider__control) визуально представляют собой кнопки. С их помощью будет совершаться навигация по слайду, т.е. переход к предыдущим и следующим элементам.

CSS код слайдера chiefSlider :

/* ОСНОВНЫЕ СТИЛИ */ .slider { position: relative; overflow: hidden; } .slider__wrapper { display: flex; transition: transform 0.6s ease; /* 0.6 длительность смены слайда в секундах */ } .slider__item { flex: 0 0 50%; /* определяет количество активных слайдов (в данном случае 2 */ max-width: 50%; /* определяет количество активных слайдов (в данном случае 2 */ } /* СТИЛИ ДЛЯ КНОПОК "НАЗАД" И "ВПЕРЁД" */ .slider__control { position: absolute; display: none; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; text-align: center; width: 40px; /* ширина кнопки */ height: 50px; /* высота кнопки */ opacity: .5; /* прозрачность */ background: #000; /* цвет фона */ } .slider__control_show { display: flex; } .slider__control:hover, .slider__control:focus { text-decoration: none; outline: 0; opacity: .9; /* прозрачность */ } .slider__control_left { left: 0; } .slider__control_right { right: 0; } .slider__control::before { content: ""; display: inline-block; width: 20px; /* ширина иконки (стрелочки) */ height: 20px; /* высота иконки (стрелочки) */ background: transparent no-repeat center center; background-size: 100% 100%; } .slider__control_left::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E"); } .slider__control_right::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E"); }

Как видно, CSS код слайдера тоже является не очень сложным . Основные определения, с помощью которых можно настроить внешний вид слайдера, снабжены комментариями .

CSS код, который определяет количество активных элементов :

/* определяет количество активных слайдов (в данном случае 2) */ flex: 0 0 50%; max-width: 50%;

Этот код устанавливает слайдеру число активных элементов, равное 2.

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

/* определяет количество активных слайдов (в данном случае 1) */ flex: 0 0 100%; max-width: 100%;

Создание адаптивного слайдера осуществляется посредством медиа запросов.

Например , слайдер, который на устройствах с крохотным экраном должен иметь один активный слайд, а на больших - четыре:

Slider__item { flex: 0 0 100%; max-width: 100%; } @media (min-width: 980px) { .slider__item { flex: 0 0 25%; max-width: 25%; } }

JavaScript код слайдера chiefSlider :

"use strict"; var multiItemSlider = (function () { return function (selector) { var _mainElement = document.querySelector(selector), // основный элемент блока _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // обертка для.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // элементы (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // элементы управления _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // кнопка "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // кнопка "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), // ширина одного элемента _positionLeftItem = 0, // позиция левого активного элемента _transform = 0, // значение трансформации.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации) _items = ; // массив элементов // наполнение массива _items _sliderItems.forEach(function (item, index) { _items.push({ item: item, position: index, transform: 0 }); }); var position = { getMin: 0, getMax: _items.length - 1, } var _transformItem = function (direction) { if (direction === "right") { if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) { return; } if (!_sliderControlLeft.classList.contains("slider__control_show")) { _sliderControlLeft.classList.add("slider__control_show"); } if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) { _sliderControlRight.classList.remove("slider__control_show"); } _positionLeftItem++; _transform -= _step; } if (direction === "left") { if (_positionLeftItem position.getMax()) { nextItem = position.getItemMin(); _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform -= _step; } if (direction === "left") { _positionLeftItem--; if (_positionLeftItem < position.getMin()) { nextItem = position.getItemMax(); _items.position = position.getMin() - 1; _items.transform -= _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; }

На самом деле здесь всё просто.

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

Если такой элемент в массиве есть , то выполняется трансформация элемента.slider__wrapper (т.е. действия, как и в алгоритме без зацикливания).

А вот если такого элемента нет , то кроме трансформации.slider__wrapper , выполняется ещё ряд действий . Во-первых , в массиве items ищется элемент с минимальной позицией . После получения этого элемента, ему устанавливается позиция, значение которой будет равно значению текущего правого элемента + 1 . Ну и конечно выполняется его трансформация , на такое количество процентов, чтобы он оказался в конце , т.е. после последнего элемента.

Для перехода к предыдущему слайду выполняются аналогичные действия, но наоборот.

Кроме этого для слайдера с зацикливанием не нужно переключать видимость кнопок "Влево" и "Вправо". Данные кнопки в этой версии слайдера будут отображаться всегда .

Чтобы это выполнить необходимо:

• удалить класс slider__control_show у элемента управления "Вправо";
• в CSS для селектора.slider__control изменить значение свойства display на flex .

Запрограммировать автоматическую смену слайдов через определённые промежутки времени можно с помощью функции setInterval .

Var _cycle = function (direction) { if (!_config.isCycling) { return; } _interval = setInterval(function () { _transformItem(direction); }, _config.interval); }

Функция setInterval в этом примере будет запускать функцию _transformItem через определённые интервалы времени, равные значению переменой _config.interval .

Кроме этого остановку автоматической смены слайдов желательно ещё добавить при поднесении курсора к слайдеру.

Осуществить этот функционал можно следующим образом:

If (_config.pause && _config.isCycling) { _mainElement.addEventListener("mouseenter", function () { clearInterval(_interval); }); _mainElement.addEventListener("mouseleave", function () { clearInterval(_interval); _cycle(_config.direction); }); }

Отключить автоматическую смену слайдов целесообразно в двух случаях:

• когда страница (на которой расположен данный слайдер) является не активной;
• когда слайдер находится за пределами области видимости страницы.

Обработку первого случая можно осуществить с помощью события visibilitychange .

Document.addEventListener("visibilitychange", _handleVisibilityChange, false);

Функция для обработчика события visibilitychange:

// обработка события "Изменения видимости документа" var _handleVisibilityChange = function () { if (document.visibilityState === "hidden") { clearInterval(_interval); } else { clearInterval(_interval); _cycle(_config.direction); } }

Вычисление видимости элемента можно организовать с помощью функции _isElementVisible:

Function _isElementVisible(element) { var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) { return document.elementFromPoint(x, y); }; if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) { return false; } return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains(elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom))); }

Поместить вызов _isElementVisible можно, например, в начало функции _transformItem . Это действие позволит отменить автоматическую смену слайдов, если слайдер в данный момент находится вне viewport .

Var _transformItem = function (direction) { var nextItem; if (!_isElementVisible(_mainElement)) { return; } //...

Данный вариант адаптивного слайдера отличается от предыдущих тем, что он позволяет изменить количество активных элементов (слайдов) при изменении размеров окна браузера . Обычно пользователи не изменяют размер браузера, но всё же это может произойти.

Реализовано это с помощью использования события resize и массива _states . Массив используется для вычислений. Его применение позволит не выполнять переинициализацию слайдера, когда это не требуется.

В этой статье рассмотрим процесс создания легкого, простого и адаптивного слайдера для сайта с помощью CSS и JavaScript.

Проект слайдера расположен на GitHub по этому адресу . Данный слайдер распространяется под лицензией MIT. Его можно использовать бесплатно как в личных проектах, так и в коммерческих. Поблагодарить автора и поддержать дальнейшее развитие слайдера можно на .

Основные характеристики слайдера:

• адаптивный;
• лёгкий (без jQuery);
• простой (с минимальным набором функций);
• наличие механизма автоматического смена слайдов через определенные промежутки времени;
• универсальный (можно использовать для текстовой информации, изображений, отзывов, товаров и др.).

Подключение слайдера к странице осуществляется посредством выполнения следующих действий:

• вставить в необходимое место html код слайдера;
• подключить файл со стилями или добавить их в существующий файл; также стили можно вставить прямо на страницу;
• подключить js-скрипт слайдера или вставить его в существующий файл; также код можно добавить прямо на страницу.

Демо слайдера расположено на этой странице .

Инициализация карусели осуществляется посредством вызова функции slideShow и указания ей в качестве первого аргумента селектора, определяющего слайдер в документе:

// инициализация элемента.slider в качестве карусели slideShow(".slider");

Кроме селектора функции slideShow можно передать дополнительные параметры, все они указываются в формате объекта посредством 2 параметра:

// инициализация элемента.slider в качестве карусели и настройка её с помощью дополнительных параметров slideShow(".slider", { isAutoplay: false, // false (по умолчанию) или true directionAutoplay: "next", // "next" (по умолчанию) или "prev" delayAutoplay: 5000, // 5000 (по умолчанию) или любое другое число isPauseOnHover: true // true (по умолчанию) или false });

Назначение ключей:

• isAutoplay – определяет, необходимо ли инициализировать слайдер с автоматической сменой элементов (по умолчанию этот ключ имеет значение false);
• directionAutoplay – определяет направление для механизма автоматической смены слайдов (по умолчанию "next"); для изменения направления установите "prev";
• delayAutoplay – задержка в миллисекундах перед процессом автоматической сменой одного слайда на другой (по умолчанию 5000 мс);
• isPauseOnHover – определяет необходимо ли останавливать автоматическую смену слайдов при нахождении курсора в зоне слайдера (по умолчанию true)

Например, если вам нужно инициализировать слайдер и включить у него автоматическую смену слайдов, то используйте следующую конструкцию:

// инициализация элемента.slider в качестве карусели и настройка её с помощью дополнительных параметров slideShow(".slider", { isAutoplay: true });

Кроме этого, вы можете управлять слайдом с помощью методов. Для этого вам нужно сохранить в переменную результат выполнения функции slideShow:

// инициализация элемента.slider в качестве карусели и настройка её с помощью дополнительных параметров var sliderOne = slideShow(".slider");

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

// выполняет переход на следующий слайд sliderOne.next();

Список методов слайдера:

• stop – останавливает автоматическую смену слайдов;
• next – выполняет переход на следующий слайд;
• prev – выполняет переход на предыдущий слайд;
• cycle – включает автоматическую смену слайдов.

Применение слайдера для ротации изображений:

Использования слайдера для ротации текстовой информации:

Пример использования слайдера для отображения отзывов:

Применение слайдера для ротации товаров:

Исходные коды слайдера состоят из:

• html кода;
• CSS кода (стилей);
• JavaScript кода (скрипта).

HTML структура слайдера:

... ... ... ...

В этой разметке основным контейнером, содержащим остальной код слайдера, является элемент div с классом slider . Внутри него находятся три элемента: обёртка для слайдов.slider__wrapper , кнопки для перехода к предыдущему и следующему слайду.slider__control . Кроме этого после вызова функции слайдера в этот блок ещё динамически добавляется элемент с индикаторами.slider__indicators .

Обёртка для слайдов.slider__wrapper содержит в себе элемент.slider__items , а он в свою очередь элементы.slider__item . Такая конструкция позволит при необходимости расположить индикаторы и элементы управления как внутри слайдов, так и за их пределами.

В этом примере слайдер состоит из 4 элементов.slider__item . Эти элементы визуально представляют собой слайды.

Блок с индикаторами.slider__indicators выполнен в виде нумерованного списка. Он состоит из элементов li с атрибутом data-slide-to . Количество элементов в списке определяется числом слайдов. Данный атрибут используется для определения индекса слайда, на которой нужно перейти при нажатии на данный индикатор. В слайдере активный индикатор отмечается с помощью добавления к нему класса active .

Кнопки «назад» и «вперед» размечены с помощью элемента a . Кнопка для перехода к предыдущему слайду имеет классы slider__control и slider__control_prev , а к следующему – slider__control и slider__control_next .

Стили слайдера:

/* стили основного контейнера слайдера */ .slider { position: relative; overflow: hidden; max-width: 600px; margin-left: auto; margin-right: auto; } /* стили для обёртки, в которой заключены слайды */ .slider__wrapper { position: relative; overflow: hidden; } /* стили для контейнера слайдов */ .slider__items { display: flex; transition: transform 0.7s ease; } /* стили для слайдов */ .slider__item { flex: 0 0 100%; max-width: 100%; } /* стили для кнопок "вперед" и "назад" */ .slider__control { position: absolute; top: 50%; display: none; align-items: center; justify-content: center; width: 40px; color: #fff; text-align: center; opacity: 0.5; height: 50px; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); } .slider__control_show { display: flex; } .slider__control:hover, .slider__control:focus { color: #fff; text-decoration: none; outline: 0; opacity: 0.9; } .slider__control_prev { left: 0; } .slider__control_next { right: 0; } .slider__control::before { content: ""; display: inline-block; width: 20px; height: 20px; background: transparent no-repeat center center; background-size: 100% 100%; } .slider__control_prev::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E"); } .slider__control_next::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E"); } /* стили для индикаторов */ .slider__indicators { position: absolute; right: 0; bottom: 10px; left: 0; z-index: 15; display: flex; justify-content: center; padding-left: 0; margin-right: 15%; margin-left: 15%; list-style: none; margin-top: 0; margin-bottom: 0; } .slider__indicators li { box-sizing: content-box; flex: 0 1 auto; width: 30px; height: 4px; margin-right: 3px; margin-left: 3px; text-indent: -999px; cursor: pointer; background-color: rgba(255, 255, 255, 0.5); background-clip: padding-box; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .slider__indicators li.active { background-color: #fff; }

В слайдере в некоторый момент времени пользователю всегда показывается только один слайд. Осуществляется это посредством скрытия всех элементов (слайдов) располагающихся за пределами области внутри.slider__wrapper . В CSS это осуществляется посредством установки.slider__wrapper свойства overflow со значением hidden .

Slider__wrapper { overflow: hidden; }

Переход от одного слайда к другому осуществляется посредством CSS трансформаций. Для этого к.slider__items посредством кода JavaScript добавляется CSS свойство transform , значение которого содержит функцию translateX с определённым значением. Например, если данной функции указать в качестве значения -100%, то браузер осуществит переход к следующему слайду, а если наоборот, 100% - то к предыдущему.

Время и скорость, с которой будет осуществляться трансформация определяется с помощью CSS свойства transition:

Slider__items { transition: transform 0.7s ease; }

Логика работы слайдера:

"use strict"; var slideShow = (function () { return function (selector, config) { var _slider = document.querySelector(selector), // основный элемент блока _sliderContainer = _slider.querySelector(".slider__items"), // контейнер для.slider-item _sliderItems = _slider.querySelectorAll(".slider__item"), // коллекция.slider-item _sliderControls = _slider.querySelectorAll(".slider__control"), // элементы управления _currentPosition = 0, // позиция левого активного элемента _transformValue = 0, // значение транфсофрмации.slider_wrapper _transformStep = 100, // величина шага (для трансформации) _itemsArray = , // массив элементов _timerId, _indicatorItems, _indicatorIndex = 0, _indicatorIndexMax = _sliderItems.length - 1, _stepTouch = 50, _config = { isAutoplay: false, // автоматическая смена слайдов directionAutoplay: "next", // направление смены слайдов delayAutoplay: 5000, // интервал между автоматической сменой слайдов isPauseOnHover: true // устанавливать ли паузу при поднесении курсора к слайдеру }; // настройка конфигурации слайдера в зависимости от полученных ключей for (var key in config) { if (key in _config) { _config = config; } } // наполнение массива _itemsArray for (var i = 0, length = _sliderItems.length; i < length; i++) { _itemsArray.push({ item: _sliderItems[i], position: i, transform: 0 }); } // переменная position содержит методы с помощью которой можно получить минимальный и максимальный индекс элемента, а также соответствующему этому индексу позицию var position = { getItemIndex: function (mode) { var index = 0; for (var i = 0, length = _itemsArray.length; i < length; i++) { if ((_itemsArray[i].position < _itemsArray.position && mode === "min") || (_itemsArray[i].position > _itemsArray.position && mode === "max")) { index = i; } } return index; }, getItemPosition: function (mode) { return _itemsArray.position; } }; // функция, выполняющая смену слайда в указанном направлении var _move = function (direction) { var nextItem, currentIndicator = _indicatorIndex;; if (direction === "next") { _currentPosition++; if (_currentPosition > position.getItemPosition("max")) { nextItem = position.getItemIndex("min"); _itemsArray.position = position.getItemPosition("max") + 1; _itemsArray.transform += _itemsArray.length * 100; _itemsArray.item.style.transform = "translateX(" + _itemsArray.transform + "%)"; } _transformValue -= _transformStep; _indicatorIndex = _indicatorIndex + 1; if (_indicatorIndex > _indicatorIndexMax) { _indicatorIndex = 0; } } else { _currentPosition--; if (_currentPosition < position.getItemPosition("min")) { nextItem = position.getItemIndex("max"); _itemsArray.position = position.getItemPosition("min") - 1; _itemsArray.transform -= _itemsArray.length * 100; _itemsArray.item.style.transform = "translateX(" + _itemsArray.transform + "%)"; } _transformValue += _transformStep; _indicatorIndex = _indicatorIndex - 1; if (_indicatorIndex < 0) { _indicatorIndex = _indicatorIndexMax; } } _sliderContainer.style.transform = "translateX(" + _transformValue + "%)"; _indicatorItems.classList.remove("active"); _indicatorItems[_indicatorIndex].classList.add("active"); }; // функция, осуществляющая переход к слайду по его порядковому номеру var _moveTo = function (index) { var i = 0, direction = (index > _indicatorIndex) ? "next" : "prev"; while (index !== _indicatorIndex && i _stepTouch) { _move("prev"); } else if (_deltaX < -_stepTouch) { _move("next"); } _startAutoplay(); }); } else { for (var i = 0, length = _sliderControls.length; i < length; i++) { _sliderControls[i].classList.add("slider__control_show"); } } _slider.addEventListener("click", function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); _move(e.target.classList.contains("slider__control_next") ? "next" : "prev"); _startAutoplay(); } else if (e.target.getAttribute("data-slide-to")) { e.preventDefault(); _moveTo(parseInt(e.target.getAttribute("data-slide-to"))); _startAutoplay(); } }); document.addEventListener("visibilitychange", function () { if (document.visibilityState === "hidden") { _stopAutoplay(); } else { _startAutoplay(); } }, false); if (_config.isPauseOnHover && _config.isAutoplay) { _slider.addEventListener("mouseenter", function () { _stopAutoplay(); }); _slider.addEventListener("mouseleave", function () { _startAutoplay(); }); } }; // добавляем индикаторы к слайдеру _addIndicators(); // установливаем обработчики для событий _setUpListeners(); // запускаем автоматическую смену слайдов, если установлен соответствующий ключ _startAutoplay(); return { // метод слайдера для перехода к следующему слайду next: function () { _move("next"); }, // метод слайдера для перехода к предыдущему слайду left: function () { _move("prev"); }, // метод отключающий автоматическую смену слайдов stop: function () { _config.isAutoplay = false; _stopAutoplay(); }, // метод запускающий автоматическую смену слайдов cycle: function () { _config.isAutoplay = true; _startAutoplay(); } } } }()); slideShow(".slider", { isAutoplay: true });

Код слайдера написан на «чистом» JavaScript, без использования библиотеки jQuery. Программный код структурирован и организован в виде «модуля».

Основные функции, выполняющие всю логику, используемые внутри модуля slideShow:

• _startAutoplay – функция для запуска автоматической смены слайдов через определённые промежутки времени определяемым параметром delayAutoplay (по умолчанию 5 секунд);
• _stopAutoplay – функция, отключающая автоматическую смену слайдов;
• _move – функция, выполняющая смену слайда в указанном направлении;
• _slideTo – функция, осуществляющая переход к слайду по его порядковому номеру; она используется при обработке события «click» на индикаторах;
• _addIndicators – функция, добавляющая индикаторы к слайдеру;
• _setupListener – функция, осуществляющая установку обработчиков для событий для слайдера.

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

Слайдер стал пользоваться большой популярностью сравнительно недавно. Где-то на половине всех шаблонов можно встретить слайдер.

Слайдер представляет из себя область сайта (как правило центральная часть, сразу после шапки). Его цель сделать сайт более информативным, "живым", попытка в нескольких картинках описать достоинства компании или товара.

Вариантов создания слайдера множество. Мы рассмотрим несколько самых популярных из низ. К каждому способу будут приведены исходники.

Это фотография, что получится с помощью этого варианта (ниже представлен исходник с этим примером)

Для работы слайдера Вам необходимо сделать следующее:

• Подключить javascript (ява файлы) в заголовочных тегах
• Файл стилей опять же в заголовочных тегах
• В месте где нужно вывести слайдер заполнить тег (как в примере выше)

Дабы не нагружать сайт лишними скриптами, есть отличный способ сделать слайдер только на основе CSS (т.е. чисто на стилях). Давайте рассмотрим пример.

Пример №1

Пример №2

Пример №3

Вот, что должно получится.

В данном уроке мы сделаем отличный слайдер CSS3. Он будет использовать эффект затухания между слайдами. Дополнительно можно использовать описание для каждого изображения. Для организации информации будет использоваться неупорядоченный список. Слайды будут переключаться автоматически с помощью анимаций CSS3.

Разметка HTML очень простая. В примере имеется четыре слайда. Каждый из них состоит из изображения (как фон) и текста описания в элементе div . Дополнительные слайды вставить очень просто.

• Описание #1
• Описание #2
• Описание #3
• Описание #4

Для слайдера используются анимации CSS3 anim_slides и anim_titles . Первая применяется для отдельных слайдов, вторая - для текста описания. Для описания также изменяется положение и прозрачность.

/* Слайдер */ .slides { height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; } .slides ul { list-style:none; position:relative; } /* Кадры анимации #anim_slides */ @-webkit-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } .slides ul li { opacity:0; position:absolute; top:0; /* анимация css3 */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } /* Задержки css3 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; } .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; } .slides ul li:nth-child(4), .slides ul li:nth-child(4) div { -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; } .slides ul li img { display:block; } /* Кадры анимации #anim_titles */ @-webkit-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } @-moz-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } .slides ul li div { background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; font-size:26px; left:10%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* Анимация css3 */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; }

Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

В этой статье, хочу рассказать, как создать простой универсальный слайдер с использованием jQuery. На самом деле, в сети очень большое количество разнообразных готовых слайдеров, которые порой выглядят очень заманчиво, и достаточно функциональны, но мы сделаем его с нуля.

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?

• Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным и понятным.
• Возможность вставлять в слайды как изображения, так и любой HTML – код.
• Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
• Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.

Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).

Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.

Здесь содержание слайда 1 Здесь содержание слайда 2 Здесь содержание слайда 3

Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.

#slider-wrap{ /* Оболочка слайдера и кнопок */ width:660px; } #slider{ /* Оболочка слайдера */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative;} .slide{ /* Слайд */ width:100%; height:100%; } .sli-links{ /* Кнопки смены слайдов */ margin-top:10px; text-align:center;} .sli-links .control-slide{ margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;} .sli-links .control-slide:hover{ cursor:pointer; background-position:center center;} .sli-links .control-slide.active{ background-position:center top;} #prewbutton, #nextbutton{ /* Ссылка "Следующий" и "Педыдущий" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat; opacity:0.8; z-index:3; outline:none !important;} #prewbutton{left:10px;} #nextbutton{ right:10px; background:url(arrowBg.png) right center no-repeat;} #prewbutton:hover, #nextbutton:hover{ opacity:1;}

Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов (.slide).

И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.

Селектор.sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида номер, которые вставятся в необходимом количестве автоматически, вместе и с их родителем.sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.

Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.

Давайте теперь рассмотрим сам сценарий:

Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) { $(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow){ clearTimeout(slideTime); $(".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next"){ if(slideNum == (slideCount-1)){slideNum=0;} else{slideNum++} } else if(arrow == "prew") { if(slideNum == 0){slideNum=slideCount-1;} else{slideNum-=1} } else{ slideNum = arrow; } $(".slide").eq(slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active"); } if(hwNeedLinks){ var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function(){ animSlide("next"); }) $("#prewbutton").click(function(){ animSlide("prew"); }) } var $adderSpan = ""; $(".slide").each(function(index) { $adderSpan += "" + index + ""; }); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function(){ var goToNum = parseFloat($(this).text()); animSlide(goToNum); }); var pause = false; var rotator = function(){ if(!pause){slideTime = setTimeout(function(){animSlide("next")}, hwTimeOut);} } $("#slider-wrap").hover(function(){clearTimeout(slideTime); pause = true;}, function(){pause = false; rotator(); }); rotator(); });

Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).

Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода.css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все.hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.

Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.

Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.

Обратите внимание, что методу.fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.

Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода.hover(), мы указываем: очистить таймер если он запущен - clearTimeout(slideTime), и установить pause = true. А после отвода курсора, отключить паузу и запустить замыкание rotator().

Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом.slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:

0 1 2 3

Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.

В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):

0 1 2 3

Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.

На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (). Есть два варианта доработки. Либо обернуть весь js код:

(function ($) { // Весь ваш код... })(jQuery);

или заменить символы $ во всём скрипте на jQuery. Вот так:

JQuery(document).ready(function(e) { jQuery(".slide").css({"position" : "absolute", "top":"0", "left": "0"}).hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow){ // и т. д.

В примере уже реализован первый метод.

Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми!

Добавлено: Это ещё не всё. Читайте . Там мы добавим новые возможности к данному скрипту.