Курс по JavaScript от Хекслет

Простой адаптивный слайдер для сайта на чистом JavaScript

Александр Мальцев
Александр Мальцев
183K
256
Простой адаптивный слайдер для сайта на чистом JavaScript
Содержание:
  1. Демо слайдера SimpleAdaptiveSlider
  2. Загрузка и подключение слайдера
  3. Инициализация и настройка слайдера
  4. Методы слайдера
  5. Примеры использования слайдера
  6. Краткое описание исходных кодов и принципа работы
  7. Комментарии

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

Демо слайдера SimpleAdaptiveSlider

Демо слайдера SimpleAdaptiveSlider без зацикливания:

Простой адаптивный слайдер для сайта на чистом CSS и JavaScript без зацикливания

Посмотреть

Демо слайдера SimpleAdaptiveSlider с бесконечной прокруткой (с зацикливанием):

Простой адаптивный слайдер для сайта на чистом CSS и JavaScript с бесконечной прокруткой

Посмотреть

Загрузка и подключение слайдера

SimpleAdaptiveSlider - это простой адаптивный слайдер для сайта, написанный автором этого ресурса на чистом CSS и JavaScript.

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

SimpleAdaptiveSlider имеет следующие характеристики:

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

Коды слайдера состоят из CSS и JavaScript файлов:

Скачать файлы SimpleAdaptiveSlider можно по этим ссылкам или посредством загрузки всего проекта ui-components с GitHub.

Для скачивания файлов через ссылки, нужно открыть страницу и выбрать в контекстном меню браузера пункт «Сохранить как»:

Сохранение JavaScript кода в js-файл через пункт контекстного меню браузера Сохранить как

В проекте «itchief/ui-components» этот слайдер расположен в папке «simple-adaptive-slider».

Для подключения слайдера к странице необходимо:

1. Подключить CSS и JavaScript файлы к странице:

<!-- Подключаем CSS слайдера -->
<link rel="stylesheet" href="simple-adaptive-slider.css">
<!-- Подключаем JS слайдера -->
<script defer src="simple-adaptive-slider.js"></script>

2. Вставить в необходимое место страницы следующую разметку слайдера (html код):

<!-- Разметка слайдера (html код) -->
<div class="itcss">
  <div class="itcss__wrapper">
    <div class="itcss__items">
      <div class="itcss__item">
        <!-- Контент 1 слайда -->
      </div>
      <div class="itcss__item">
        <!-- Контент 2 слайда -->
      </div>
      <div class="itcss__item">
        <!-- Контент 3 слайда -->
      </div>
      <div class="itcss__item">
        <!-- Контент 4 слайда -->
      </div>
    </div>
  </div>
  <!-- Стрелки для перехода к предыдущему и следующему слайду -->
  <a class="itcss__control itcss__control_prev" href="#" role="button" data-slide="prev"></a>
  <a class="itcss__control itcss__control_next" href="#" role="button" data-slide="next"></a>
</div>

В этой разметке карусель состоит из 4 слайдов. Контент слайдов необходимо помещать в элементы «.itcss__item».

Инициализация и настройка слайдера

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

Инициализация слайдера осуществляется посредством создания нового экземпляра объекта типа ItcSimpleSlider:

document.addEventListener('DOMContentLoaded', () => {
  // инициализация слайдера
  new ItcSimpleSlider('.itcss', {
    loop: true,
    autoplay: false,
    interval: 5000,
    swipe: true,
  });
});

В качестве первого аргумента необходимо передать селектор корневого элемента слайдера. Для примера выше это можно выполнить посредством селектора .itcss.

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

<script>
document.addEventListener('DOMContentLoaded', () => {
  // инициализация 1 слайдера с нужными настройками
  new ItcSimpleSlider('#slider-1', {
    loop: true,
    autoplay: false,
    interval: 5000,
    swipe: true,
  });
  // инициализация 2 слайдера с нужными настройками
  new ItcSimpleSlider('#slider-2', {
    loop: true,
    autoplay: false,
    interval: 5000,
    swipe: true,
  });
});
</script>

<!-- 1 слайдер -->
<div class="itcss" id="slider-1">...</div>
<!-- 2 слайдер -->
<div class="itcss" id="slider-2">...</div>

Настройка слайдера осуществляется с помощью 2 аргумента. Его нужно передавать в формате объекта и он имеет 4 ключа:

  • loop - отвечает за зацикленность; по умолчанию этот ключ имеет значение true; если слайдер не должен быть бесконечным, т.е. быть без зацикливания loop необходимо установить значение false;
  • autoplay - включает автоматическую смену слайдов; время через которое это необходимо выполнять определяется ключом interval;
  • interval - время в миллисекундах через которое нужно автоматически переключать слайды; по умолчанию - 5000, т.е. 5 секунд;
  • swipe - определяет можно ли слайды менять свайпом; по умолчанию включено.

Значение ключей во 2 аргументе по умолчанию:

new ItcSimpleSlider('.itcss', {
  loop: true,
  autoplay: false,
  interval: 5000,
  swipe: true,
});

Пример инициализация слайдера без зацикливания:

new ItcSimpleSlider('.itcss', {
  loop: false,
});

Пример инициализация слайдера с автоматической сменой слайдов через 10 секунд:

new ItcSimpleSlider('.itcss', {
  autoplay: true,
  interval: 10000,
});

Методы слайдера

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

  • next - перейти к следующему слайду;
  • prev - перейти к предыдущему слайду;
  • autoplay - включение и выключение автоматической смены слайдов;

Чтобы эти методы были доступны нужно при инициализации слайдера сохранить ссылку на созданный экземпляр объекта ItcSimpleSlider в некоторую переменную:

const slider = new ItcSimpleSlider('.itcss', {
  loop: false,
});

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

slider.next(); // переход к следующему слайду
slider.prev(); // переход к предыдущему слайду
slider.autoplay(); // включить автоматическую смену слайдов
slider.autoplay('stop'); // выключить автоматическую смену слайдов

Пример с использованием методов слайдера

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

<!-- Разметка слайдера -->
<div class="itcss">
  <div class="itcss__wrapper">
    <div class="itcss__items">...</div>
  </div>
</div>
<!-- Новые кнопки -->
<div class="btn-wrapper">
  <button class="btn btn-prev">PREV</button>
  <button class="btn btn-next">NEXT</button>
</div>

Для отключения индикаторов добавим в CSS:

.itcss__indicators {
  display: none;
}

Напишем, скрипт, который будет при нажатии на кнопки выполнять переход на предыдущий или следующий item:

document.addEventListener('DOMContentLoaded', () => {
  // инициализация слайдера
  const slider = new ItcSimpleSlider('.itcss');
  // назначим обработчик при нажатии на кнопку .btn-prev
  document.querySelector('.btn-prev').onclick = () => {
    // перейдём к предыдущему слайду
    slider.prev();
  }
  // назначим обработчик при нажатии на кнопку .btn-next
  document.querySelector('.btn-next').onclick = () => {
    // перейдём к следующему слайду
    slider.next();
  }
});
Слайдер, в которой мы добавили свои кнопки и отключили исходные

Посмотреть

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

1. Использование ItcSimpleSlider для ротации изображений:

Слайдер изображений для сайта на CSS и JavaScript

Посмотреть

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

Слайдер для текста на чистом CSS и JavaScript

Посмотреть

3. Создание слайдера для отзывов:

Слайдер для отзывов на чистом CSS и JavaScript

Посмотреть

4. Настройка слайдера для ротации товаров:

Слайдер товаров для сайта на чистом CSS и JavaScript

Посмотреть

5. Слайдер с миниатюрами:

Слайдер с миниатюрами для сайта

Посмотреть

6. Слайдер, в котором при клике по кнопке расположенной в левом нижнем углу открывается ещё один слайдер в popup:

Посмотреть

Краткое описание исходных кодов и принципа работы

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

<div class="itcss">
  <div class="itcss__wrapper">
    <div class="itcss__items">
      <div class="itcss__item">
        ...
      </div>
      <div class="itcss__item">
        ...
      </div>
      <div class="itcss__item">
        ...
      </div>
      <div class="itcss__item">
        ...
      </div>
    </div>
  </div>
  <a class="itcss__control itcss__control_prev" href="#" role="button"></a>
  <a class="itcss__control itcss__control_next" href="#" role="button"></a>
</div>

В разметке корневой элемент - это тег <div> с классом itcss.

Внутри него находятся:

  • .itcss__wrapper - wrapper (обёртка для слайдов);
  • 2 элемента .itcss__control - ссылки, оформленные в виде кнопок для перехода соответственно к предыдущему и следующему слайду;
  • точки или другими словами индикаторы .itcss__indicators - добавляются динамически посредством JavaScript кода;

Обертка .itcss__wrapper содержит внутри .itcss__items, а он в свою уже очередь непосредственно сами item (слайды). Это элементы - .itcss__item.

Индикаторы (.itcss__indicators) выполнены в виде нумерованного списка. Каждый элемент li внутри него содержит атрибутом data-slide-to. В нём содержится индекс слайда. Он используется в JavaScript коде и определяет слайд на который нужно перейти в случае нажатия на него. Активный индикатор отмечается посредством класса itcss__indicator_active.

Кнопки «назад» и «вперед» размечены с помощью элемента a.

Структура слайдера, построенного на CSS и JavaScript

В определённый момент времени в слайдере отображается только один item, который не сдвинут относительно .itcss__wrapper. Все другие слайды сдвинуты. Скрытие слайдов выходящих за пределы .itcss__wrapper осуществляется с помощью свойства overflow: hidden.

.itcss__wrapper {
  overflow: hidden;
}
Изображение, на котором отображено как пользователю в некоторый момент времени показывается только один слайд

Перемещение item выполняется с помощью CSS трансформации. Для этого к .itcss__items и .itcss__item в нужные моменты времени добавляется CSS-свойство transform: translateX(...) с нужным значением.

Например, когда к .itcss__items добавляется transform: translateX(...) со значением -100%, то браузер осуществляет переход к следующему слайду, а если наоборот, 100% - то к предыдущему.

Изображение, на котором отображено как пользователю в некоторый момент времени показывается только один слайд

Анимация переход осуществляется помощью CSS свойства transition:

.itcss__items {
  transition: transform 0.5s ease;
}

Скрипт слайдера написан на «чистом» JavaScript без использования jQuery и других каких-либо библиотек.

Он имеет следующую укрупнённую структуру:

class ItcSimpleSlider {
  // конструктор
  constructor(target, config) {
    // ...
  }
  // добавляет класс к активным элементам и управляет видимостью кнопок управления
  _setActiveClass() {
    // ...
  }
  // выполняет смену слайдов
  _move(useTransition) {
    // ...
  }
  // функция для перемещения к слайду по индексу
  _moveTo(index, useTransition) {
    // ...
  }
  // метод для автоматической смены слайдов
  _autoplay = function (action) {
    // ...
  }
  // добавляет в разметку индикаторы
  _addIndicators() {
    // ...
  }
  // refresh extreme values (обновляет значения переменных, содержащих экстремальные значения слайдов)
  _refreshExtremeValues() {
    // ...
  }
  // balancing items (уравновешивает слайды (для зацикленности)
  _balancingItems() {
    // ...
  };
  // adding listeners (назначаем обработчики для событий)
  _addEventListener() {
    // ...
  }
  // перейти к следующему слайду
  next() {
    // ...
  }
  // перейти к предыдущему слайду
  prev() {
    // ...
  }
  // управление автоматической сменой слайдов
  autoplay(action) {
    // ...
  }
  moveTo(index, useTransition) {
    // ...
  }
}

Комментарии: 256

  1. Timur
    Timur
    2022-11-11 13:16:59
    Здравствуйте! Отличный инструмент, спасибо Вам за вашу работу и за помощь людям. Но я столкнулся с проблемой которую не могу решить…
    Uncaught TypeError:
    Cannot read properties of null (reading 'querySelector')
    at new ItcSimpleSlider (simple-adaptive-slider.js:44:32)
    itchief.ru/assets/uploadify/6/5/4/6548dc7e9361bf55e4405b8d23f1b27c.png
    itchief.ru/assets/uploadify/2/1/0/21065c35581a78503fa54f1671552dbb.png
    Использую Django
    Бал бы благодарен если бы помогли разобраться. Так как я не силён в JS
  1. Timur
    Timur
    2022-11-11 14:11:53
    Попробовал поэкспериментировать с «3. Создание слайдера для отзывов:» из ваших примеров, отображение не корректное но при этом мышкой можно двигать группу слайдов, консоль браузера ошибку не выдаёт. Кстати: для реализации данного слайда добавил simple-adaptive-slider.dev.min.js из вашего ответа за 2022-02-14 14:32:29.
    itchief.ru/assets/uploadify/5/a/5/5a527378fa2ce6bbf2d20b0a6b9ec7d7.png
    itchief.ru/assets/uploadify/4/7/f/47f2b4fbb157d15ae41f298be1a6c638.png

    Создание слайдера для отзывов — для меня более интересный было-бы здорово если вы поможете именно с ним.
  • Александр Мальцев
    Александр Мальцев
    2022-11-11 15:09:39
    Здравствуйте! Спасибо за отзыв! Попробуйте подключить скрипты внизу страницы перед закрывающим тегом body.
  • Timur
    Timur
    2022-11-11 16:45:21
    Я попробовал это первым делом, найдя такое решение на просторах интерната. Но к сожалению, это не меняет отображение слайдера, ошибка уходит, но слайдер также отображается не корректно.
  • Александр Мальцев
    Александр Мальцев
    2022-11-24 07:50:18
    Может какие-то стили переопределяются, попробуйте CSS-файл подключить в конце после всех других CSS-файлов.
  • Alko
    Alko
    2022-10-04 11:20:02
    Доброго дня!
    Александр, на тач устройствах при взаимодействии пальца в области слайдера, вертикальный скролл страницы не работает. Не получается скролить страницу вверх или вниз. Не совсем понимаю как разрешить этот баг.
    1. Arahnid-8
      Arahnid-8
      2022-09-02 18:19:24
      здравствуйте, я бы хотел узнать как можно повторно инициализировать скрипт по нажатию на кнопку? я добавил слайдер на страницу товара в опенкарт 3, при нажатии на опцию меняются фотографии, и если у опций разное количество изображений, то происходит конфликт. по этому надо повторно инициализировать слайдер, после каждого нажатия
      1. Александр Мальцев
        Александр Мальцев
        2022-09-07 13:46:46
        Здравствуйте!
        Добавил в код метод reset, который переинициализирует слайдер:
        const slider = new ItcSimpleSlider('.itcss', { loop: true, swipe: true });
        // сброс слайдера
        slider.reset();
      2. Arahnid-8
        Arahnid-8
        2022-09-07 18:54:21
        спасибо, но слайдер не перезагружается полностью, он сбрасывается на первый слайд
      3. Arahnid-8
        Arahnid-8
        2022-09-08 11:17:40
        Нашел в чем проблема. Слайдер, после сброса, инициализируется быстрее, чем выполняется скрипт по подгрузке изорбражений опции. Можно как то отсрочить сброс слайдера на несколько милисекунд?
      4. Александр Мальцев
        Александр Мальцев
        2022-09-08 14:54:56
        Лучше конечно так не делать, а выполнить slider.reset() после загрузки изображений.
        Если все таки нужно через определенное время, то используйте setTimeout.
      5. Arahnid-8
        Arahnid-8
        2022-09-08 15:00:39
        спасибо, решил вот таким образом. Работает))) спасибо за ваши труды, отличный слайдер

        const slider = new ItcSimpleSlider('.itcss', { loop: true, autoplay: false, interval: 5000, swipe: true });
        // назначим обработчик при нажатии на кнопку .input-option-r
        var button = document.querySelector('.input-option-r');
        button.addEventListener(«click», () => {
        // сброс слайдера
        setTimeout(() => {
        slider.reset();
        }, 300)
        });

        И еще добавлю прилоадер, для красоты
      6. Arahnid-8
        Arahnid-8
        2022-09-10 10:08:31
        Александр, последовал вашему совету и сделал сброс после загрузки изображений, и еще по вашей теме прилоадер прикрутил)
      7. Александр Мальцев
        Александр Мальцев
        2022-09-16 12:08:21
        Молодец! Хорошее решение!
    2. Михаил. Ш.
      Михаил. Ш.
      2022-08-25 17:20:59
      Здравствуйте, возможно ли реализовать с эти слайдером такое?

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

      Возможно задача слишком сложная чтобы про неё просто так спрашивать, но это самое логичное место куда можно было написать запрос.
      1. Arahnid-8
        Arahnid-8
        2022-09-02 18:22:23
        видел подобное в swiper.js, там много возможностей, но для моей задачи подошел только слайдер из этой темы. Перебрал кучу вариантов, остановился на simple adaptive slider
    3. Valdiss
      Valdiss
      2022-07-20 10:24:10
      ксати, а чем отличается chiefSlider от simple-adaptive-slider?
      1. Александр Мальцев
        Александр Мальцев
        2022-07-20 13:11:57
        1. Количеством активных элементов. Здесь один активный элемент, том может быть несколько.
        2. Свайп здесь дорабатывался, он намного лучше чем там. Может ещё какие-то вещи по мелочам, точно уже не помню…
        3. Изначально код был разный, вообще по разному работали. Но некоторые вещи перенёс и код стал между ними немного ближе.
    4. Valdiss
      Valdiss
      2022-07-20 06:21:44
      кстати, интересно, а сложно переделать переход слайдера? Т.е. вместо transform translate(X) чтобы слайд не перемещался в сторону, а применить классический транзишн, эффект затухания из одного в другой, возможно через opacity? Или это рушит всю логику скрипта? Было бы здорово включить такую возможность на будущее, выбирать варианты смены слайдов. Хотя понимаю, что цель у данного — минимализм, но всегда со временем хочется большего и есть риск превратиться в слайдер революшн ))
      1. Александр Мальцев
        Александр Мальцев
        2022-07-20 13:14:10
        Да, конечно такое можно добавить. Как-то хотел, но всё время откладывал. Но надо посмотреть как это сделать лучше, чтобы не городить костыль.
      2. Bigbull
        Bigbull
        2022-07-20 14:12:49
        Было бы круто сделать переход через opacity)))
    5. Bigbull
      Bigbull
      2022-07-19 16:53:32
      Считайте меня идиотом но у меня не получается подключить скрипт, все делаю по инструкции, мне нужно только автоплей на два слайда, без зацикливания но авто плей не срабатывает
      1. Bigbull
        Bigbull
        2022-07-19 18:08:15
        Разобрался, проблема была в том что я не добавил кнопки и js начал ругаться, удалил функции кнопок и все заработало
      2. Bigbull
        Bigbull
        2022-07-19 20:28:22
        Заметил интересную проблему, в примере translateX идет в % а в реале в px и получается коряво, не могу найти где изменить
      3. Александр Мальцев
        Александр Мальцев
        2022-07-20 13:21:00
        Скачай файлы с Github должно быть в px, раньше было в процентах. Эти примеры просто нужно обновить. В процентах получаются погрешности при округлении, если в операционной системе используется масштаб не 100%. Так как браузер все равно считает в px, то получаются расхождения.
      4. Bigbull
        Bigbull
        2022-07-20 14:12:15
        Спасибо, уже разобрался)
    6. Виталий Алехин
      Виталий Алехин
      2022-07-18 12:00:55
      Добрый день, Александр!
      Если реализовать быстренько запоминание номера при закрытии, то слайдер ( В «Хроме»:) ) может выглядеть так:
      slider.mirairadosti.ru/
      Код в _setActiveClass():

      Код в _addEventListener():
      1. Виталий Алехин
        Виталий Алехин
        2022-07-18 13:06:10
        Правда, в этом случае, «освободиться» от преследующего тебя слайдера и выйти на начало можно только радикально:
        «Очистить историю»…
      2. Александр Мальцев
        Александр Мальцев
        2022-07-18 14:33:36
        Добрый день! Отлично, для очистки можете какую-нибудь кнопку добавить, которая будет удалять ключ exit из LocalStorage.
      3. Виталий Алехин
        Виталий Алехин
        2022-07-18 20:13:09
        Запал кончился — сойдет и так :).
        Буду теперь посматривать за текущими изменениями.
        Вообще, хорошо бы ещё динамически изменять размер шрифта, если текст не полностью вмещается, но это — уже совсем другая история… :)
    7. Valdiss
      Valdiss
      2022-07-14 16:05:51
      Спасибо за плагин! У меня вопрос — никак не могу разобраться, как у него работают методы next и prev/ Чтобы добавить класс к тексту, например, для анимации, как в слике, типа
      
          }).on('beforeChange', function(event, slick, currentSlide, nextSlide){
                  $('.top-slider .table').removeClass('active');
              }).on('afterChange', function(event, slick, currentSlide, nextSlide){
                  $('.top-slider .table').addClass('active');
              });
      
      1. Виталий Алехин
        Виталий Алехин
        2022-07-15 12:32:56
        Может быть так:
        var x=new ItcSimpleSlider(".itcss");
        x.next()
      2. Valdiss
        Valdiss
        2022-07-17 19:07:08
        да нет, с определением метода всё понятно )) В докумен-ции это расписано. А вот как, например, в слике, делаю
        
        $('.top-slider').slick({
                 ...     
                }).on('beforeChange', function(event, slick, currentSlide, nextSlide){
                    $('.top-slider .table').removeClass('active');
                }).on('afterChange', function(event, slick, currentSlide, nextSlide){
                    $('.top-slider .table').addClass('active');
                });
        
        Т.е. реагировать на определенные действия. Например, после прокрутки к next слайду включить обработчик события «afterChange». Ну или же, например, .on('swipe', function(event, slick, direction).
        JS только учу, поэтому, не понимаю пока… как сделать это здесь
      3. Виталий Алехин
        Виталий Алехин
        2022-07-18 08:31:28
        Тогда нужно ждать ответа Александра — с jquery не знаком.
        Мне кажется нужно задействовать пользовательские события — они и «отреагируют» на что-угодно :).
      4. Valdiss
        Valdiss
        2022-07-18 12:47:29
        да jquery то как-раз и не нужен. Это просто я пример из slick взял. Там вот всё понятно, у меня текст через присвоение класса анимируется при каждом nextSlide, а здесь — не могу понять, как сделать. Ок, может Александр найдёт время ))
      5. Александр Мальцев
        Александр Мальцев
        2022-07-18 14:13:41
        Пожалуйста! Добавить можно, но зачем? Используйте родительский класс .itcss__item_active и привязывайте всё через него.
        Например:
        @keyframes fadeIn {
          0% {
            opacity: 0;
            transform: translateY(50px);
          }
          100% {
            opacity: 1;
            transform: none;
          }
        }
        .itcss__item_active .itcss__text {
          animation-name: fadeIn;
          animation-duration: 2s;
        }
        Сам пример: открыть
        Или нужно что-то другое?
      6. Valdiss
        Valdiss
        2022-07-18 17:23:07
        а что, так можно было?! ))) Да, да, именно это. Т.е. вот такое нужно было — panel-pribor.ru Но тянуть тяжеловесный слик не хотелось. Теперь, в принципе, всё ясно, спасибо!
        А вот как ещё убрать запрет на смену слайдов, когда курсор находится на слайде? Потому как при высоте слайда в 100vh перелистывание практически прекращается.
      7. Valdiss
        Valdiss
        2022-07-20 06:13:50
        а вот, сам нашёл
        function onMouseEnter() {
              this._autoplay("stop");
            }
        
            function onMouseLeave() {
              if (this._config.loop) {
                this._autoplay();
              }
            }
      8. Valdiss
        Valdiss
        2022-07-20 10:19:14
        кстати, осталась мелочь, но не могу побороть никак. Хотя движение курсора над слайдами теперь не прерывает autoplay, но если кликнуть на картинку, анимация перезапускается, т.е. похоже, как-будто класс
        .itcss__item_active
        запускается заново по клику — вот
      9. Александр Мальцев
        Александр Мальцев
        2022-07-20 13:49:57
        Закомментируй в функции onSwipeStart строчку this._autoplay('stop'):
        function onSwipeStart(e) {
          // this._autoplay("stop");
      10. Valdiss
        Valdiss
        2022-07-21 05:58:52
        К сожалению, не помогло (( В примере видно — закомментил, но всё-равно, увы
      11. Александр Мальцев
        Александр Мальцев
        2022-07-21 06:05:59
        Тогда ещё в onClick:
        function onClick(e) {
          const $target = e.target;
          // this._autoplay('stop');
          ... 
          /* if (this._config.loop) {
            this._autoplay();
          } */
        }
      12. Valdiss
        Valdiss
        2022-07-22 13:31:23
        а вот теперь получилось! Спасибо!!! Кстати, это можно добавить в инструкцию )
    8. Виталий Алехин
      Виталий Алехин
      2022-07-14 14:20:09
      Добрый день, Александр!
      Думается, хорошо бы дополнить автосохранение номера слайда при закрытии браузера произвольным сохранением понравившихся слайдов, например так:

      Тогда «меню сохранения » может выглядеть так:

      Прошу прощения за очередную «идею».
      1. Виталий Алехин
        Виталий Алехин
        2022-07-13 15:23:08
        Здравствуйте, Александр!
        Пишу вновь по поводу пассивного прослушивателя для сенсорных событий.
        Да, Вы включили его «согласно науке», но что нам это дало?
        У себя на планшете вижу, что при увеличении масштаба весь слайдер при свайпе начинает «шарахаться» от одной стороны в другую вместо того, чтобы менять слайды.
        Я уже писал, что не очень понял все описание этого самого прослушивателя за исключением особенностей его подключения. Он замечательно работает, давая полный простор прокрутке, но зато мешает работе свайпа.
        Читаю имеющуюся у меня документацию:
        " Передавая в {passive: true}качестве третьего аргумента, мы указываем браузеру, что обработчик не отключит прокрутку через preventDefault().". Т.е. получается, что мы имеем хорошую «прокрутку» вместо хорошего свайпа.
        Но зачем в данном случае нужна прокрутка на поле слайдера, напротив, нам нужно «листать», а не прокруткой заниматься.
        Мне кажется нужно убрать этот пассивный прослушиватель из кода (он раньше был отключен — { passive: false }).
        Прошу проверить мои подозрения: увеличьте масштаб и попробуйте «полистать».
        1. Александр Мальцев
          Александр Мальцев
          2022-07-14 13:34:12
          Добрый день, Виталий! Да, зря его поменял на true. Просто забыл почему его так поставил и тестирование тщательное не провел. Поправил, спасибо, за тестирование.
      2. Виталий Алехин
        Виталий Алехин
        2022-07-12 17:10:43
        Добрый день!
        Прошу прощения за «генерацию» идей, но… у меня опять идея :) для большого количества слайдов:
        вместо панели индикации поместить чекбокс, окошечко, кнопку перехода:

        Алгоритм работы:
        1) при выходе из браузера сохраняем номер слайда в локальном хранилище; данные о номере берем-

        2) при загрузке смотрим чекбокс:
        если включен, то подгружаем в

        и переходим к слайду 188 :),
        если не включен, то ничего не подгружаем и никуда не переходим.
        3) если введено число вручную, то подгружаем согл.п2 и переходим по щелчку кнопки.
        1. Александр Мальцев
          Александр Мальцев
          2022-07-13 14:18:19
          Рад видеть! Спасибо за отличную идею.
      3. Виталий Алехин
        Виталий Алехин
        2022-07-08 14:33:57
        Добрый день, Александр!
        1. Хорошо бы дополнить скрипт кодом позволяющим автоматически выделять предложения из неограниченного их количестваи вставлять в разметку: никаких дел с кодом, просто вставляем различные тексты в нужное место и… все.
        Знаю как — если проявите интерес, скажите. В противном случае время отнимать не буду.
        Индикацию, в этом случае, придется исключить или же переписать.
        2. Хорошо бы также иметь папку для картинок, а скрипт сам бы проверял наличие, «брал» бы оттуда картинки и вставлял в код.
        Пока не знаю как, но что-то мне подсказывает, что все будет аналогично во многом пункту 1.
        Итог: полная автоматизация без работы с кодом. Пока не знаю как, но что-то мне подсказывает, что все будет аналогично п.1 (в смысле: «положил» картинки и… все :) )
        1. Виталий Алехин
          Виталий Алехин
          2022-07-08 14:49:42
          P.S.
          Пробу, для начала, сделал в варианте электронной книги (поэтому все такое черное и белое):
          mirairadosti.ru/slider/ — здесь предложений сотни.
          Пароль и логин:'slider'
        2. Виталий Алехин
          Виталий Алехин
          2022-07-08 15:15:36
          Да, предложения осмысленные только в начале, остальные без редакции — все это было начитано на микрофон, а программа распознавания понимает далеко не все…
        3. Виталий Алехин
          Виталий Алехин
          2022-07-10 15:42:09
          Поправил — с текстами все работает нормально (заголовок все же общий для всех слайдов).
          В тексте, если установить:
          1) «пробел „+“восклицательный знак» получим перевод строки
          2) «звездочка» — получим начало для нового, последующего слайда (до следующей «звездочки»).
          Например:
          "… Обличать не человека, а грех тогда будет польза.!
          Чем отличается осуждение от обличения: осуждение – грех (страсть).!
          Любая страсть как червь: яблоко снаружи красивое, а внутри съедено.*
          Жить сейчас: не в прошлом или будущем.*..."
          Результат — см. первые 2 слайда.
        4. Александр Мальцев
          Александр Мальцев
          2022-07-11 14:16:04
          Здравствуйте, Виталий!
          Да, конечно, интересно. Если поделитесь решением, то не только я, но и другие пользователи сайта будут рады.
        5. Виталий Алехин
          Виталий Алехин
          2022-07-11 15:08:47
          Добрый день, Александр!
          Касательно п.1:
        6. Виталий Алехин
          Виталий Алехин
          2022-07-11 15:20:01
        7. Александр Мальцев
          Александр Мальцев
          2022-07-11 15:27:11
          Спасибо! Почему не через AJAX? Или предварительно мы получаем весь текст через AJAX и кладём его #li.
        8. Виталий Алехин
          Виталий Алехин
          2022-07-11 15:27:52
        9. Виталий Алехин
          Виталий Алехин
          2022-07-11 15:30:54
          Текст прямо в HTML — не на сервере.
      4. Виталий Алехин
        Виталий Алехин
        2022-07-06 19:54:43
        Добрый день!
        Не нашел применения пользовательскому событию 'active.itc.slider' — может быть лучше удалить:
        1. Виталий Алехин
          Виталий Алехин
          2022-06-29 11:48:30
          Добрый день!
          Обнаружил, что при отсутствии цикла (loop: false) на краях диапазона слайдов слайдер категорически «отказывается» возвращать на прежнее место крайний слайд (чтобы это увидеть нужно установить static SWIPE_THRESHOLD = 1;):

          Для этого устранения недостатка прошу рассмотреть следующий вариант решения проблемы:
          1. Александр Мальцев
            Александр Мальцев
            2022-06-29 14:28:29
            Привет! Спасибо за найденную ошибку и решение. Сделал немного по-другому.
        2. Виталий Алехин
          Виталий Алехин
          2022-06-28 12:10:32
          Добрый день!
          Александр, не лучше ли переписать здесь код для понятности (ведь по сути одно и тоже):

          Или я недопонял чего-то?
          1. Александр Мальцев
            Александр Мальцев
            2022-06-30 14:06:29
            Рад видеть! Да, так будет лучше.
        3. Виталий Алехин
          Виталий Алехин
          2022-06-23 15:43:30
          Добрый день!
          Силился понять работу кода пассивного прослушивателя — основу уразумел, но эти «window.addEventListener('testPassiveListener', null, opts);» и иже с ними, ну, никак…
          По ходу, в части касающейся, заметил несоответствие кода слайдера материалам инета по данному вопросу:
          itchief.ru/assets/uploadify/4/1/c/41c36741e5c5fe06f1e30ecda433738d.jpg
          1. Виталий Алехин
            Виталий Алехин
            2022-06-23 17:46:04
          2. Александр Мальцев
            Александр Мальцев
            2022-06-25 03:06:07
            Здравствуйте! Спасибо, поправил! Дополнительно проверку вынес в отдельную функцию.
        4. Виталий Алехин
          Виталий Алехин
          2022-06-20 18:48:41
          Здравствуйте, Александр!
          Кажется, в коде есть небольшая «очепятка»:
          itchief.ru/assets/uploadify/6/3/e/63ee04a8194f15dea1b5921866aedbeb.jpg
          1. Александр Мальцев
            Александр Мальцев
            2022-06-25 03:24:55
            Добрый день! Спасибо, поправил.
        5. Виталий
          Виталий
          2022-06-02 23:17:03
          Александр, добрый вечер!

          У меня проблема с индикатором в правом верхнем углу. Никак не могу понять, как его убрать.
          На сколько я понял, в css файле нужно указать в разделе

          .itcss__indicators {
             ...
            display: none;
          }
          или при инициализации слайдера
          <script>
              document.addEventListener('DOMContentLoaded', function () {
                // инициализация слайдера
                var slider = new ItcSimpleSlider('.itcss', {
                  loop: true,
                  autoplay: true,
                  swipe: true,
                  <b>indicators: false</b>
                });
              });
            </script>
          Но в любом браузере у меня индикатор слайда(1,2,3,4) в правом верхнем углу остается.

          С уважением, Виталий!
          1. Александр Мальцев
            Александр Мальцев
            2022-06-03 15:18:53
            Здравствуйте!
            Это делается с помощью CSS. Нужно просто удалить эти строчки:
            .slider__items {
              counter-reset: slide;
            }
            .slider__item {
              counter-increment: slide;
            }
            .slider__item>div::before {
              content: counter(slide);
              position: absolute;
              top: 10px;
              right: 20px;
              color: #fff;
              font-style: italic;
              font-size: 32px;
              font-weight: bold;
            }
            Больше ничего настраивать не нужно. Индикаторы – это то что расположено в нижней части слайдера.
          2. Виталий
            Виталий
            2022-06-03 17:20:28
            А про этот код я совсем забыл.
            Спасибо, работает!
        6. Виталий Алехин
          Виталий Алехин
          2022-05-26 21:09:59
          Здравствуйте, Александр!
          Разбираюсь в коде. Не лучше ли убрать строчку кода:
          itchief.ru/assets/uploadify/0/9/0/090fc1306edc92b12b4017b62da33538.jpg
          1. Александр Мальцев
            Александр Мальцев
            2022-05-30 12:50:16
            Здравствуйте!
            Если эту строчку убрать, то тогда направление смены слайда будет по последнему значению this._direction, а не указанному.
          2. Виталий Алехин
            Виталий Алехин
            2022-05-30 14:12:00
            Добрый день!
            Да, и в этом случае можно управлять направлением смены слайдов самому пользователю слайдера, это ведь удобно — щелкать по 2 кнопкам, а не программировать в редакторе JS кода.
          3. Александр Мальцев
            Александр Мальцев
            2022-05-30 14:32:51
            Возможно и так.
        7. Виталий Алехин
          Виталий Алехин
          2022-05-17 16:57:13
          После подключение стилей…
          После подключения стилей…
          1. Александр Мальцев
            Александр Мальцев
            2022-05-30 14:33:48
            Спасибо!
        8. Виталий Алехин
          Виталий Алехин
          2022-05-17 16:55:32
          В этой разметки карусель…
          В этой разметке карусель…
          1. Александр Мальцев
            Александр Мальцев
            2022-05-30 14:34:09
            Рад, что помогаете!
        9. Monika
          Monika
          2022-05-16 07:44:21
          Здравствуйте.
          Подключен simple-adaptive-slider.min.js в Chrome, Opera все хорошо, а вот браузеры Firefox ругаются: SyntaxError: bad method definition simple-adaptive-slider.min.js:1:31 примерно эта строка:
          const r = this._el.querySelector(ItcSimpleSlider.SELECTOR_CONTROL_PREV),
                      a = this._el.querySelector(ItcSimpleSlider.SELECTOR_CONTROL_NEXT);
          Влияет и на другой исполняемый код… Как же это решить?
          1. Александр Мальцев
            Александр Мальцев
            2022-05-17 15:13:19
            Здравствуйте! Какой пример или «index.html» на GitHub. Открыл index.html, который на GitHub, ошибок в Firefox нет.
        10. Pavel Khokhlov
          Pavel Khokhlov
          2022-05-07 13:23:48
          Добрый день,
          Подключил слайдер, все работает как нужно, но когда зашел на safari появились какие-то мерцания при пролистывании слайдов (они появляются как то хаотично). Проект настроен через webpack и babel.
          Проверил в Yandex, Chrome, Opera, Edge и FireFox — не замечено подобного

          Использовал:
          simple-adaptive-slider.css
          simple-adaptive-slider.js


          1. !Joy!
            !Joy!
            2022-04-15 13:06:59
            Александр. Спасибо вам за ваш сайт, нахожу здесь много полезных решений и ответов на свои вопросы.
            Что касается вашего слайдера… хотел спросить.
            А не стоит ли константы в JS скрипте (базовые классы и селекторы), прописать внутрь объекта (в конструкторе) и обращаться к ним в последствии как к свойствам? Это позволит не засорять глобальную область видимости и избежать конфликтов в будущем. или есть какие-то причины того, что они в глобалке?

            Ещё раз спасибо за ваши труды!
            1. Александр Мальцев
              Александр Мальцев
              2022-04-18 05:30:25
              Спасибо за отзыв! Да, конечно, так лучше будет, а также некоторые другие вещи улучшил, чтобы было меньше конфликтов. Там ещё много чего можно улучшить в коде. На всё это нужно время, поэтому приветствую PR на GitHub у кого есть желание.
            2. !Joy!
              !Joy!
              2022-04-18 14:45:39
              Суппер!
              Через статику даже лучше. (у себя я просто в свойства самого объекта заворачивал их).
              Так же вижу, что тоже вынесли генерацию индикаторов, в настройки объекта. Как говорится одни и те же мысли витают в воздухе. :) Теперь отключать индикаторы можно не только через css,
              
              .itcss__indicators {
                display: none;
              }
              
              а и через настройки объекта.
              
              new ItcSimpleSlider('.itcss', {
                indicators: false,
              });
              
              В статье это правда сейчас не описано, но любознательный найдет :)
              Ещё раз спасибо за ресурс.
            3. Александр Мальцев
              Александр Мальцев
              2022-04-18 15:10:22
              Пожалуйста!
          2. Constantin
            Constantin
            2022-04-13 16:31:46
            Здравствуйте!
            Если указать в настройках слайдера
            loop: false
            после чего мышкой потянуть последний слайд влево и отпустить за пределами слайдера, слайд так и останется сдвинутым.
            Точно также с первым слайдом, если сдвигать его вправо…
            В чём может быть причина...?
            Заранее благодарю.
            1. Александр Мальцев
              Александр Мальцев
              2022-04-14 14:27:36
              Привет! Поправил в файле «simple-adaptive-slider.dev.js», который расположен на GitHub.
            2. Constantin
              Constantin
              2022-04-14 16:31:36
              Ага, частично помогло, спасибо!)) Если выходим за пределы слайдера, слайд возвращается на место.
              Не знаю на сколько это будет критично и кто так будет делать, но если отпустить ДО выхода за пределы слайдера, слайд замрёт на месте…
              Это можно тоже исправить...?
            3. Constantin
              Constantin
              2022-04-14 16:44:34
              Проверил ещё раз, вроде бы корректно работает))
              Если что, обращусь снова.
              Спасибо вам большое!))
            4. Александр Мальцев
              Александр Мальцев
              2022-04-18 09:45:58
              Пожалуйста!
          3. Виталий Алехин
            Виталий Алехин
            2022-03-23 16:16:16
            Здравствуйте!
            Если не трудно укажите, пожалуйста, мне неучу строки кода, реализующие адаптивность.
            1. emilart
              emilart
              2022-03-12 11:34:37
              Доброго дня, благодарю за понятный адаптивный слайдер, вопрос, как отключить нумерацию слайдов в углу?
              1. Александр Мальцев
                Александр Мальцев
                2022-03-12 13:42:03
                Привет! Спасибо!
                Это осуществляется с помощью стилей. Чтобы убрать нумерацию слайдов просто удалите или закомментируйте эти стили:
                /*.slider__items {
                  counter-reset: slide;
                }
                
                .slider__item {
                  counter-increment: slide;
                }
                
                .slider__item>div::before {
                  content: counter(slide);
                  position: absolute;
                  top: 10px;
                  right: 20px;
                  color: #fff;
                  font-style: italic;
                  font-size: 32px;
                  font-weight: bold;
                }*/
            2. Сергей
              Сергей
              2022-02-14 01:26:23
              Доброго времени суток! Статья супер, даже начинающему понятно что к чему, но все таки столкнулся с проблемой и прошу помощи. Взял пример слайдера с миниатюрами, при нажатии на миниатюру переключение слайдера не происходит, остальное работает. Код полностью скопировал. В консоли выдает ошибку:
              index.html:42 Uncaught TypeError: slider.moveTo is not a function
              at HTMLDivElement.(index.html:42:16)
              код в моем документе идентичен Вашему:
              
                <script>
                  document.addEventListener('DOMContentLoaded', function () {
                    // инициализация слайдера
                    var slider = new SimpleAdaptiveSlider('.slider', {
                      loop: true,
                      autoplay: false,
                      swipe: true
                    });
                    var thumbnailsItem = document.querySelectorAll('.slider__thumbnails-item');
              
                    function setActiveThumbnail() {
                      var sliderItemActive = document.querySelector('.slider__item_active');
                      var index = parseInt(sliderItemActive.dataset.index);
                      for (var i = 0, length = thumbnailsItem.length; i < length; i++) {
                        if (i !== index) {
                          thumbnailsItem[i].classList.remove('active');
                        } else {
                          thumbnailsItem[index].classList.add('active');
                        }
                      }
                    }
                    setActiveThumbnail();
                    document.querySelector('.slider').addEventListener('slider.set.active', setActiveThumbnail);
                    var sliderThumbnails = document.querySelector('.slider__thumbnails');
                    sliderThumbnails.addEventListener('click', function(e) {
                      $target = e.target.closest('.slider__thumbnails-item');
                      if (!$target) {
                        return;
                      }
                      var index = parseInt($target.dataset.slideTo, 10);
                      slider.moveTo(index);
                    });
                  });
                </script>
              
              1. Александр Мальцев
                Александр Мальцев
                2022-02-14 14:32:29
                Привет! Спасибо!
                Здесь скорее используется скрипт, в котором имеется этот метод, а в базовой версии его нет. Попробуйте подключить именно его: simple-adaptive-slider.dev.min.js.
              2. Сергей
                Сергей
                2022-02-14 20:38:29
                Огромное спасибо! теперь все работает
            3. kdvbpspr
              kdvbpspr
              2022-02-09 11:31:28
              День добрый!
              Подскажите пожалуйста, при наведении на область над полосой, должен изменяться слайд. Что-то похоже на слайдер с Авито. Это возможно сделать при помощи Вашего слайдера?
              1. ltybc
                ltybc
                2022-01-06 13:09:34
                Добрый день!

                Как реализовать счетчик слайдов в формате 1/3
                1. Александр Мальцев
                  Александр Мальцев
                  2022-01-07 11:03:02
                  Привет! Необходимо просто указать их количество (пример):
                  .slider__item>div::before {
                    content: counter(slide) "/3";
                    /* ... */
                  }
                2. ltybc
                  ltybc
                  2022-01-07 20:45:59
                  Спасибо за подсказку! У меня счётчик должен стоять за пределами слайдера поэтому этот вариант не совсем подходит. Подскажи еще как можно вынести его за div.slider, ведь у него овефлоу хидден и счетчик не видно
              2. Alexey_Devyatkov
                Alexey_Devyatkov
                2021-12-09 17:34:15
                Здравствуйте, не могли бы вы подсказать как можно инициализировать через цикл слайдеры, а то мне нужно их довольно много (их число варьируется от одного до сотни) и вручную прописывать как-то не хочется, я их использую для компактного отображения объемной информации. Попробовал так, но не работает(.
                
                for (let i = 0; i < 6; i++) {
                    let IdSlide = "#slider" + i;
                    console.log(IdSlide);
                    document.addEventListener("DOMContentLoaded", function () {
                        new SimpleAdaptiveSlider(IdSlide, {
                            loop: true,
                            autoplay: true,
                            interval: 5000,
                            swipe: true,
                        });
                    });
                }
                
                Заранее спасибо.
                1. MeowR
                  MeowR
                  2021-10-02 00:20:33
                  Подскажите пожалуйста, как можно в вашем слайдере наложить на картинку текст? Нашёл только варианты по отдельности.
                  1. Виктор
                    Виктор
                    2021-09-28 12:52:55
                    Здравствуйте, Александр!
                    Поставил на страницу своего сайта Ваш слайдер. На мобильных экранах (до 1030px, я так установил) показывает 1 слайд, на больших 2. Всего 7 картинок.
                    1. На малых экранах, когда показывается 1 картинка, всё работает чётко: и при зацикливании, и без него.
                    2. Но на больших экранах, когда показывается по 2 картинки, при зацикливании меняется по 2 картинки последовательно по кругу. Как бы всё чётко, но индикатор (7 чёрточек) оказывается привязанным не к ОДНОМУ фото, а к ПАРЕ. Как бы ничего страшного, но если прокликать весь индикатор, слайды совершат 2 круга.
                    3. НО ЕСЛИ ОТКЛЮЧИТЬ ЗАЦИКЛИВАНИЕ, на больших экранах, когда показывается по 2 картинки, на 4-м слайде показываются последняя, 7-я картинка и ПУСТОЕ МЕСТО. И далее, до последнего, 7-го слайда, все они показываются пустыми. ЧТО-ТО НАДО МЕНЯТЬ, НО ЧТО?
                    4. Всё, что выше, на ноутбуке со свежими браузерами (все не исследовал, только Хром, Файрфокс, Опера).
                    5. Но на моём старом планшете SM-T210 (Андроид 4.4.2), (браузеры Хром 74.0...., Опера 52.2...., его родной) картина ужасная:
                    — при зацикливании — можно увидеть последовательно 6 (из 7-ми) фото, 7-е не показывается (вместо него пустое место); при листании дальше идут БЕСКОНЕЧНО пустые места. Надо обновить страницу, чтобы увидеть что-то снова. (Есть ещё нюансы с 7-м фото: его всё же можно увидеть, но если начать движение слайдов влево, оно оказывается перед 1-м фото).
                    — а при отключении зацикливания, и при одном фото в окне, всё как надо! (При таких размерах моих фото и планшета по 2 фото не появляются сразу в слайдере, — так что я этот момент не исследовал).
                    Извините, Александр, что так много забрал Вашего драгоценного времени, но, может быть, Вы и мне что-то подскажете, и Вам для чего-то пригодится моё сумбурное описание проблемы.
                    1. Александр Мальцев
                      Александр Мальцев
                      2021-09-28 13:34:36
                      Здравствуйте! Этот слайдер предназначен для отображения только одного активного слайда, для одновременного показа нескольких элементов он не предназначен.
                    2. Виктор
                      Виктор
                      2021-09-28 14:16:39
                      Странно! (Наверное, я неудачно обрисовал картину).
                      Ну а как же Ваши рекомендации по вводу кода для показа широкого слайдера с 2-мя, 3-мя и т.д. фото для десктопов (flex: 0 0 50%; flex: 0 0 33,33333%; flex: 0 0 25%;). Ссылка:

                      itchief.ru/examples/lab.php?topic=javascript&file=chief-slider-02

                      У себя я добавил такой код ():
                      
                      .slider {
                      ...
                        max-width: 500px;
                      ...
                      }
                      @media (min-width: 1030px) {
                        .slider__item {
                          flex: 0 0 50%;
                          max-width: 50%;
                        }
                        .slider {
                        max-width: 1000px;}
                      }
                      
                      Ширина всех моих фото 500px. 30px — на некоторые внешние отступы.
                      Что не так? И можно ли как-то исправить?
                    3. Виктор
                      Виктор
                      2021-09-28 18:49:44
                      Попробовал сделать этот же слайдер, но только с одним отображаемым элементом (убрал показанный код).
                      На планшете осталось всё так же (с Оперой). Только с Хромом стало всё нормально.
                      Так что, наверное, дело не в стилях.
                    4. Александр Мальцев
                      Александр Мальцев
                      2021-09-28 23:58:42
                      Opera какой версии и на какой ОС? Примеры в этой статье также в Opera не работают?
                    5. Александр Мальцев
                      Александр Мальцев
                      2021-09-29 02:16:36
                      У этих слайдеров JavaScript разный.
                  2. Кирилл Кирилл
                    Кирилл Кирилл
                    2021-09-16 18:33:29
                    Здравствуйте, спасибо за замечательный слайдер, скажите пожалуйста как замедлить перелистование, и как добавить текст который будет плавно появляться при смене слайдов, спасибо!
                    1. danil
                      danil
                      2021-09-07 08:27:59
                      Привет!

                      Как добавить текстовую подпись к каждому слайду? Чтобы она располагалась под картинкой. Спасибо.
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-09-14 15:18:02
                        Привет!
                        Необходимо просто разметить «.slider__item» так как нужно.
                      2. Vera Hovhannisyan
                        Vera Hovhannisyan
                        2021-10-01 02:46:04
                        Добрый вечер кто может мне помочь хочу сделать слейд каталог не как не могу?
                    2. Aleksey Kislyak
                      Aleksey Kislyak
                      2021-08-29 22:35:09
                      Здравствуйте! Очень понравился ваш простой слайдер.
                      Скажите пожалуйста, есть ли возможность сделать так, чтобы элементы слайдера на определенном брейкпоинте могли перестроиться в список?
                      Например на мобильном дизайне был бы слайдер с 3-мя слайдами, а в десктоп эти 3 слайда выстроились в ряд?
                      Заранее спасибо за ответ.
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-08-30 15:32:36
                        Привет!
                        Тут просто нужно добавить разметку и стили (пример):
                        <style>
                        @media (min-width: 992px) {
                          .slider__inner {
                            display: flex;
                            flex-direction: row;
                          }
                          .slider__inner>div {
                            flex: 0 0 33.33333333%;
                          }
                        }
                        </style>
                        ...
                        <!-- Разметка одного слайда -->
                        <div class="slider__item">
                          <div class="slider__inner">
                            <div style="height: 250px; background: #3f51b5;"></div>
                            <div style="height: 250px; background: #e91e63;"></div>
                            <div style="height: 250px; background: #9c27b0;"></div>
                          </div>
                        </div>
                    3. 5M1l3
                      5M1l3
                      2021-08-24 07:18:09
                      Здравствуйте, я хочу разделить этот слайдер на два, один для больших картинок, а второй для маленьких codepen.io/5M1le/pen/yLXLvNw. Я создал два скрипта, первый подключил к большому слайдеру, а второй для маленького, но у меня пропадают стрелки на большом. Что нужно сделать, чтоб стрелки были на двух слайдерах?
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-08-26 15:17:14
                        Привет! Вы немного поменяли код, из-за чего конкретно нужно детально разбираться. Так с ходу сложно подсказать.
                      2. 5M1l3
                        5M1l3
                        2021-08-31 06:14:34
                        Разобрался. Теперь только другая проблема, я вставляю этот слайдер на другую страницу сайта, но у меня не появляются стрелки и не происходит автопрокрутка. В консоли пишет, проблема инициализации.
                    4. Artedix
                      Artedix
                      2021-08-19 10:55:21
                      Доброго времени суток, вы единственный человек, который помог с слайдерами, статья очень информативна и полезна, но у меня возникла проблема, я взял пример слайдера с миниатюрами, весь функционал работает, но при нажатии на миниатюру, слайд не переключается, код точь — в — точь, заранее благодарю вас)
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-08-19 15:18:40
                        Привет! Приведи что получилось в какой-нибудь песочнице, т.к. в примере в статье всё работает.
                    5. Alina
                      Alina
                      2021-08-11 20:03:52
                      Добрый день, интересует вопрос.Возможно ли отключить swipe, если в слайдере только один слайд? Заранее спасибо.
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-08-12 14:23:48
                        Привет! А зачем вообще инициализировать элемент как слайдер, если в нём всего один слайд.
                        Можно, например, инициализировать только те «.slider» на станице, в которых больше одного «.slider__item»:
                        document.querySelectorAll('.slider').forEach((item, index) => {
                          if (item.querySelectorAll('.slider__item').length > 1) {
                            const id = 'slider-' + index;
                            item.id = id;
                            new SimpleAdaptiveSlider('#' + id, {
                              loop: true,
                              autoplay: false,
                              interval: 5000,
                              swipe: true
                            });
                          }
                        });
                    6. Игорь
                      Игорь
                      2021-08-05 16:36:28
                      Александр, здравствуйте!

                      Огромное спасибо за слайдер, ужасно помогли! Встроенный слайдер в моей cms был просто отвратителен.

                      Единственное, возникла одна проблема, никак не могу её решить. Создал слайдер с 2-я слайдами, прикрепил к ним картинки, добавил кликабельные ссылки, всё вроде бы окей. Но когда делаешь свайп мышью на другой слайд, если свайп был короткий, то открывается ссылка. Как сделать так, чтобы ссылка открывалась только при клике, но не свайпе?

                      Вот код: codepen.io/Krayton/pen/eYWPOmN
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-08-07 01:15:05
                        Привет! Добавил пару строк кода, попробуйте: codepen.io/itchief/pen/gOWBEMJ
                    7. Asus0
                      Asus0
                      2021-08-04 07:40:33
                      Здравствуйте!
                      Подскажите, что нужно ещё исправить, чтобы на странице работали сразу несколько слайдеров с миниатюрами.
                      В HTML коде я дописал id=«slider-1» и id=«slider-2» и в js коде продублировал переменную slider.

                      Что нужно ещё дописать, чтобы миниатюры у второго (третьего и т.д. на странице) слайдера заработали?

                      document.addEventListener('DOMContentLoaded', function () {
                            // инициализация слайдера
                            var slider = new SimpleAdaptiveSlider('#slider-1', {
                              loop: true,
                              autoplay: false,
                              swipe: true
                            });
                              
                            var slider1 = new SimpleAdaptiveSlider('#slider-2', {
                              loop: true,
                              autoplay: false,
                              swipe: true
                            });
                              
                            var thumbnailsItem = document.querySelectorAll('.slider__thumbnails-item');
                              
                            function setActiveThumbnail() {
                              var sliderItemActive = document.querySelector('.slider__item_active');
                              var index = parseInt(sliderItemActive.dataset.index);
                              for (var i = 0, length = thumbnailsItem.length; i < length; i++) {
                                if (i !== index) {
                                  thumbnailsItem[i].classList.remove('active');
                                } else {
                                  thumbnailsItem[index].classList.add('active');
                                }
                              }
                            }
                            setActiveThumbnail();
                            document.querySelector('.slider').addEventListener('slider.set.active', setActiveThumbnail);
                            var sliderThumbnails = document.querySelector('.slider__thumbnails');
                            sliderThumbnails.addEventListener('click', function(e) {
                              $target = e.target.closest('.slider__thumbnails-item');
                              if (!$target) {
                                return;
                              }
                              var index = parseInt($target.dataset.slideTo, 10);
                              slider.moveTo(index);
                            });
                          });
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-08-04 10:27:31
                        Привет! Слайдер с миниатюрами создавался так, что его не будет больше одного на странице. Поэтому, если нужно вставить несколько таких слайдеров, то сейчас это можно сделать только простым копированием участков кода (пример с 2 слайдерами).
                      2. Asus0
                        Asus0
                        2021-08-04 10:32:11
                        по ссылке никаких изменений не увидел
                      3. Александр Мальцев
                        Александр Мальцев
                        2021-08-04 12:04:20
                        Ссылку не ту вставил. Поправил.
                      4. Asus0
                        Asus0
                        2021-08-04 12:53:07
                        Круто!!!
                        Большое спасибо!
                    8. trav1s
                      trav1s
                      2021-07-19 08:18:17
                      Здравствуйте! Планируется ли поддержка Lazy Load, для повышения показателей Google PageSpeed? А то слайдер фоново в Network загружает и другие слайды…
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-07-19 13:27:19
                        Здравствуйте! Так в примере и так используется ленивая загрузка посредством атрибута loading=«lazy»:
                        <img class="img-fluid" src="/examples/images/c1.jpg" alt="..." width="800" height="400" loading="lazy">
                        
                        Вот пример использования lazyload для ленивой загрузки background-image: с использованием lazyload
                    9. Виктор
                      Виктор
                      2021-06-17 18:28:26
                      Спасибо за слайдер! Я понял как делать авто высоту блока где отзывы, но как сделать так же авто высоту самого контейнера? А то получается что отзывы меняют высоту, но сам блок фиксированый.
                      1. Александр Мальцев
                        Александр Мальцев
                        2021-06-20 15:07:23
                        Пожалуйста!
                        В примере, где слайдер применяется для ротации отзывов, высота устанавливается «slider__item». Это необходимо, потому что внутри «slider__item» разметка самого отзыва выполнятся с использованием абсолютного позиционирования. В таком сценарии высота, конечно, будет фиксированной. Если нужно по-другому, то необходимо убрать высоту и разметить сам отзыв без использования абсолютного позиционирования.
                    10. Илья Николаевич Полешко
                      Илья Николаевич Полешко
                      2021-05-19 11:56:21
                      Александр, добрый день! Выражаю огромную благодарность за данный слайдер!

                      Подскажите пожалуйста как можно поменять анимацию с перелистывания на затухание-появление.
                      1. Konstantin
                        Konstantin
                        2021-05-09 19:43:12
                        Здравствуйте Александр.
                        Вопрос на засыпку:
                        Могли бы Вы реализовать слайдер с навигацией по миниатюрам дополнительных изображений.
                        вот примерный макет:
                        Это было бы очень актуально, толковых решений практически нет.
                        Превью слайдера
                        Благодарю за ответ.
                        1. Konstantin
                          Konstantin
                          2021-05-10 08:14:22
                          У нас несколько проектов и мы давно ищем правильный слайдер…
                          Возможно есть опция на платной основе заказать у вас слайдер с необходимым функционалом?
                        2. Александр Мальцев
                          Александр Мальцев
                          2021-05-10 12:08:23
                          Привет! Для этого не обязательно реализовать новый слайдер, можно использовать этот. В ближайшее время покажу как это можно сделать.
                        3. Александр Мальцев
                          Александр Мальцев
                          2021-05-10 12:08:43
                          По времени сразу скажу, что точных сроков определить не смогу. То время есть, то его нет. Если так устроит, то напишите на почту alexander@itchief.ru какой нужен функционал.
                        4. Konstantin
                          Konstantin
                          2021-05-10 14:24:04
                          Да устроит если это в пределах разумного и не растянется на годы )
                        5. Konstantin
                          Konstantin
                          2021-05-11 08:51:26
                          Отправил описание на почту…
                        6. Александр Мальцев
                          Александр Мальцев
                          2021-05-16 11:31:18
                          Привет! Пример слайдера с миниатюрами добавлен в статью.
                      2. Андрей
                        Андрей
                        2021-05-06 21:20:17
                        Александр, доброго времени суток. Очень понравился ваш слайдер, достаточно удобный. Хотел воспользоваться им для разработки сайта для школы, но при размещении контента на разных слайдах весь контент «скапливается» на 1 слайде, все остальные пустые. При полной прокрутке слайдера весь контент встает на свои места, подскажите, пожалуйста, можно ли как-то это исправить?

                        код html:
                        <div class="slider">
                              <div class="slider__wrapper">
                                <div class="slider__items">
                                  <div class="slider__item">
                                    <div class="slider_background">
                                          <img id="slide_img" src="../img/EGA.jpg" alt="">
                                          <div class="bar">
                                             <h2>ЕГЭ и ОГЭ</h2>
                                             <p>Расписание, порядок проведения, подготовка и многое другое</p>
                                             <button>
                                                <p>Узнать подробнее</p>
                                             </button>
                                          </div>
                                       </a>
                                    </div>
                                  </div>
                                  <div class="slider__item">
                                    <div class="slider_background">
                                          <img id="slide_img" src="../img/GTO.png" alt="">
                                          <div class="bar">
                                             <h2>ГТО</h2>
                                             <p>Условия, ступени и нормативные документы</p>
                                             <button>
                                                <p>Узнать подробнее</p>
                                             </button>
                                          </div>
                                       </a>
                                    </div>
                                  </div>
                                  <div class="slider__item">
                                    <div class="slider_background">
                                          <img id="slide_img" src="../img/prof.png" alt="">
                                          <div class="bar">
                                             <h2>ПРОФОРИЕНТАЦИОННАЯ РАБОТА</h2>
                                             <p>Планы мероприятий, положения опортфолио и программы курсов</p>
                                             <button>
                                                <p>Узнать подробнее</p>
                                             </button>
                                          </div>
                                       </a>
                                    </div>
                                  </div>
                                  <div class="slider__item">
                                    <div class="slider_background">
                                          <img id="slide_img" src="../img/background.jpg" alt="">
                                          <div class="bar">
                                             <h2>УСЛОВИЯ ПРИЁМА</h2>
                                             <p>Правила приёма, приказ, регламенти положения о классах</p>
                                             <button>
                                                <p>Узнать подробнее</p>
                                             </button>
                                          </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <a class="slider__control slider__control_prev" href="#" role="button"></a>
                              <a class="slider__control slider__control_next slider__control_show" href="#" role="button"></a>
                            </div>
                        
                        код css:
                        .slider {
                           position: relative;
                           overflow: hidden;
                           max-width: 1920px;
                           max-height: 600px;
                           margin-left: auto;
                           margin-right: auto;
                         }
                         
                         /* стили для обёртки, в которой заключены слайды */
                         .slider__wrapper {
                           position: relative;
                           overflow: hidden;
                         }
                         
                         /* стили для контейнера слайдов */
                         .slider__items {
                           display: flex;
                           transition: transform 0.6s ease;
                         }
                         
                         /* стили для слайдов */
                         .slider__item {
                           flex: 0 0 100%;
                           max-width: 100%;
                         }
                         
                         /* стили для кнопок "вперед" и "назад" */
                         .slider__control {
                           position: absolute;
                           top: 50%;
                           display: flex;
                           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: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: 0 15%;
                           list-style: none;
                         }
                         
                         .slider__indicators li {
                           box-sizing: content-box;
                           flex: 0 1 auto;
                           width: 50px;
                           height: 7px;
                           margin-right: 4px;
                           margin-left: 4px;
                           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: rgba(60, 54, 100, 1);
                         }
                        
                        .slider_background{
                           height: 600px;
                        }
                        
                        #slide_img{
                           height: 600px;
                           width: 100%;
                           object-fit: cover;
                        }
                        
                        .bar{
                           position: absolute;
                           width: 494px;
                           left: 196px;
                           top: 55px;
                           background: rgba(0, 0, 0, 0.65);
                           border-radius: 25px;
                           display:inline-block;
                        }
                        
                        .bar p{
                           font-family: Istok Web;
                           font-style: normal;
                           font-weight: normal;
                           font-size: 27px;
                           line-height: 39px;
                           text-align: center;
                           
                           color: #FFFFFF;
                        }
                        
                        .bar h2{
                           font-family: Istok Web;
                           font-style: normal;
                           font-weight: normal;
                           font-size: 34px;
                           line-height: 45px;
                           color: #FFFFFF;
                           text-align: center;
                        }
                        
                        .bar button{
                           border: 4px solid #FFFFFF;
                           background-color: rgba(128, 128, 128, 0);
                           box-sizing: border-box;
                           border-radius: 25px;
                           position: relative;
                           width: 80%;
                           left: 50%;
                           transform: translate(-50%, 0);
                           bottom: 5%;
                           transition: background-color 0.25s linear;
                           margin-bottom: 5%;
                        }
                        
                        .bar button:hover{
                           background-color: rgba(128, 128, 128, 0.747);
                        }
                        
                        1. Konstantin
                          Konstantin
                          2021-08-04 12:17:39
                          Добрый день Александр.
                          И все же мы не дождались завершения вашей работы слайдеру???
                          На сообщения не отвечаете… Связь прервалась…
                          Может быть тут ответите?..
                        2. Александр Мальцев
                          Александр Мальцев
                          2021-08-04 12:37:13
                          Привет! Почему? Пример с popup вам отправил, вы ничего на него не ответили. Больше писем в ящике у меня нет.
                        3. Konstantin
                          Konstantin
                          2021-08-04 12:44:47
                          Мы действительно ждали от вас этого письма.
                          Возможно пропустил, или ушло в спам.
                          Повторите пожалуйста, можно и в эту переписку.
                          п.с. На странице возможно будут находится 1 слайдер с доп. миниатюрами изображений, + 2-3 слайдре без доп. фото…
                          Как их всех инициализировать?
                        4. Konstantin
                          Konstantin
                          2021-08-04 15:42:47
                          Александр, пересмотрел всю почту, вашего письма нет…
                          Можете повторить?
                        5. Александр Мальцев
                          Александр Мальцев
                          2021-08-05 15:16:53
                          Остальные слайдеры по обычным правилам, отправил вам ссылку на пример в письме.
                      3. Oleg
                        Oleg
                        2021-04-24 04:20:56
                        Александр, здравствуйте! Спасибо за вашу работу! Выбрал вашу разработку из-за простого и аккуратного кода и отсутствием необходимости подключать сторонние библиотеки. Установил версию с возможностью свайпа. Однако, свайп работает, как нажатие кнопки. Что вызывает не очень приятные ощущения у пользователя. Пользователь привык, что когда начинаешь пролистывать, сразу начинается движение элементов. Скажите, можно ли, каким либо образом сделать свайп как например при пролистывании слайдов в посте Инстаграм? Чтобы движение слайдов начиналось вместе с движением пальца по области карусели? Спасибо!
                        1. Oleg
                          Oleg
                          2021-04-24 10:50:33
                          Отвечу на свой же вопрос:
                          Изменил код функции:
                                  var _setUpListeners = function () {
                                    // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                                    _sliderControls.forEach(function (item) {
                                      item.addEventListener('click', _controlClick);
                                    });
                                    _mainElement.addEventListener('touchstart', function (e) {
                          		 
                                      _startX = e.touches[0].clientX;
                                    });
                          		  
                                     _mainElement.addEventListener('touchend', function (e) {
                                     var
                                         _endX = e.changedTouches[0].clientX,
                                         _deltaX = _endX - _startX;
                                       if (_deltaX > 50) {
                                        _transformItem('left');
                                       } else if (_deltaX < -50) {
                                         _transformItem('right');
                                       }
                                     });
                                  }
                          На следующий код:
                          
                                  var _setUpListeners = function () {
                                    // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                                    _sliderControls.forEach(function (item) {
                                      item.addEventListener('click', _controlClick);
                                    });
                                    _mainElement.addEventListener('touchstart', function (e) {
                          		 
                                      _startX = e.touches[0].clientX;
                                    });
                          		  _mainElement.addEventListener('touchmove', function (e) {
                                      var
                          			 _moveX = e.touches[0].clientX;
                          			var
                          			 _deltaX = Math.abs(_moveX - _startX); //если число отрицательное, будет положительным
                          							
                          			if ( _deltaX<50) {   // Задержка на отклик события touchmove
                          				if (_moveX > _startX) {
                          				  _transformItem('left');
                          				} else if (_moveX < _startX) {
                          				  _transformItem('right');
                          				}
                          			}
                                    });
                                    
                                  }
                          
                          В общем, получилось не очень элегантно, и есть глюки при зацикленном слайдере, но по другому придумать не смог. По хорошему нужно переписать всю функцию var _transformItem = function (direction)
                          Может кто-нибудь предложит более подходящий вариант?
                        2. Александр Мальцев
                          Александр Мальцев
                          2021-04-24 14:31:06
                          Привет! Пожалуйста! Посмотрю, как это можно реализовать здесь.
                        3. Oleg
                          Oleg
                          2021-04-24 15:09:38
                          Очень жду ваш вариант. Сейчас более 70% трафика — мобильный. И сайт должен вызывать приятные эмоции от использования.
                          Ps.
                          Можете посмотреть, как слайдер работает сейчас ссылка
                        4. Александр Мальцев
                          Александр Мальцев
                          2021-04-30 13:15:59
                          Полностью обновил слайдер и инструкцию по его использованию. Пробуйте.
                        5. Oleg
                          Oleg
                          2021-04-30 13:34:22
                          Спасибо!
                      4. Евгений Витальевич Маслов
                        Евгений Витальевич Маслов
                        2021-02-16 00:29:26
                        Александр, огромное спасибо за слайдер!
                        У меня такой вопрос: есть php-код, который выводит информацию из xml-файла на сайт. Среди выводимых элементов — изображения, которые и надо листать слайдером. Вот эта часть кода:
                        <?php
                        	$xml = simplexml_load_file("feed.xml");
                        
                        foreach ( $xml->children() as $offer ) {
                            $offer->attributes()->{'internal-id'};
                        
                        echo '<div class="objects_container"><div class="slider"><div class="slider__wrapper"><div class="slider__items">';	
                        foreach ($offer as $image) {
                            switch((string) $image['order']) { // Получение атрибутов элемента по индексу
                            case '0':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                            case '1':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '2':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '3':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '4':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '5':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '6':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '7':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '8':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '9':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                        	case '10':
                                echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                break;
                            }
                        }
                              echo '</div></div><a class="slider__control slider__control_prev" href="#" role="button"></a><a class="slider__control slider__control_next" href="#" role="button"></a></div>';
                        ...

                        После вывода первого элемента из файла и всех относящихся к нему изображений, слайдер перестаёт работать. Т.е., на последующих элементах и их изображениях слайдера не видно.
                        Можно ли как-то сделать так, чтобы слайдер работал для каждого элемента?
                        1. Dmytro
                          Dmytro
                          2020-12-29 18:27:21
                          здравствуйте, Александр)

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

                          спасибо
                          1. Александр Мальцев
                            Александр Мальцев
                            2021-01-02 08:57:19
                            Здравствуйте!
                            Так (открыть пример)?
                        2. keo72792
                          keo72792
                          2020-12-18 20:16:22
                          Можно ли применить этот слайдер к нескольким элементам на странице с одним классом? ID использовать нельзя. Прописывать дополнительные классы тоже. Может, можно как-то пройтись циклом по родительскому элементу (у каждого слайдера есть родитель, который тоже обозначен одним классом) и обратиться к элементу .slider как к дочернему? Не знаю, как это реализовать
                          1. Александр Мальцев
                            Александр Мальцев
                            2020-12-24 16:33:30
                            Для этого найдите в js-файле эту строчку:
                            _slider = document.querySelector(selector), // основный элемент блока
                            
                            Замените её на следующую:
                            _slider = selector instanceof Element ? selector : document.querySelector(selector), // основный элемент блока
                            
                            После этого инициализацию слайдера можно будет выполнять как посредством передачи функции slideShow селектора, так и DOM-элемента:
                            const sliderList = document.querySelectorAll('.slider');
                            sliderList.forEach(function($element) {
                              slideShow($element);
                            }
                            
                        3. jekakа123
                          jekakа123
                          2020-12-17 09:56:21
                          Добрый день Александр Мальцев
                          Подскажите пожалуйста, можно для мабайла грузить одно разрешение баннеров а для десктора другое? что бы гугл не ругался.
                          Заранее благодарен.
                          1. Александр Мальцев
                            Александр Мальцев
                            2020-12-17 14:37:07
                            Привет! Это можно выполнить разными способами. Например, один из них — это использовать атрибуты srcset и sizes. В srcset указываем список изображений с размерами (например, «picture-320w.jpg» с шириной 320px и «picture-800w.jpg» — с 800px). А в sizes — условия, в соответствии с которыми браузер подберёт под данный viewport изображение:
                            <img srcset=" srcset="picture-320w.jpg 320w, picture-800w.jpg 800w"
                                     sizes="(max-width: 980px) 320px, 800px"
                                     src="picture-800w.jpg" alt="...">
                            
                          2. jekakа123
                            jekakа123
                            2020-12-17 16:08:17
                            Благодарю, попробую.
                        4. Александр
                          Александр
                          2020-12-04 12:02:33
                          Добрый день.
                          Прошу подсказать как правильно расположить баннер в слайдер.
                          Правая часть слайдера остается пустой как будто длины баннера не хватает.
                          Заранее благодарю.
                          <script>// <![CDATA[
                          $(window).load(function() {
                            $('#carousel-slider-abcp').carousel({
                             interval: '3000', // В миллисекундах
                             wrap: true //true или false, если false - слайдер остановится когда покажет последний слайд.
                            });
                           });
                          // ]]></script>
                          <div id="carousel-slider-abcp" class="fr-carousel fr-slide fr-slide-indicator" data-ride="fr-carousel"><!-- Слайды -->
                          <div class="fr-carousel-inner">
                          <div class="fr-item fr-active"><a href="Ссылка на страницу"> <img src="фото" alt="" /></a></div>
                          <div class="fr-item"><a href="Ссылка на страницу"><img src="фото" alt="" /></a></div>
                          </div>
                          <!-- Стрелки --> <a class="fr-left fr-carousel-control" href="#carousel-slider-abcp" data-slide="prev"> <span class="fr-icon2-left-open" aria-hidden="true"></span> </a> <a class="fr-right fr-carousel-control" href="#carousel-slider-abcp" data-slide="next"> <span class="fr-icon2-right-open" aria-hidden="true"></span> </a></div>
                          
                          1. Александр Мальцев
                            Александр Мальцев
                            2020-12-05 14:49:02
                            Добрый день! Александр, этот слайдер никакого отношения не имеет к этому. Тут вам нужно разбираться со слайдером, который вы используете.
                        5. Inta
                          Inta
                          2020-11-22 01:31:46
                          Можете помочь как уменьшить слайдер чтоб он был на половину меньше чем на весь экран и распологался по середине, и когда страницу уменьшаешь слайдер тоже был бы меньше. Заранее спасибо!)))

                          <!DOCTYPE html>
                          <html lang="en">
                          <head>
                            <title>Bootstrap Example</title>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
                            
                          </head>
                          <body>
                          
                          <div id="demo" class="carousel slide" data-ride="carousel">
                            <ul class="carousel-indicators">
                              <li data-target="#demo" data-slide-to="0" class="active"></li>
                              <li data-target="#demo" data-slide-to="1"></li>
                              <li data-target="#demo" data-slide-to="2"></li>
                            </ul>
                            <div class="carousel-inner">
                              <div class="carousel-item active">
                                <img src="images.jpg" alt="Los Angeles">
                                <div class="carousel-caption">
                                  <h3>Name</h3>
                                  
                                </div>   
                              </div>
                              <div class="carousel-item">
                                <img src="image.jpg" alt="Chicago">
                                <div class="carousel-caption">
                                  <h3>Surnme</h3>
                                  
                                </div>   
                              </div>
                              <div class="carousel-item">
                                <img src="imageees.jpg" alt="New York">
                                <div class="carousel-caption">
                                  <h3>BBBa</h3>
                                  
                                </div>   
                              </div>
                            </div>
                            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                              <span class="carousel-control-prev-icon"></span>
                            </a>
                            <a class="carousel-control-next" href="#demo" data-slide="next">
                              <span class="carousel-control-next-icon"></span>
                            </a>
                          </div>
                          
                          </body>
                          </html>
                          
                          1. Александр Мальцев
                            Александр Мальцев
                            2020-11-26 14:47:41
                            Бутстраповский слайдер к этой теме вообще никакого отношения не имеет.
                            Отцентровать этот слайдер можно, например, так (открыть пример):
                            <style>
                            .carousel-wrapper {
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              height: 100vh;
                            }
                            .carousel {
                              width: 50vw;
                              height: 50vh;
                              overflow: hidden;
                            }
                            .carousel-item img {
                              width: 50vw;
                              height: 50vh;
                            }
                            </style>
                            
                            <div class="carousel-wrapper">
                              <div id="demo" class="carousel slide" data-ride="carousel">...</div>
                            </div>
                            
                        6. Эдуард Рыбалка
                          Эдуард Рыбалка
                          2020-11-09 23:04:51
                          Доброго времени суток. Я хочу добавить больше двух таких слайдер на страницу. Но работает только первый слайдер. Помогите пожалуйста сделать так, чтоб работали все слайдеры на странице. Большое спасибо!
                          1. Эдуард Рыбалка
                            Эдуард Рыбалка
                            2020-11-09 23:07:07
                            Увидел ответ немного выше. Большое Вам спасибо
                          2. Эдуард Рыбалка
                            Эдуард Рыбалка
                            2020-11-09 23:18:36
                            Снова я. У меня на странице три слайдера без зацикливания. Работает только первый (( Помогите пожалуйста
                          3. Эдуард Рыбалка
                            Эдуард Рыбалка
                            2020-11-09 23:42:28
                            Ссылка на слайдер codepen.io/eduard-ua/pen/JjKmeBq
                          4. Эдуард Рыбалка
                            Эдуард Рыбалка
                            2020-11-09 23:53:41
                            Ответ на мой вопрос. Нашёл у Вас. Спасибо Вам за помощь

                            multiItemSlider('#slider-1', {
                            isAutoplay: true
                            });

                            multiItemSlider('#slider-2', {
                            isAutoplay: true
                            });
                          5. Александр Мальцев
                            Александр Мальцев
                            2020-11-12 07:04:08
                            Привет! Отлично что разобрался.
                        7. hunteman
                          hunteman
                          2020-11-01 15:29:08
                          Александр, здравствуйте! Пытаюсь настроить https://itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-12 такой слайдер. Визуально все получилось, но не получается добавить свайп на мобильном и на десктопах. Дайте пожалуйста наводку как это сделать.
                          Пытался добавлять этот код в ф-цию _setUpListeners, но безуспешно(

                          if (_isTouchDevice()) {
                          _mainElement.addEventListener('touchstart', function (e) {
                          _startX = e.changedTouches[0].clientX;
                          });
                          _mainElement.addEventListener('touchend', function (e) {
                          var
                          _endX = e.changedTouches[0].clientX,
                          _deltaX = _endX — _startX;
                          if (_deltaX > 50) {
                          _transformItem('left');
                          } else if (_deltaX < -50) {
                          _transformItem('right');
                          4
                          }
                          });
                          } else {
                          _mainElement.addEventListener('mousedown', function (e) {
                          _startX = e.clientX;
                          });
                          _mainElement.addEventListener('mouseup', function (e) {
                          var
                          _endX = e.clientX,
                          _deltaX = _endX — _startX;
                          if (_deltaX > 50) {
                          _transformItem('left');
                          } else if (_deltaX < -50) {
                          _transformItem('right');
                          }
                          });
                          }
                          1. Александр Мальцев
                            Александр Мальцев
                            2020-11-03 12:51:51
                            Здравствуйте! На этой неделе представлю новую версию JavaScript кода слайдера. В ней всё это будет настраиваться через параметры.
                        8. Ефим
                          Ефим
                          2020-10-06 02:49:04
                          Александр, спасибо отличный слайдер, только есть одна проблемка. При добавлении в слайдер фото, внизу слайдера появляется полоса, которую ни как не возможно убрать или перекрыть другим блоком. Подскажите, пожалуйста, как это исправить? (В примере с одними фото также есть эта невидимая полоса (скриншот)
                          1. Александр Мальцев
                            Александр Мальцев
                            2020-10-08 14:44:39
                            Пожалуйста! По картинке сложно подсказать.
                            Попробуйте <img> установить блочное отображение:
                            .img-fluid {
                              display: block;
                              height: auto;
                              max-width: 100%;
                            }
                            
                        9. Ola
                          Ola
                          2020-10-04 19:22:09
                          Спасибо Вам Огромное Александр что Вы нам помогаете и делитесь с нами своими знаниями!
                          Вы наш добрый Ангел!***))) Все работает! Как всегда полезный и обьяснен до мелочей чудо-урок!
                          кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
                          1. Илья
                            Илья
                            2020-09-16 12:20:05
                            Отличный слайдер!
                            Спасибо большое!
                            Только не могу вынести кнопки прокрутки слайдов за основной блок, не ломая всю остальную конструкцию. Подскажите пожалуйста, есть ли какое то решение данной проблемы?
                            1. Илья
                              Илья
                              2020-09-16 12:33:08
                              UPD. Снял overflow: hidden; у .slider.
                              Но теперь, при переключении слайдов с transform 0.6s края фоновых картинок не скрываются за закруглением границ.
                            2. Александр Мальцев
                              Александр Мальцев
                              2020-09-16 14:43:45
                              Спасибо, может что-то не так делаете. Вот пример: itchief.ru/examples/lab.php?topic=javascript&file=slider-3
                          2. Егор
                            Егор
                            2020-06-17 09:13:40
                            Добрый день, возникла проблема. Добавил HTML, CSS и JS код на сайт(работает на opencart) обернул JS код в document.addEventListener('DOMContentLoaded', function(){
                            var slideShow = (function () {

                            });
                            Сайт видит файл подключенный, но ничего не работает в плане скрипта, что делать?
                            1. Александр Мальцев
                              Александр Мальцев
                              2020-06-21 08:42:23
                              Добрый день! Может вы не добавили после функции slideShow следующее:
                                slideShow('.slider', {
                                  isAutoplay: true
                                });
                              
                          3. jekakа123
                            jekakа123
                            2020-06-11 22:38:47
                            Здравствуйте, а как реализовать на одном сайте два разных типа слайдера? если стили все в одном файле? это возможно?
                            Допустим на главной слайдер с картинками, а в личном кабинете хочу сделать слайдер текстовый.
                            1. Александр Мальцев
                              Александр Мальцев
                              2020-06-13 14:42:08
                              Здравствуйте! Да можно. Для этого можно, например к 1 слайдеру добавить класс slider-1, а ко второму — slider-2.
                              <!-- 1 слайдер -->
                              <div class="slider-1 slider">...</div>
                              <!-- 2 слайдер -->
                              <div class="slider-2 slider">...</div>
                              
                              После этого к стилям к которые нужно применить к первому слайдеру добавить «.slider-1», а ко второму – «.slider-2»:
                              /* стили для 1 слайдера */
                              .slider-1 {
                                position: relative;
                                overflow: hidden;
                                ...
                              }
                              .slider-1 .slider__wrapper {
                                position: relative;
                                overflow: hidden;
                              }
                              .slider-1 .slider__items {
                                display: flex;
                                transition: transform 0.6s ease;
                              }
                              ...
                              /* стили для 2 слайдера */
                              .slider-2 {
                                position: relative;
                                overflow: hidden;
                                ...
                              }
                              .slider-2 .slider__wrapper {
                                position: relative;
                                overflow: hidden;
                              }
                              .slider-2 .slider__items {
                                display: flex;
                                transition: transform 0.6s ease;
                              }
                              
                            2. jekakа123
                              jekakа123
                              2020-06-13 17:19:19
                              Благодарю за ответ, попробую.
                          4. Александр
                            Александр
                            2020-06-08 17:22:49
                            Здравствуйте, как можно реализовать переключение слайдера стрелками клавиатуры?
                            1. Александр Мальцев
                              Александр Мальцев
                              2020-06-09 15:18:10
                              Привет! Это можно очень просто реализовать через методы слайдера next и left:
                              var slider = slideShow('.slider', {
                                isAutoplay: true,
                              });
                              
                              document.addEventListener('keydown', function (e) {
                                if (e.keyCode === 37) {
                                  slider.left();
                                } else if (e.keyCode === 39) {
                                  slider.next();
                                }
                              });
                              
                              Пример слайдера, к которому добавлено дополнительное управление с помощью стрелок клавиатуры.
                            2. Александр
                              Александр
                              2020-06-10 14:57:24
                              Спасибо за ответ! =) Очень выручили!!!)
                            3. Александр
                              Александр
                              2020-06-12 20:06:35
                              Привет! =) С клавиатуры переключения отлично работает, но как убрать зацикленность карусели? просмотрел все примеры, под клавиши не подходит =(
                            4. Александр Мальцев
                              Александр Мальцев
                              2020-06-13 14:33:11
                            5. Александр
                              Александр
                              2020-06-14 08:37:23
                              Получается очень многофункциональный слайдер!!! Спасибо за помощь!!! =)
                          5. Vladislav
                            Vladislav
                            2020-05-22 22:16:26
                            Вот когда я в слайдере меняю цвет на фото, то вместо фото отображается белый фон. Как это исправить?
                            1. Александр Мальцев
                              Александр Мальцев
                              2020-05-27 13:27:38
                              В статье есть пример слайдера с изображениями. Посмотрите, как там это выполнено.
                          6. feanor13
                            feanor13
                            2020-04-25 00:10:10
                            Здравствуйте. Спасибо за столь замечательный сайт, очень полезная информация, а главное очень доступно описано.
                            Установил слайдер и возник небольшой вопрос — если использовать индикаторы и описание слайдера, то они соответственно накладываются друг на друга. Можно ли переместить описание слайдеров под сам слайдер?
                            1. Александр Мальцев
                              Александр Мальцев
                              2020-04-25 15:32:32
                              Здравствуйте! Спасибо за отзыв!
                              Можно сделать и так. Но, если хотите расположить описания над изображениями, то можно просто к описаниям добавить padding, чтобы они не накладывались на индикаторы. Как это выполнить можно посмотреть в этом примере.
                            2. feanor13
                              feanor13
                              2020-04-25 16:33:13
                              Спасибо за ответ. В статье написано: «Обёртка для слайдов .slider__wrapper содержит в себе элемент .slider__items, а он в свою очередь элементы .slider__item. Такая конструкция позволит при необходимости расположить индикаторы и элементы управления как внутри слайдов, так и за их пределами.» Я правильно понимаю что те же индикаторы можно вынести за пределы слайдера?

                              Тогда можно было бы оставить описание, а индикаторы расположить под слайдером. Тут имею в виду визуально за пределами области слайдера, например как в этом примере стрелки влево/вправо. Пробовал так сделать, но видимо что-то не так делал, т.к. индикаторы все равно располагались поверх слайдера.

                              И еще возник вопрос по использованию двух слайдов через flex: 0 0 50%. Они располагаются вплотную друг к другу, не подскажете как можно добавить отступ между картинками?
                            3. Александр Мальцев
                              Александр Мальцев
                              2020-04-26 07:38:09
                              Да, в этом примере индикаторы вынесены за пределы слайдера.
                              При использовании двух слайдов (через flex: 0 0 50%) сам слайдер находится в элементе <div class="slider__item">...</div>. Чтобы добавить какие-то отступы вы просто делаете нужную в нём разметку. Например, создаёте в нём элемент (дополнительную обёртку) и устанавливаете ему нужные padding. Остальной контент слайда помещаете уже в него. В результате у вас слайд будет иметь нужные отступы.
                            4. feanor13
                              feanor13
                              2020-04-26 17:24:40
                              Спасибо, большое. Получилось все как хотелось. Cделал обертку
                              .slider__item>.slider_padr {
                                    padding-right: 5px;
                                              }
                                             .slider__item>.slider_padl {
                                    padding-left: 5px;
                                              }
                              Если делал общую обертку, то в полной версии(при flex: 0 0 50%) блоки с переключателями влево/вправо смещался за пределы слайдеров на значение padding.

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

                            5. Александр Мальцев
                              Александр Мальцев
                              2020-04-27 15:54:38
                              Пожалуйста! Так сложно гадать, создайте свой пример на jsfiddle или в какой-нибудь другой песочнице и дайте ссылку на неё в комментарии. В этом случае можно будет точно подсказать почему что-то не работает.
                            6. feanor13
                              feanor13
                              2020-04-27 16:55:21
                              Ссылка на пример
                            7. Александр Мальцев
                              Александр Мальцев
                              2020-04-28 12:17:38
                              Правильно, этот скрипт слайдера предназначен для показа в некоторый момент только одного слайда. Если необходимо одновременно показывать несколько слайдов, то возьмите скрипт, приведённый на этой странице.
                            8. feanor13
                              feanor13
                              2020-04-28 18:59:04
                              Взял за основу этот пример но хочется сделать переключатели как в другом примере, т.к. получается что изображение каждого слайда будет немного больше, особенно на смартфонах(занимает всю ширину экрана). Не подскажете что надо поменять?

                              И еще вопрос, в данных примерах не работает переход между слайдами свайпом, можно это как-то добавить в эту версию слайдера?
                            9. Александр Мальцев
                              Александр Мальцев
                              2020-05-01 14:58:33
                              Ссылка на пример. Так?
                            10. feanor13
                              feanor13
                              2020-05-01 21:48:51
                              По переключателям да, имел в виду такие. Но в идеале имел в виду как в данном примере, только как Вы сказали он не рассчитан на показ двух слайдов одновременно. Соответственно пытался сделать похожий вариант на основе chiefslider взяв за основу пример. В итоге получился такой вот вариант, но хотелось довести до варианта с индикаторами, переключателями как в Вашем последнем примере и возможностью переключения свайпом на мобильной версии. Владею только базовым понимаем работы с кодом, поэтому не смог привести в нужный вид и пока ограничился на сайте этим вариантом с показом одного слайда вместо двух в пк версии сайта
                            11. Александр Мальцев
                              Александр Мальцев
                              2020-05-17 13:02:49
                              Для изменения вида переключателей изменять JavaScript не нужно. Достаточно просто отредактировать CSS: jsfiddle.net/itchief/fhgrbovy/
                          7. Arthur
                            Arthur
                            2020-04-08 15:16:43
                            Добрый день! Не работает переключение свайпом и скроллом, подскажите пожалуйста, как можно сделать это?
                            1. Alexander
                              Alexander
                              2020-03-21 15:10:30
                              Добрый день, Александр!
                              Ваш слайдер лучший из всех, спасибо вам огромное.
                              В данный момент разрабатываю сайт как раз использую ваш слайдер.
                              Появилась необходимость добавить к тексту на каждом слайде анимацию (animate.css), и вот тут как раз очень нужна ваша помощь.
                              Использовать сторонние разработки WOW или AOS и похожих решений не хочется.
                              Да и невозможно, наверное, с данным слайдером.
                              Изучил ваш код JS я не могу найти как можно реализовать добавление и удаление классов.
                              Добавить вообще не проблема, а вот удалить при смене слайда не понимаю, как, так как слайд каждый не является активным в данный момент времени.
                              Знаний в JS у меня недостаточно, поэтому и не могу найти решения.
                              Подскажите пожалуйста, как можно добавлять и удалять классы CSS для каждого слайда, повторно используя уже написанные вами функции.
                              Наверное, вы уже это делали на данном слайдере в своих работах.
                              Или вообще, как это реализовать.
                              Заранее большое вам спасибо!
                              1. Alexander
                                Alexander
                                2020-03-22 14:55:50
                                Извините что сам себе пишу комментарий.
                                Я смотрю на функцию
                                // функция, добавляющая индикаторы к слайдеру
                                _addIndicators
                                Здесь мы определяем конкретный слайд и добавляем class 'active'
                                Александр подскажите пожалуйста как можно, подобным способом добавлять и удалять классы анимации, в текст на слайдах.
                              2. Александр Мальцев
                                Александр Мальцев
                                2020-03-22 15:40:20
                                Добрый день!
                                В местах, где к индикаторам добавляется класс «active» добавьте ещё строчки, выполняющее это действие по отношению к слайдам:
                                ...
                                _indicatorItems[currentIndicator].classList.remove('active');
                                _indicatorItems[_indicatorIndex].classList.add('active');
                                _itemsArray[currentIndicator].item.classList.remove('active');
                                _itemsArray[_indicatorIndex].item.classList.add('active');
                                ...
                                sliderIndicatorsItem.classList.add('active');
                                _itemsArray[i].item.classList.add('active');
                                
                              3. Alexander
                                Alexander
                                2020-03-22 17:44:57
                                Александр спасибо вам огромное!!!
                                Вы волшебник!!!
                                Всё идеально работает!!!
                                Анимацию сделал на всех слайдах…
                                Идеально!!!
                                Это лучший слайдер, что есть в инете.
                            2. Dima
                              Dima
                              2020-03-12 20:56:16
                              Добрый день. Как добавить несколько слайдеров на одну страницу?
                              1. Александр Мальцев
                                Александр Мальцев
                                2020-03-14 05:59:02
                                В этом комментарии приведён такой пример.
                            3. Дарья
                              Дарья
                              2020-02-17 09:49:40
                              Здравствуйте! Подскажите пожалуйста, почему могут не отображаться стрелочки? Спасибо.
                              1. Александр Мальцев
                                Александр Мальцев
                                2020-02-17 14:26:37
                                Здравствуйте!
                                Скорее всего какие-то другие стили вашего проекта переопределяют их.
                            4. Денис
                              Денис
                              2020-02-04 17:01:58
                              Здравствуйте, пользуюсь вашим слайдером, нашел способ как использовать 3 слайдера на странице(необходимость, по макету). Вопрос по поводу регулирования высоты, хочется чтобы при переключении слайдов в зависимости от фото размер слайда по высоте был фиксированным. Пробовал ограничивать основной контейнер и класс .slider_item по высоте (height: 70vh), но стили почему-то игнорируются(возможно, что-то делаю не так, вероятнее всего именно так.). Прошу помочь, заранее благодарен.
                              1. Александр Мальцев
                                Александр Мальцев
                                2020-02-06 14:07:53
                                Здравствуйте! Если у изображений отношение ширины к высоте разная, то в этом случае их лучше использовать в качестве фона. После этого установите с помощью CSS высоту слайдам ту, которая нужна.
                              2. Денис
                                Денис
                                2020-02-22 16:54:02
                                Спасибо за помощь! Ещё 1 вопрос, он с wodpress будет работать? У меня пока не получается его заставить работать, создал для него специально отдельный тип записи, настроил вывод информации (заголовка и контента), так вот фото, заголовок и контент подгужаются без проблем. Но перестали работать индикаторы и стрелки. Так же появилась ошибка в консоли:
                                Uncaught TypeError: Cannot read property 'querySelector' of null
                                    at main.js?ver=5.3.2:6
                                    at main.js?ver=5.3.2:188
                                
                                HTML + PHP код который сейчас (по сути стандартная структура слайдера + указание типа записи и цикл вывода)
                                <section class="top-slider">
                                    <div id="slider-1" class="slider">
                                        <div class="slider__wrapper">
                                            <div class="slider__items">
                                                <?php
                                                $posts = get_posts(array(
                                                    'numberposts' => 5,
                                                    'post_type'   => 'first_slider',
                                                    'suppress_filters' => true, // подавление работы фильтров изменения SQL запроса
                                                ));
                                
                                                foreach ($posts as $post) { setup_postdata($post);
                                                    ?>
                                                    <div class="slider__item slide" style="background: url(<?php echo get_the_post_thumbnail_url(); ?>) no-repeat; background-size: cover;">
                                                        
                                                    <div class="content-slide" >
                                                        <h2 class="content-title"><?php the_title(); ?></h2>
                                                        <?php the_content(); ?>
                                                        <a href="#" class="content-btn item-btn">подробнее</a>
                                                    </div>
                                                </div>
                                                <?php
                                                }
                                
                                                wp_reset_postdata(); // сброс
                                                ?>
                                            </div>
                                        </div>
                                        <a class="slider__control slider__control_prev" href="#" role="button"></a>
                                        <a class="slider__control slider__control_next" href="#" role="button"></a>
                                    </div>
                                </section>
                                
                                CSS и JS не изменялся.

                                Прошу помочь, ещё раз благодарю!
                              3. Александр Мальцев
                                Александр Мальцев
                                2020-02-24 14:33:39
                                Возможно, у вас скрипт отрабатывает до того, как становится доступен слайдер на странице. Чтобы этого не было оберните JavaScript код слайдера в эту конструкцию:
                                document.addEventListener('DOMContentLoaded', function(){
                                  var slideShow = (function () {
                                  // ...
                                });
                              4. Денис
                                Денис
                                2020-02-24 15:48:38
                                Сработало! Спасибо огромное!
                                PS. Думаю стоит внести изменения в статье, ну и в код.
                              5. Денис
                                Денис
                                2020-02-24 16:03:40
                                Чтобы люди с такой же проблемой узнали о решении. (Пометочку: «чтобы слайдер работал в WP»)
                              6. Александр Мальцев
                                Александр Мальцев
                                2020-02-24 16:14:42
                                Спасибо, хорошая идея, добавлю в статью.
                            5. mezonih
                              mezonih
                              2019-12-27 20:47:25
                              А у меня почему то вообще не работает. Стрелки есть, но на другую фотку не переходит. Все сделал правильно вроде
                              1. mezonih
                                mezonih
                                2019-12-27 23:49:59
                                т.е. локально работает. но есть задача ее выводить в iframe. вот там затык получается. фотка видна. но по другим нет перехода
                              2. Александр Мальцев
                                Александр Мальцев
                                2019-12-29 13:45:39
                                Значит вы туда не добавили JavaScript код слайдера.
                              3. mezonih
                                mezonih
                                2019-12-29 19:07:35
                                да. не туда добавлял. сейчас все работает. 2 слайдера на странице. Но при этом вылазиет вот такое оповещение: TypeError: Cannot read property 'querySelector' of null
                            6. Олег
                              Олег
                              2019-12-20 12:38:29
                              А как сделать, чтобы на мобильном (да и на компе наверное тоже), можно было пальцем (мышкой) скролить слайды?
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-12-21 04:36:00
                                Добавил возможность свайпа в слайдер. Теперь все примеры этой статьи имеют эту возможность.
                            7. Алексей
                              Алексей
                              2019-12-10 03:42:22
                              Было бы здорово, если имелась возможность показывать более одного слайда. А так, все супер, спасибо.
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-12-10 13:26:18
                                С более продвинутым вариантом реализации слайдера можете ознакомиться в этой статье.
                            8. Роман
                              Роман
                              2019-12-02 17:52:07
                              Здравствуйте, отличная работа!
                              Но я столкнулся с проблемой, у меня не получается вставить этот слайдер во flex контейнер, в своем шаблоне, как мне решить этот вопрос?
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-12-03 14:26:41
                                Привет! Спасибо за отзыв. Необходимо просто настроить стили, например, так.
                            9. Алексей Усов
                              Алексей Усов
                              2019-11-24 00:03:40
                              РЕДКИЙ РЕСУРС
                              АЛЕКСАНДР, СПАСИБО

                              ВОПРОС
                              слайдер плавно листает, если стрелки нажимать
                              но резко меняет фото автоматически

                              как сделать автоматику плавной?
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-12-01 06:55:43
                                Привет! Спасибо за добрые слова.
                                Статья и все примеры на странице обновлены, сейчас слайдеры имеют плавную анимацию.
                            10. kadochnikov_k
                              kadochnikov_k
                              2019-10-31 16:36:08
                              Добрый день. Отличный слайдер, спасибо вам! А как сделать так, чтобы одновременно выводилось два слайда, но при этом шаг литания слайдера оставался один слайд вправо или влево? Спасибо.
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-11-03 11:26:57
                                Привет! Спасибо за отзыв. Вот пример страницы, на которой одновременно используются два слайдера.
                              2. kadochnikov_k
                                kadochnikov_k
                                2019-11-05 08:58:01
                                Спасибо за отклик, но я имел ввиду другое. Мне нужно не два слайдера на одной странице, а два слайда на одном слайдере, вот пример.
                              3. Александр Мальцев
                                Александр Мальцев
                                2019-11-05 15:02:57
                                Если вам это нужно при любой ширине viewport, то тогда можете просто сверстать этот блок так чтобы он состоял из двух div шириной 50%. Но если нужно более гибко, то тогда воспользуйтесь этим слайдером.
                              4. kadochnikov_k
                                kadochnikov_k
                                2019-11-06 12:19:52
                                Спасибо большое!
                            11. Иван
                              Иван
                              2019-09-21 20:38:16
                              Классный слайдер просто супер. Только один вопрос как сделать чтоб фото автоматически листались?
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-09-22 03:06:40
                                Спасибо! Для этого в слайдере есть параметр isAutoplay, который необходимо установить в значение true:
                                slideShow('.slider', {
                                  isAutoplay: true
                                });
                                
                            12. Nikita
                              Nikita
                              2019-09-06 18:06:52
                              <?if(CModule::IncludeModule("aspro.mshop")) {CMShop::Start(SITE_ID);}?>
                              
                              В блоке в header`е, мешает этот модуль.
                              Если строку удалить — анимация и все все все, работает шикарно.
                              Но вот с ним — нет.

                              Есть ли возможность у Вас помочь, разобраться
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-09-09 13:43:35
                                Проверьте, может какие названия классов в слайдере совпадают с названиями классов этого модуля. Ну, или можно просто добавить какой-нибудь префикс (например, my). После этого «.slider» станет «.myslider», «.slider__items» станет «.myslider__items», и т.д. Этот префикс нужно добавить как в CSS, так и в HTML. В JavaScript только там, где осуществляется выбор элементов.
                              2. Nikita
                                Nikita
                                2019-09-09 14:14:43
                                К сожалению не помогает.
                                Делал так, менял префикс везде. Анимация все ровно сбоит.

                                И выносил отдельно js и стили, и вносил их в head, и пробовал при помощи включаемой области на битрикс, все уже перепробовал… все ровно не работает…
                              3. Nikita
                                Nikita
                                2019-09-09 14:19:46
                                И кстати такой нюанс — через смартфон открыть если страницу, то анимация работает нормально…
                              4. Александр Мальцев
                                Александр Мальцев
                                2019-09-09 15:07:21
                                А в консоли в браузере ошибок нет?
                              5. Nikita
                                Nikita
                                2019-09-09 15:12:58
                                нет
                            13. Олег Фролов
                              Олег Фролов
                              2019-05-20 12:52:39
                              Спасибо большое! Слайдер отлично работает. Использую его для галереи. Можете подсказать, как отключить «карусель»(чтобы, дойдя до последнего слайда, слайды не начинались сначала)?
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-05-21 15:30:28
                                Спасибо!
                                Слайдер без зацикливания можно посмотреть в этом примере.
                            14. Erofeich
                              Erofeich
                              2019-04-24 23:53:19
                              Слайдер не работает в IE 11 и в стандартном браузере «Браузер» на Android.
                              Показывает первый слайд и всё. Нажатие на кнопки навигации ничего не даёт.
                              Можно это поправить?
                              Спасибо.
                              1. Александр Мальцев
                                Александр Мальцев
                                2019-04-25 14:03:34
                                Это значит, что эти браузеры какие-то функции JavaScript не поддерживает. Скорее всего это функция forEach.
                                В этом случае для включения поддержки необходимых старых браузеров удобно использовать полифиллы. Как это сделать посмотрите в этом комментарии.
                              2. Erofeich
                                Erofeich
                                2019-04-25 21:36:36
                                Спасибо, работает!)
                            15. Алексей
                              Алексей
                              2019-03-02 14:55:22
                              Спасибо большое!)
                              1. Алексей
                                Алексей
                                2019-03-01 16:30:09
                                Добрый день. Подскажите, как использовать одновременно несколько слайдеров на странице? Должно быть около 12. Это реально с этим слайдером?
                                1. Александр Мальцев
                                  Александр Мальцев
                                  2019-03-02 07:43:34
                                  Добрый!
                                  Вам необходимо просто вызывать функцию slideShow отдельно для каждого слайдера:
                                  <div id="slider-1" class="slider">
                                  ...
                                  </div>
                                  <div id="slider-2" class="slider">
                                  ...
                                  </div>
                                  
                                  <script>
                                  var slideShow = (function () {
                                  ...
                                  }());
                                  
                                  slideShow('#slider-1');
                                  slideShow('#slider-2');  
                                  </script>
                                  
                                  Демку, где на одной странице используется несколько каруселей можно посмотреть здесь.
                              2. Nik
                                Nik
                                2018-10-04 20:06:36
                                Большое спасибо за урок, все получилось легко — слайдер отлично работает! Вообще хотел Вам выразить признательность за все ваши уроки и темы на сайте!
                                1. Александр
                                  Александр
                                  2018-09-12 19:41:37
                                  Александр. Спасибо. Отличное решение.
                                  Есть вопрос, а как сделать так, что, если кликается по активному slider__indicators — у, ничего никуда не перемещалось?
                                  1. Александр
                                    Александр
                                    2018-09-12 19:58:40
                                    Вопрос снят.
                                    Добавил:
                                    if (e.target.getAttribute('data-slide-to').classList.contains('.active')){
                                      return;
                                    }