Слайдер для сайта на CSS и JavaScript

В этой статье разберём как можно очень просто с помощью CSS Flexbox и CSS трансформаций создать адаптивный слайдер для сайта.
Исходные коды и демо слайдера
Проект слайдера под названием chiefSlider расположен на GitHub. Перейти на него можно по этой ссылке.
Слайдер с одним активным слайдом (без зацикливания):

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

Адаптивный слайдер с зацикливанием:

Слайдер с зацикливанием и автоматической сменой слайдов:

Cлайдер, изменяющий своё состояние при изменении размеров окна браузера:

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

Пример слайдера с индикаторами:

Преимущества слайдера chiefSlider
Перечислим основные преимущества данного слайдера:
- во-первых, он не создаёт клоны элементов (item) для организации зацикливания, как это реализовано, например, в плагинах OwlCarousel и slick;
- во-вторых, он не зависит от библиотеки jQuery; это не только убирает дополнительные требования, но и делает его более лёгким;
- в-третьих, он практически не вносит никакие изменения в DOM документа; единственное, что он делает - это добавляет или изменяет значения CSS трансформаций у элементов слайдера;
- в-четвертых, он содержит только минимальный набор функций; дополнительный функционал можно добавить в зависимости от задачи;
- в-пятых, он является адаптивным, т.е. его можно использовать на любых сайтах; адаптивность слайдера настраивается с помощью CSS;
- в-шестых, количество активных элементов настраивается с помощью CSS; это означает, что его можно использовать для создания карусели как с одним активным слайдом, так и с любым другим их количеством.
Установка слайдера chiefSlider
Установка слайдера выполняется за 3 шага:
- добавить CSS слайдера chiefSlider на страницу или в CSS-файл, подключённый к странице;
- поместить HTML код слайдера в необходимое место страницы;
- вставить JavaScript код на страницу или в js-файл, подключённый к странице.
CSS и JavaScript код желательно минимизировать, это действие обеспечит более быструю загрузку страницы.
Как разработать простой слайдер для сайта (без зацикливания)
Создание слайдера chiefSlider будет состоять из создания HTML кода, CSS и JavaScript (без jQuery).
HTML код слайдера chiefSlider:
<div class="slider"> <div class="slider__wrapper"> <div class="slider__item"> <!-- SLIDE #1 --> </div> <div class="slider__item"> <!-- SLIDE #2 --> </div> <div class="slider__item"> <!-- SLIDE #3 --> </div> <div class="slider__item"> <!-- SLIDE #4 --> </div> </div> <!-- КНОПКИ "НАЗАД" И "ВПЕРЁД" --> <a class="slider__control slider__control_left" href="#" role="button"></a> <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a> </div>
Как видно, слайдер имеет очень простую 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[0]).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.getMin) { return; } if (!_sliderControlRight.classList.contains('slider__control_show')) { _sliderControlRight.classList.add('slider__control_show'); } if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove('slider__control_show'); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = 'translateX(' + _transform + '%)'; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains('slider__control')) { e.preventDefault(); var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left'; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener('click', _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem('right'); }, left: function () { // метод left _transformItem('left'); } } } }());
Основное действие в коде JavaScript выполняет функция _transformItem
. Эта функция в зависимости от переданного ей направления выполняет трансформирование элемента .slider__wrapper
.
Инициализация слайдера осуществляется следующим образом:
var slider = multiItemSlider('.slider')Демо слайдера
Как создать слайдер с зацикливанием?
Зацикливание слайдов можно выполнить посредством трансформирования элементов .slider__item
.
Для этого необходимо к каждому элементу .slider__item
привязать значения его текущей позиции и трансформации.
Наиболее оптимально эти действия можно выполнить с помощью массива _items
:
var _items = []; // наполнение массива элементами .slider__item _sliderItems.forEach(function (item, index) { _items.push({ item: item, position: index, transform: 0 }); });
Но связать данные с элементами можно выполнить не только посредством массива, а например, с помощью data-атрибутов. Но операции с DOM самые медленные и ресурсоёмкие, их не рекомендуется использовать, когда это можно выполнить как-то по-другому.
Следующий шаг - это создать функции для вычисления элементов .slider__item
с минимальной и максимальной позицией.
var position = { getItemMin: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position < _items[indexItem].position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position > _items[indexItem].position) { indexItem = index; } }); return indexItem; }, getMin: function () { return _items[position.getItemMin()].position; }, getMax: function () { return _items[position.getItemMax()].position; } } </pre> <p><span class="font-weight-bold">Последний основной шаг</span>, который предстоит выполнить - это доработать функцию <code class="code">_transformItem</code>. А именно добавить к ней код, который будет изменять позицию элемента <code class="code">.slider__item</code> и выполнять его трансформацию.</p> <pre class="prettyprint"> var _transformItem = function (direction) { var nextItem; if (direction === 'right') { _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) { nextItem = position.getItemMin(); _items[nextItem].position = position.getMax() + 1; _items[nextItem].transform += _items.length * 100; _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)'; } _transform -= _step; } if (direction === 'left') { _positionLeftItem--; if (_positionLeftItem < position.getMin()) { nextItem = position.getItemMax(); _items[nextItem].position = position.getMin() - 1; _items[nextItem].transform -= _items.length * 100; _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].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
. Массив используется для вычислений. Его применение позволит не выполнять переинициализацию слайдера, когда это не требуется.
Ознакомиться с кодом слайдера и его демкой можно в лаборатории:
Посмотреть
Подскажите, пожалуйста, где ошибка.
PHP
CSS
JS
Site
Используя одинаковые классы в слайдере придётся добавлять доп. классы слайдерам и переназначать стили или как вариант копировать всю функцию и переназначать классы там. Что бы этого не городить пришлось чуть улучшить
querySelector||All
Флаги указывал чтоб сходу понятно было, что метод не стандартный.
Результат:
Тут повнимательней, получить элементы можно Родитель-дочерний(е), но не Предок-Родитель-дочерний.
то она зацикликся.
Методы всё же лучше назвать по другому. Например
1. Проблема в том, что не всегда срабатывает onmouseover адекватно. т.е. при нажитии мышкой на левый срабатывает правый так как они в абсолюте лежат в одном z-index как победить это проблему? помогите
2. Как заставить javascript обрабатывать значения ползунков чтобы они не пересекались. Пробовал проверять значение не получается. Помогите
Заранее спасибо. Вы бог
Прочитав комментарии я понял, что
/* Без изменения кода слайдера инициализировать все слайдеры на странице можно так: */
document.querySelectorAll('.slider').forEach(function (item, index) {
item.setAttribute('slider-id', index);
multiItemSlider('[slider-id="' + index + '"]');
});
Или нужно инициализировать каждый слайдер таким образом:
var slider = multiItemSlider('#product-slider', {
isCycling: false, // автоматическая смена слайдов
});
У меня вопрос: как «совместить» эти способы. Т.е. в большинстве мест проекта хочется автоматически инициализировать слайдеры. Однако, есть страницы или элементы, где нужно настроить — время зацикливания или отсутствие зацикливания, например. Убрать элементы управления можно с помощью css. Но как можно автоматически инициализировать все слайдеры, при этом, программировать настройки нужных?
В данный момент пока планирую реализовать следующие параметры:
Если нужны ещё какие-то параметры для настройки, то напишите.
При разрешении меньше 1024px нужно, чтобы оставался один слайд и они листались с помощью стрелочек, тут тоже проблем нет, однако слайды начинаются не с первого, а со второго, который ставится первым, затем второй (который должен быть третьим), а после него идет пустой слайд =(
Причем прокрутить назад с первого слайда я не могу, хотя по сути он вторым должен быть.
в js ничего не менял, менял только стили для стрелочек.
вот html: itchief.ru/assets/uploadify/4/4/6/44635217d677050eda4b318355f664ba.png
Если можно решить эту проблему, то буду очень признателен, такое ощущение, что в массив со слайдами слайды пушатся как-то неверно((
Вот пустой слайд: itchief.ru/assets/uploadify/4/e/5/4e54621a0b7cd6b9941040c393e2a8a2.png
Должно быть так, только с другой картинкой и текстом соответственно: itchief.ru/assets/uploadify/8/6/0/8607820a94db91ea200dbc4883cd7ec7.png
Если открывать с мобильного устройства, так слайдер вообще не работает, и начинает работать только после перезагрузки страницы =((
Хотел бы спросить есть ли возможность у слайдера перемещаться к конкретному слайду отдельно. Я хочу немного доработать его под свои задачи и сделать мини превью каждого слайда при нажатии на которые происходит переход к нужной картинке по принципу работы индикаторов.
Заранее благодарен!
Такой стандартной возможности нет, но это просто решается (пример).
window.onload = function() {
document.getElementById('5').style.display = «none»;
}
Скрытие происходит, но сами слайды не схлопываются и остается пустое место от скрытого слайда. Как их схлопнуть?
Для этого нужно в скрипте изменить одну строчку:
Но проблема возникла на страницах, где количество блоков меньше 4. Не просчитывается ширина и слайды неверного размера получаются.
Подскажите, пожалуйста, как лучше выйти в данной ситуации? Делать условие на проверку количества выводимых блоков и задавать им ширину от этого или изначально принудительно задать ширину слайда?
Пример решения:
добавлять flex: 0 0 calc(100% + (2 * бордер_wrapper));
Код предыдущего поста без такой беды. Вот css, почти не пострадал.
1. Получил обе кнопки по отдельности и так же их массив. Зачем массив если можно так: [left, Right].forEach()
2. Упаковывать в отдельную функцию цикл раздачи события элементам. Зачем, плодить функции и усложнять код? Где именно такой подход хоть раз себя оправдал?
3. Последовательность взаимодействия с элементами должна описываться в коде в той же последовательности.
Событие вызывает функцию, так значит не нужно где-то в недрах кода это событие присваивать, а перед ним писать
функционал.
4. При событии зачем обращаться снова к элементу через класс, если уже достали этот элемент изначально. Так правильно: e.target === sliderBtnRight
5. Требуется пояснительная бригада для формулы _itemWidth / _wrapperWidth
Выполняя расчёт _itemWidth / _wrapperWidth мы постоянно встречаемся с 0. В чём соль?
А так ваше стремление сделать код более оптимальным (особенно с использованием новых возможностей языка) — это конечно хорошо. Но пока дальше двигать этот слайдер нет времени. Только комментариев под этой темой 290. Если у кого-то есть желание в этом развиваться, то я только буду рад этому. Можно создать для этой темы отдельный проект на Github (вынести его из how-to). Тем более это очень хорошая практика для изучения JavaScript. Можно будет делать всем вместе. Первая задача – это конечно объединить различные коды JavaScript слайдера в один и сделать его настройку для различных сценариев через параметры. Потом уже переходить к следующим этапам. Если будут желающие улучшать и оптимизировать, то напишите об этом. А если нет, то буду это делать сам, но позже.
Александр Мальцев.
Вапрос!
Из за чего слайдер прекращает прокрутку блоков?(картин с текстом)
Если поменять
на
полный код
Вапрос!
Из за чего слайдер прекращает прокрутку блоков?
Благодарю за внимание.
Слайдер сделать на CSS Grid так как управлять блоками легче,
можно добовлять убавлять блоки.
grid-template-columns
а также растягивать и сужать блоки
grid-template-columns
Например:
Вы наш добрый Ангел!***))) Все работает! Как всегда полезный и обьяснен до мелочей чудо-урок!
кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
Вы наш добрый Ангел!***))) Все работает!!! Как всегда полезный и обьяснен до мелочей чудо-урок!
кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
Я вывел его в шапке и в цикле для постов wordpress (как галерею каждого проекта), в итоге на странице получился основной слайдер в шапке, и слайдеры у каждого поста. Есть проблема в том, что не работает прокрутка слайдов при нажатии ctrl + F5 у слайдеров постов (работает только у слайдера в шапке), или иногда, когда заходишь на страницу впервые. Но стоит просто обновить и все работает, пока снова не завершишь сеанс надолго. В чем может быть проблема? Что-то с кэшем связано? Пробовал вставлять все коды, которые вы тут приводили на проверку наличия слайдов, не помогло. Помогите пожалуйста, заранее благодарю!!!
Попробуйте их инициализировать как показано в этом примере.
Самый близкий к решению сейчас такой код:
(при нем не работает анимация на всех слайдерах после первого слайдера, только в случае первого посещения сайта или обновления путем ctrl f5. Если же зайти на сайт еще раз или просто обновить все работает идеально.)
document.querySelectorAll('.slider').forEach(function (item, index) {
item.setAttribute('data-slider-id', index);
var sliderSelector = '[data-slider-id="' + index + '"]';
var sliderElem = document.querySelector(sliderSelector);
if (sliderElem.querySelectorAll('.slider__item').length === 0) {
return;
}
if (
sliderElem.querySelector('.slider__item').getBoundingClientRect().width *
sliderElem.querySelectorAll('.slider__item').length >
sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width
) {
multiItemSlider('[data-slider-id="' + index + '"]', {
isCycling: true,
});
} else {
var sliderControls = sliderElem.querySelectorAll('.slider__control');
for (var i = 0; i < sliderControls.length; i++) {
sliderControls[i].style.display = 'none';
}
}
});
Что интересно, если оставить код в таком виде:
document.querySelectorAll('.slider').forEach(function (item, index) {
item.setAttribute('data-slider-id', index);
multiItemSlider('[data-slider-id="' + index + '"]', {
isCycling: true,
});
});
То анимация dots'ов работает при любом раскладе, даже управляются при помощи стрелок слайдера, но картинки не меняются.
Попробуйте убрать все другие js-скрипты и стили, подключенные к странице, и проверить будут ли работать слайдеры. Если будет всё работать отлично, то тогда нужно искать стили и скрипты, которые мешают работе слайдеров. Если это подтвердится, то тогда (если необходимы стили и скрипты, с которыми идёт конфликт) нужно менять название классов у элементов, а затем внести соответствующие изменения в CSS и JavaScript файлы слайдера (т.е. изменить одни имена классов на другие).
Установил на главную страницу сайта (new.avtoshkola.dp.ua) 4 слайдера. И возникли следующие проблемы:
1. Не работает скролл мышкой на десктопе и тапом на телефонах
2. При изменении разрешения экрана (перевернув телефон) карусель неправильно скролится (неверный шаг) и неправильно отображается (часто на половину обрезанные первый и последний слайд)
3. Вторая карусель вообще не работает (возможно проблема что она вместе с первой помещена в табы, первая работает (она в активном табе), а вторая как включаешь таб никак не реагирует).
4. Третья и четвертая карусель. При клике по стрелочке (как назад, так и вперед) пропадают кнопки навигации.
Код скрипта:
Первая карусель (Блок на сайте Наша команда, вкладка практика):
Вторая карусель (Блок на сайте Наша команда, вкладка теория):
Третья карусель (Блок на сайте Наши автомобили):
Четвертая карусель (Блок на сайте Видео отзывы):
Заранее спасибо
Также в статье и комментариях имеются примеры, в которых показана возможность обновления состояния слайдера при изменении экрана. Из них тоже можно извлечь нужный код и добавить его в свой.
Когда слайдер вы помещаете во вкладки таба, которые в данный момент не показываются. Их следует инициализировать только в тот момент, когда вы её открываете. Примеры работы слайдеров во вкладках имеются в комментариях. Посмотрите, как там это реализовано.
В планах имеется, конечно, сделать единый JavaScript код слайдера с возможностью его настройкой для разных ситуаций с помощью аргументов. Но пока такого кода нет. В данный момент единственным решением будет — это самостоятельно собрать код, который вы хотите из различных примеров.
Например:
Но у меня есть вопрос, мне нужно, чтобы элементы управления не находились непосредственно на слайдах, с помощью стилей я эту проблему сам не смог решить(пробовал убрать абсолютную позицию, но они расширяют родителя и слайдов начинает становиться больше чем 3(это я убирал max-width и flex), либо сами слайды становятся больше чем мне нужно(это если не трогать max-width и flex), вся проблема в том, что slider-item плевать хотели на своего родителя, его уменьшать бесполезно, наоборот, только вредит и не приносит желаемого результата, пробовал вытащить элементы из родительского каталога и редактировать js, но ничего адекватного достичь, увы, не смог(просто не знаю синтаксис языка), пробовал грубо создать глобальную переменную которая бы определяла кнопки в вашем скрипте, но так как слайдеров мне нужно три штуки такой метод вдвойне нецелесообразен. Помогите решить проблему, пожалуйста
Слайдер выполняет расчёты с шириной, высота картинки тут не важна.
С настройкой картинок не вижу никаких проблем.
Например, можно задать размеры картинкам с помощью атрибутов width и height. А также им установить с помощью атрибута src изображение, которое будет отображаться до загрузки основной картинки.
Пример слайдера с ленивой загрузкой изображений, которая выполнена с использованием плагина Lazyload.
Если картинки имеют разное соотношение сторон, то их на сервере нужно приводить к какому-то одному значению или использовать их в качестве background.
Как это выглядит (отключен кэш и выбран Slow 3G): yadi.sk/i/LxKU0xMRw_pbLw
Код, который я добавляю:
document.querySelectorAll('.slider').forEach(function (item, index) {
item.setAttribute('slider-id', index);
multiItemSlider('[slider-id="' + index + '"]'); {
var sliderSelector = '[slider-id="' + index + '"]';
var sliderElem = document.querySelector(sliderSelector);
if (sliderElem.querySelector('.slider__item').getBoundingClientRect().width * sliderElem.querySelectorAll('.slider__item').length >= sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width) {
// слайдов больше, чем на экране
var slider = multiItemSlider('[slider-id="' + index + '"]', {
isCycling: true
})
} else {
// слайдов меньше, чем на экране
// удалить slider__control_show
var sliderControls = sliderElem.querySelectorAll('.slider__control');
for (var i = 0; i < sliderControls.length; i++) {
sliderControls[i].style.display = 'none';
}
}
}
});
Попробуйте сделать так:
Для этого добавьте условие для проверки наличия слайдов в слайдере:
Но в этом примере есть проблема. Мне необходимо .slider__item с 100% уменьшить до 33.333333%; Это получается! Но когда нажимаешь на пагинацию до конца все кнопки, там на половине пустые слайды показываются. Я видел примеры другие где на слайдере по 3 slider__item и пагинация работает исправна, НО МНЕ НУЖНА ПОМОЩЬ ИМЕННО В ЭТОМ ПРИМЕРЕ. Тут боковые слайды как раз именно так выглядят как мне нужно (на половину спрятаны). ЗАРАНЕЕ ВАМ БОЛЬШОЕ СПАСИБО!!! Мне кажется что тут в самом скрипте нужно исправить где то код. Прошу помощи. Мне необходимо чтобы не было пустых окон в слайде, чтобы он зациклено «шел».
.slider__item {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
В моем слайдере возможно динамическое изменение HTML кода в слайдах, из-за этого обычный метод _refresh не совсем подходит… (в частности, я «налопатил» уже каким то образом до того, что при изменении хтмл у меня трансформации слайдов «улетают» в рандомных направлениях, делая слайдер неюзабельным пока не обновишь страницу).
Что я ищу — это метод, который полностью «убивает» скрипт слайдера и инициализирует его по-новой, на основе нового DOM внутри. Можете подсказать что-нибудь? Спасибо!
Можно просто добавить метод destroy, который будет удалять всё что связано с этим слайдером, т.е. его HTML код и обработчики событий. Пример, в котором показано как это можно сделать. Далее вам необходимо после вставки нового HTML кода на страницу заново инициализировать его обычным способом.
PS: пробовал
.slider__item background-image {
display: block;
max-width: 100%;
height: auto;
}
Ничего не выходило(
_setUpListeners();
return {
right: function () { // метод right
_transformItem('right');
},
left: function () { // метод left
_transformItem('left');
}
const slider = multiItemSlider('.slider');
const slider = multiItemSlider('.slider');
}
Так не сработало(
Вот пожалуйста, этого вам хватит?
Прошу обратить внимание что без слайдера, внутри popup окна, картинки адаптивны.
Александр, помогите пожалуйста разобраться как разместить 2 карусели (одну под другой) с одним элементом управления (карусели должны быть адаптивные и менять количество отображаемых файлов в зависимости от ширины окна). Js только начал изучать и пока не понимаю всю логику заложенную в скрипт, а карусель очень хочется разместить на сайте.
Правильно ли я понимаю что для отключения зацикливания во все isCycling необходимо прописать false? А что сделать для отключения автопрокрутки?
В этом комментарии есть подобный пример. А настройка количество отображаемых слайдов в зависимости от ширины окна описана в статье. Она осуществляется через медиа запросы, JavaScript тут не нужен.
Чтобы убрать зацикливание нужно взять соответствующий пример, где его нет. Слайдеры с зацикливанием и без отличаются JavaScript кодом. В планах есть сделать единый js код, и тогда это можно уже будет настраивать.
Параметр isCycling нужен для включения режима автоматического смена слайдов. Т.е. если он false, то слайды автоматически меняться не будут. А если true, то через определённое время определяемым параметром interval.
Для этого нужно в него перенести соответствующий код из другого слайдера в котором он имеется. Если ничего не упустил, то держите пример.
прикрепил скриншот
<img
src=«https://itchief.ru/assets/uploadify/0/8/d/08d470c30f423a4db8b64001b89e967bs.jpg» class=«fancybox thumbnail center»>
.slider__indicators {
position: absolute;
top: 0px;
}
К сожалению, моей квалификации не хватает, чтобы по достоинству оценить всю его прелесть, но, надеюсь, что это временно…
Подскажите, пожалуйста, каким образом можно модифицировать код, что бы он работал следующим образом:
— на странице находится произвольное количество слайдеров (например, 10). Между слайдерами размещен произвольный контент.
— количество элементов в каждом слайдере — одинаковое.
— элементы управления есть только на одном (первом слайдере).
— использование элементов управления на этом слайдере влияет на содержание всех остальных слайдеров — содержание меняется на всех слайдерах сразу.
Спасибо большое заранее!
Вот пример.
UPDATE
Нашел ответ в комментариях. Просто супер!
Спасибо!
Вопрос. Есть сайт 60-100 страниц на pug/sass. Слайдер используется не на всех. И если на странице скрипт слайдера не находит ".slider__wrapper" или другие классы слайдера, то я получаю ошибку «Cannot read property 'querySelector' of null». При этом формы обратной связи и старые slick слайдеры перестают работать.
Как это исправить? Я так понимаю нужно сделать проверку наличия слайдера на странице и только после инициализировать слайдер? Но пока в js плохо ориентируюсь. Подскажите, пожалуйста)
Вам необходимо просто проверить если ли элемент на странице и только после этого выполнять уже его инициализацию:
Очень благодарен за ваш подход не только с готовыми решениями, но и объяснением смыслов!
If( positionItemLeft + wrapperItem / itemWidth — 1)
То есть в строке выше получаем значение позиции крайнего правого? Каким образом, расскажите и зачем PositionItemLeft++ каждый раз увеличивать на 1?
Если изменить ширину экрана и изменить количество видимых элементов, то слайдер не меняет значение ширины.
и при максимальной возможной, слайдер не скидывает значение ширины, а берет прежние, и получается, что не ровно, слайды идут.
вот фото itchief.ru/assets/uploadify/9/2/7/92706e8dfd4c1fc8630b317ace8783d9.png
Я выбрал из вашего комментария, как Вы написали возможность добавления автоматически каждому слайдеру id:
В данном случае возникают ошибки:
1. На первом слайде добавляется 2 раза <ol> и кнопки пагинации у этого слайдера отрабатывают не корректно.
2. Сейчас у всех слайдеров пропала возможность автосмены слайдов.
Как задать в таком случае условие, чтобы допустим у слайда с id=«0» и с id=«2» была возможность автоматической смены слайдов (зацикленная)?
PS. Я выбрал пример с пагинацией, добавил вашу возможность:
1. Зацикливания.
2. Прокрутку слайдов touch.
Благодарю Вас за помощь. Заранее большое спасибо
ВЕСЬ КОД ПРИМЕРА:
Это можно сделать так:
1. Сначала просто добавьте к слайдерам id:
2. Инициализируйте их каждый так, как вам это необходимо (через id):
Оберните весь код, включаю функцию в следующую конструкцию:
Это исключит создание переменных в глобальной области видимости. Если есть какие-то конфликты, то это должно их убрать.
Также попробуйте перезагрузить страницу с помощью Ctrl+F5. Это позволит сделать это с очисткой её кэша в браузере.
Интересует два вопроса:
1. Возможно ли добавить подписи под изображениями?
2. При подключении слайдера появляется куча пустого места под футером. Скрины прилагаю
2.1. проблемная страница
2.2. нормальная страница
Конечно, можно. Вот пример.
Если под слайдером появляется пустое место, то нужно посмотреть стили. Может у вас какие-нибудь элементы имеют такое же названия классов как используются в этом слайдере. Тут нужно открыть инспектор элементов в браузере и посмотреть, из-за чего это.
Опять вернулся к этому классному слайдеру)
В общем, мне надо сделать три вещи на слайдере состоящим из одного слайда на весь экран:
1. Поставить номер слайда формата 01/03, чтобы он оставался при изменении слайдера;
2. Сделать как-бы заполнение индикатора в зависимости от времени до завершения слайда. То есть чтобы индикатор заполнялся цветом в зависимости от времени;
3. Поставить анимацию переходов как здесь: codepen.io/ashthornton/full/ZmxaWv (там же и меняются цифры также как мне и надо).
Можете посоветовать пожалуйста как это можно выполнить и можно ли вообще это сделать с текущим слайдером?
Слайдер имеет исходные коды, вам никто не запрещает их изменять. Конечно всё это можно выполнить, но это потребует значительного изменения кода.
я модифицировал код, чтобы получать активный объект по центру при перелистывании, но теперь мне нужно изменить ширину активного элемента, вот эта задача и не выходит
есть параметры ширины, которые определяют кол-во отображаемых элементов:
пробовал дать активному элементу 50%, а остальным 25% соответственно, получается брак, т.к. свойство transition при вычислении выбрасывает элементы за пределы экрана, подскажите пожалуйста какое может быть решение
Это можно выполнить, например, через CSS анимацию и абсолютное позиционирование. На каждой ключевой точке определяете соответственно размеры и положение слайда.
Пример, в котором показано, как можно сделать такую анимацию: slider-example-1
Куда можно отправить ссылку на страницу с проблемой?
Хотелось бы получить вашего совета.
Столкнулся с ситуацией что на странице нужно 3 слайдера. Слайдеры работают исправно, с зацикливанием и автозаменой слайдов. Но в одном слайдере нужно чтобы выводился только один элемент, а в остальных двух уже установленное количество. Пытался сделать через ID и через дублирование класса slider__item в slider__item1, но все равно сбиваются все элементы слайдеров (через ID просто улетает навигация и слегка меняются размеры элементов, через дублирование (для лучшего понимания продублировал все функции и смежные классы для slider_item) ломается полностью автозамена слайдов и навигация).
Подскажите пожалуйста, как лучше это можно реализовать?
Можно, например, к слайдерам добавить id и прописать следующие стили:
Вот ссылка на пример: 3 слайдера на одной странице
Пример: Слайдер со свайпом на декстопах
Менял, подкручивал css, но что то не выходит. Пока не особо силен в верстке.
Заранее благодарен!
Пример слайда с частичным отображением предыдущего и следующего слайдов.
Во-первых, хочу сказать Вам огромное спасибо за такой грамотный подход к реализации слайдера. Это действительно очень круто реализовано и самое главное просто и содержит всё необходимое, спасибо!
Во-вторых, у меня есть вопрос, который я не знаю как решить. В общем, я на одной странице использую два слайдера, они полностью работают. Но там есть проблема с индикаторами, почему-то у первого слайдера отображаются два индикатора (можно увидеть это в коде) и визуально при перелистывании слайдов индикатор меняется, но первый продолжает гореть. В коде отображается так, что один индикатор стоит поверх другого и если его удалить, то всё норм, но вопрос как это реализовать и почему такое происходит?
Ссылка на полный код: https://codepen.io/asdasdasdasd111/pen/oNXbKxQ
Вам необходимо каждый слайдер инициализировать всего один раз. В вашем коде необходимо удалить или закомментировать первый вызов, т.к. он тоже активирует первый слайдер.
И если нужно добавить параметр isCycling к первому слайдеру, то следует сделать так:
Не совсем понятно как добавить дополнительный слайд. К примеру мне необходимо не 4, а 5 слайдов.
Спасибо Вам за такой гибкий слайдер.
Подскажите пожалуйста, если между слайдами ставить padding, то скрипт нормально отсчитывает насколько ему нужно сдвинуть слайд.
Но если между слайдами добавить вместо padding — margin, скрипт не воспринимает эти отступы и отступает на ширину самого слайда игнорируя margin. С-но все сдвигается не полностью.
Есть какой-то вариант заставить скрипт видеть margin между слайдами?:)
Создайте дополнительную обёртку для каждого слайда. После этого можно будет настраивать отступы с помощью margin:
Например, установим margin отступы по 10px:
Слайдер, отступы в котором для слайдов настроены с помощью margin
Установку положения слайда при желании также можно настроить с помощью техники сочетания относительного и абсолютного позиционирования:
а возможно ли сделать так чтобы под вашим слайдером были видны минимизированные фото, и средняя показывалась на слайдере.
спасибо за раннее в любом случае.
визуальный пример приведен ниже.
Евгений
src=«itchief.ru/assets/uploadify/b/f/6/bf6dc956cb54483da64e55d544a26d69.jpg» />
Его обязательно размещать? Если да, то где?
Функция само по себе ничего не делает, пока её не запустишь. Инициализация в этом случае – это и есть запуск этой функции. Эта функция может принимать различные аргументы. Первый аргумент обязательный. С помощью него необходимо задать элемент, который на странице будет каруселью. Другими словами, элемент, который содержит определённую HTML структуру этой карусели. Второй аргумент – это дополнительные настройки для карусели, указываются в формате объекта.
Многие компоненты, которые вы добавляете на страницу не нужно инициализировать, т.к. это действие уже прописано в самом скрипте, который вы подключение к странице. Чтобы скрипт узнал для каких элементов это нужно, в большинстве случаев к ним нужно просто добавить определённые атрибуты или классы. Но это в основном касается только простых компонентов, в которых нечего настраивать.
Этот компонент посложнее будет, он может принимать дополнительные параметры, а также возвращает объект, с помощью методов которого вы можете программно управлять им. Вы также можете самостоятельно инициализировать слайдер, который добавили на страницу через AJAX. Но вам никто не мешает сделать так, чтобы слайдеры активировались автоматически после загрузки DOM-страницы, например при наличии у них какого-нибудь класса или атрибута.
Инициализацию слайдера выполнять конечно нужно, если хотите чтобы он работал.
Обычно все скрипты подключают к странице перед закрывающим тегом body. Данный код необходимо разместить после подключения js-скрипта слайдера.
П.С. у вас шикарный навороченный сайт, сразу видна рука айтишника ) Особенно мне понравилось меню в мобильном с прокруткой. Было бы здорово, если бы вы написали статью, как это сделать, я думаю многим было бы интересно.
Как сделать так, чтобы слайдер был только в мобильной версии?
делаю вот такой элемент из 4 блоков в табах (табы сделал сегодня по вашей статье): itchief.ru/assets/uploadify/f/a/e/faee69f9007c44356567ddb3d7ef893c.jpg
В ПК версии я хочу, чтобы эти 4 блока оставались без карусели.
А вот в мобильной чтобы оставалось 1.5-2 блока, а остальное было справа в горизонтальной прокрутке, и чтобы заголовки табов тоже были в карусели. Вот так:
itchief.ru/assets/uploadify/1/b/2/1b25962e7742738e508fccdc30848d54.jpg
Это основной принцип, детальная реализация зависит от разметки.
Для реализации такой карусели возможно потребуется написать дополнительные CSS-правила для ПК-версии и мобильной, например с использованием медиа-запросов.
Чтобы блоки оставались без карусели на ПК-версии, можете просто активировать её только для мобильных устройств:
Буквально вчера открыл для себя Ваш сайт — и возрадовался. Т.к. уже с первых минут нашёл на нем то, что мне нужно (о слайдере)!
Прочитал все коментарии (чтобы не повторить вопрос), но не нашел ответа на следующий вопрос.
По умолчанию на слайдере есть один условный блок (одна картинка + текст к ней). И слайдер при нажатии на кнопки управления слайдером сдвигает один блок влево или вправо.
На моём варианте Вашего слайдера 4 блока. И моя задача состоит в том, чтобы при нажатии на кнопки управления соответсвующий сдвиг происходил на 4 блока (либо на ширину слайдера — не знаю, как правильно сформулировать, но, думаю, смысл Вы поняли). Подскажите, пожалуйста, как это реализовать. Заранее спасибо
Для этого можно в скрипт добавить следующее:
Т.е. определить количество слайдов, одновременно отображающихся на странице, а затем вызвать _transformItem это же количество раз.
Пример доступен в песочнице по этой ссылке.
Александр, очень не хочется прибегать к jquery, ваш скрипт понравился, но никак не удается его «допилить», чтобы получить нужный мне результат: ссылка на картинку.
Задача состоит реализовать карусель «по кругу» для мобильной версии сайта, очень похожую на ваш вариант «Слайдер с тремя активными слайдами», но отличие в том, что средняя картинка будет всегда центрироваться и от неё будет некоторое расстояние между ней и первой/третьей картинками. Не удается через js задать, чтобы элемент :nth-child(2) в динамике давал margin по бокам и накладывал прямоугольник с тенью на 1-ю и 3-ю картинку на экране.
Можете подсказать?
Я поместил ваш слайдер в отдельный блок, задал ему position: absolut, ширину 100%, background-size: 100%, а картинки привязал в css к div-ам через background: url("..").
Слайдер работает прекрасно. Но в параллельном блоке есть статичная информацию с меню, кнопками и текстом (два блока в родителе: слайдер и статичный блок с текстом поверх и кнопками). И у меня никак не получается подогнать грамотно высоту статичного блока под высоту слайдера. Пробовал через min-height: ...vw, но на ipad все уплывает. Подскажите, пожалуйста, как в таком случае указать высоту блока равную высоте параллельного блока от одного родителя с учетом того, что этот параллельный блок (слайдер) размещен через absolut…
Это сделать очень просто.
Для этого нужно добавить в слайдер после кнопок-стрелок следующий код:
В JavaScript из функции _addIndicators удалить всё кроме одной строчки:
Этот пример доступен по этой ссылке
Пример доступен по этой ссылке.
Код будет таким:
Ссылка
Это можно решить с помощью следующего кода:
Ссылка на пример
Есть вопрос:
как отключить зацикливание в данном слайдере?
Ссылка на пример в котором нет зацикливания.
вывожу изображение так
[[getImageList?
&tvname=`photos`
&tpl=`tplCarouselItem`
]]
код чанка
Код должен быть таким:
Чанк tplCarouselItem:
Кроме этого, конечно же не забыть подключить соответствующий CSS и JavaScript код.
В этом примере она отключена:
Если нужно её включить, то установите параметру isCycling значение true:
Столкнулся с такой проблемой: мне надо что бы на одной странице друг за другом шло несколько слайдеров, но когда сделал один и раскопировал его ниже, то работает только первый, а остальные (точная копия!) не хотят.
Подскажите, пожалуйста, в чём может быть дело и как это исправить?(
После этого их нужно инициализировать. Как это выполнить есть в этом комментарии.
Если через цикл, то показано как это выполнить в этом комментарии.
Добавил новый пример. Его можно посмотреть здесь.
Решила использовать Ваш плагин. Очень понравился.
Есть ли возможность в нем листать при помощи swipe при использовании в мобильных версиях?
Спасибо
Но столкнулась с небольшой проблемой: кнопки для перелистывания у меня должны выступать за блок .slider. Если переношу их в другое место или меняю overflow, то карусель перестает работать нужным образом. Подскажите, пожалуйста, в чем моя ошибка? Что я упускаю?
Заранее большое спасибо
Для того чтобы кнопки можно было вынести за пределы основной области карусели в неё необходимо просто добавить ещё одну обёртку. В этом примере показано как это можно сделать.
Спасибо большое. Все работает :)
Сам слайдер у меня заключен в следующую конструкцию:
отображается эта конструкция по нажатию на
CSS самого Popup такая:
.popup-checkbox,.popup{display:none;}
.popup{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;opacity:0;}
.popup:before{display:block;content:'';position:absolute;z-index:1;width:100%;height:100%;top:0;left:0;background-color:#000;opacity:.5;}
.popup-content{width:100%;max-width:1458px;height:1400px;position:absolute;z-index:2;top:30px;left:30px;margin:auto;background-color:#fff;border-radius:15px;padding:0px;-moz-box-sizing:border-box;box-sizing:border-box;background-image:url(popup-bg.jpg);}
.popup-shower{color:#00f;cursor:pointer;text-decoration:underline;}
.popup-shower:hover{color:#00a;text-decoration:underline;}
.popup-closer{position: fixed;top: 50px;right: 5%;color: #410a0a;font-size: 60px;display: block;width: 45px;height: 45px;line-height: 43px;text-align: center;border-radius: 50%;cursor: pointer;background-image: url(button-bg.jpg);font-weight: bold;box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.popup-closer:hover{color: #9c1b1b;}
.popup-checkbox:checked+.popup{opacity:1;display:block;}
Что интересно, если открыть popup, а затем перезагрузить страницу, то слайдер работает нормально.
Символы комментирования, как я понимаю, надо убрать было, но у меня как в исходном варианте, так и с убранными все равно та же проблема остается, т.е. работать начинает только после перезагрузки страницы с активированным блоком :(
Может быть нюансы с тем, где именно код нужно размещать?
Ссылка на пример.
Как это выполнить можно посмотреть здесь.
Удалил эту фичу, вот ссылка на пример.
Спасибо! Поправил этот момент в этих примерах.
Вот пример слайдера с изображениями.
jquery.min.js
popper.min.js
bootstrap.min.js
jquery.fancybox.min.js
browser.min.js
breakpoints.min.js
и так далее… + 3 файла с CSS
Как это правильно сделать?
И маленький, но не обязательный вопрос, который может пригодиться в будущем:
Возможно ли в конфиг вывести количество слайдов которое меняется за раз, к примеру отображается 3 слайда на экране, и я хочу листать тоже по 3. Было бы замечательно сделать это аналогично:
_states = [
{ active: false, minWidth: 0, count: 1 },
{ active: false, minWidth: 576, count: 2 },
{ active: false, minWidth: 992, count: 3 },
{ active: false, minWidth: 1200, count: 4 },
]
Т.е. в зависимости от экрана, но отдельной настройкой, т.к. может понадобиться листать по 2 когда видно 3.
P.S. Еще раз огромное спасибо за ваш труд!
Просто вызовите функцию _transformItem(direction); столько раз сколько нужно.
Спасибо огромное)
Спасибо большое!
Огромное вас спасибо
Классные слайдеры
Что бы отобразить два слайдера нужно по вашему добавить id=«slider-1» id=«slider-2»
и так же указать в скрипте
var slider1 = multiItemSlider('#slider-1');
var slider2 = multiItemSlider('#slider-2');
Но мне нужно что бы слайдер работал и менялся в зависимость от категории, что нужно изменить в скрипте или добавить?.. Работает только первый слайдер, а остальные нет.
То есть id=«slider-1» где 1 это рубрика, а как это сделать что бы указать в скрипте.
Спасибо