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

Александр Мальцев
181K
8
Слайдер для сайта на CSS и JavaScript
Содержание:
  1. Демо слайдера ChiefSlider
  2. О слайдере ChiefSlider
  3. Загрузка и подключение скриптов слайдера
  4. HTML-макет ChiefSlider
  5. Инициализация и настройка слайдера
  6. Описание слайдера и принципа его работы
  7. Комментарии

В этой статье мы разберём, как добавить на сайт бесплатный адаптивный слайдер ChiefSlider. Рассмотрим его особенности, процесс загрузки, подключение к странице, инициализацию и настройку.

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

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

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

Посмотреть

2. С одновременным показом 3 слайдов:

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

Посмотреть

3. С зацикливанием:

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

Посмотреть

4. С индикаторами и автоматической сменой слайдов через 7 секунд:

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

Посмотреть

5. Слайдер для ротации статей (из дополнительных опций – он обновляет своё состояние при изменении размеров окна браузера):

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

Посмотреть

6. Слайдер в модальном окне:

Слайдер в модальном окне

Посмотреть

О слайдере ChiefSlider

ChiefSlider – это легкий адаптивный слайдер для сайта, написанный на чистом JavaScript без каких-либо зависимостей.

Особенности слайдера:

  • размер JavaScript кода менее 9 Кбайт;
  • не требует никаких JavaScript библиотек, таких как jQuery и др.;
  • макет выполнен на flexbox, что позволяет выполнять настройку сетки слайдов на чистом CSS;
  • поставляется со встроенными элементами навигации: стрелками и индикаторами;
  • бесконечная прокрутка и автоматическое воспроизведение (смена слайдов) через определённые интервалы времени;
  • поддержка перелистывания слайдов смахиванием (touch swipe) для устройств с сенсорным экраном и перетаскиванием мышью;
  • зацикленность в отличие от других очень популярных слайдеров и каруселей (slick, splide, swiper, owlCarousel и др.) реализована без клонирования элементов (т.е., например, слайдер не создаёт копию последнего элемента для вставки перед первым и первого для его размещения после последнего).

ChiefSlider полностью бесплатен и имеет открытый исходный код (под лицензией MIT).

Ссылка на проект ChiefSlider: перейти.

Поддержите ChiefSlider и помогите сделать его ещё лучше! Ваша поддержка очень много значит для нас!

Поддержать проект!

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

Исходные коды слайдера расположены на GitHub в репозитории «ui-components». В «ui-components» находится не только этот слайдер, но и другие компоненты пользовательского интерфейса. Данный проект в этом репозитории находится в папке ChiefSlider.

Слайдер состоит из 2 файлов: «chief-slider.css» и «chief-slider.js».

В этой папке также имеются минимизированные версии этих файлов («chief-slider.min.css» и «chief-slider.min.js»). Их можно использовать для непосредственного подключения к странице.

Загрузить эти файлы в свой проект можно из архива проекта ui-components.

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

<!-- ChiefSlider CSS -->
<link rel="stylesheet" href="/assets/css/chief-slider.min.css">
<!-- ChiefSlider JavaScript -->
<script defer src="/assets/js/chief-slider.js"></script>

HTML-макет ChiefSlider

Основная HTML-структура слайдера выглядит так:

<div class="slider">
  <div class="slider__container">
    <div class="slider__wrapper">
      <div class="slider__items">
        <div class="slider__item">
          <!-- Контент 1 слайда -->
        </div>
        <div class="slider__item">
          <!-- Контент 2 слайда -->
        </div>
        <div class="slider__item">
          <!-- Контент 3 слайда -->
        </div>
      </div>
    </div>
  </div>
  <!-- Кнопки для перехода к предыдущему и следующему слайду -->
  <a href="#" class="slider__control" data-slide="prev"></a>
  <a href="#" class="slider__control" data-slide="next"></a>
</div>

Вставьте внутрь каждого элемента .slider__item нужное содержимое, например изображение.

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

Инициализация слайдера осуществляется посредством вызова функции-конструктора ChiefSlider при помощи оператора new:

// выполняем инициализацию слайдера с настройками по умолчанию
new ChiefSlider('.slider');

Инициализацию слайдера в <head> необходимо выполнять только после того, как DOM будет полностью загружен и построен:

// после готовности DOM
document.addEventListener('DOMContentLoaded', function() {
  new ChiefSlider('.slider');
});

Конструктор принимает в качестве первого аргумента селектор или DOM Element.

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

Пример кода для инициализации всех элементов с классом slider:

// после готовности DOM
document.addEventListener('DOMContentLoaded', function() {
  var elms = document.querySelectorAll('.slider');
  for (var i = 0, len = elms.length; i < len; i++) {
    // инициализация elms[i] в качестве слайдера
    new ChiefSlider(elms[i]);
  }
});

Если вам не нужна поддержка IE, то для перебора элементов вместо for можно воспользоваться forEach.

Настройка количества слайдов

Настройка количества активных элементов в слайдере осуществляется с помощью CSS.

По умолчанию слайдер настроен для показа одного активного элемента. В коде это выполнено так:

.slider__item {
  flex: 0 0 100%;
  max-width: 100%;
}

Если нужно одновременно показывать 2 слайда, то тогда для «.slider__item» нужно установить ширину, равную 50%.

Для этого на страницу в тег <style> или в свой файл стилей необходимо добавить:

.slider__item {
  flex: 0 0 50%;
  max-width: 50%;
}

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

/* на маленьких устройствах – 1 слайд (настройка по умолчанию) */

/* на средних экранах (ширина больше 768px) – 2 слайда */
@media (min-width: 768px) {
  .slider__item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* на больших экранах (ширина больше 1200px) – 3 слайда */
@media (min-width: 1200px) {
  .slider__item {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
}

Настройка слайдера с помощью JavaScript

ChiefSlider имеет по умолчанию следующую конфигурацию:

{
  loop: true,
  autoplay: false,
  interval: 5000,
  swipe: true,
  refresh: false
}

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

  • loop – зацикливает показ слайдов;
  • autoplay – включает автоматическую смену слайдов;
  • interval – устанавливает интервал в миллисекундах между автоматической сменой слайдов (по умолчанию 5000 мс);
  • swipe – разрешает листать слайды свайпом и перемещением курсора мыши при зажатой левой кнопки мыши;
  • refresh – обновляет слайдер при изменении размеров окна браузера, но только в том случае если изменяется количество отображаемых элементов.

Их настройка (изменение) осуществляется в формате объекта, который нужно передать ChiefSlider в качестве второго аргумента.

Например:

new ChiefSlider('.slider', {
  loop: false, // без зацикливания
  swipe: false // без свайпа
});

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

ChiefSlider состоит из HTML, CSS и JavaScript кода.

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

<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__items">
      <div class="slider__item">
        <!-- Контент 1 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 2 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 3 слайда -->
      </div>
    </div>
  </div>
  <!-- Кнопки -->
  <a href="#" class="slider__control" data-slide="prev"></a>
  <a href="#" class="slider__control" data-slide="next"></a>
</div>

Корневой элемент имеет класс slider.

В нём расположены:

  • .slider__wrapper – выступает в качестве обёртки;
  • .slider__control – кнопки, для навигации по слайду (переход к предыдущим и следующим элементам).

Сдаиг слайдов в нужном направлении выполняется в JavaScript коде с помощью метода _move. Эта метод в зависимости от установленного свойства _direction выполняет перемещение элемента .slider__items в нужном направлении посредством CSS- трансформации.

Организация зацикленности слайдера выполняется также посредством CSS-трансформации, но не контейнера «.slider__items», а уже самих элементов «.slider__item».

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

Добавление этих атрибутов при инициализации слайдера в коде реализовано так:

// $itemList – это элементы .slider__item
for (var i = 0, length = $itemList.length; i < length; i++) {
  $itemList[i].dataset.index = i;
  $itemList[i].dataset.order = i;
  $itemList[i].dataset.translate = 0;
}

Крайние индексы элементов, трансформаций и сами эти элементы в JavaScript хранятся в свойствах: _minOrder, _maxOrder, _$itemWithMinOrder, _$itemWithMaxOrder, _minTranslate и _maxTranslate.

Обновление этих свойств осуществляется с помощью метода _refreshExtremeValues.

Перемещение слайдов для организации зацикленности выполняется с помощью метода _balancingItems.

Как происходит перемещение слайдов для организации зацикленности

Автоматическая смена слайдов через определённые промежутки времени осуществляется с помощью функции setInterval. Она запускает метод _move через указанные интервалы времени, которые определяются значением свойства _config.interval:

this._intervalId = setInterval(function() {
    this._direction = 'next';
    this._move();
  }.bind(this),
  this._config.interval
);

Остановка автоматической смены слайдов при поднесении к нему курсора осуществлена следующим образом:

function onMouseEnter(e) {
  this._autoplay('stop');
}
function onMouseLeave(e) {
  this._autoplay();
}
$root.addEventListener('mouseenter', onMouseEnter.bind(this)); $root.addEventListener('mouseleave', onMouseLeave.bind(this));

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

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

function onVisibilityChange() {
  if (document.visibilityState === 'hidden') {
    this._autoplay('stop');
  } else if (document.visibilityState === 'visible') {
    if (this._config.loop) {
      this._autoplay();
    }
  }
}
document.addEventListener('visibilitychange', onVisibilityChange.bind(this));

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

function onResize() {
  window.requestAnimationFrame(this._refresh.bind(this));
}
window.addEventListener('resize', onResize.bind(this));

Комментарии ()

  1. Дмитрий
    Только что
    Александр, спасибо за легкое и простое решение!
    Подскажите пожалуйста, как я могу назначить уникальный стиль слайду, который в данный момент находится по центру?
    1. Евгений
      24 мая 2021, 11:04
      пытаюсь подключить 2 слайдера — один на странице, другой в модальном окне. на странице работает, в модельном нет( как это сделать правильно?
      сейчас так сделал
      <script>
                  document.addEventListener('DOMContentLoaded', function () {
                      var elms = document.querySelectorAll('#slider-1');
                      for (var i = 0, len = elms.length; i < len; i++) {
                          // инициализация elms[i] в качестве слайдера
                          new ChiefSlider(elms[i]);
                      }
                  });
              </script>
              <script>
                  // после готовности DOM
                  document.addEventListener('DOMContentLoaded', function () {
                      var elms = document.querySelectorAll('#slider-2');
                      for (var i = 0, len = elms.length; i < len; i++) {
                          // инициализация elms[i] в качестве слайдера
                          new ChiefSlider(elms[i]);
                      }
                  });
              </script>
      
      1. Александр Мальцев
        26 мая 2021, 15:16
        При инициализации слайдера выполняется определение его размеров. Но, это сделать не получится, если слайдер не отображается. Инициализацию слайдера в модальном окне следует делать при его открытии.
        Пример как это можно реализовать добавил в статью.
      2. Артур Владимирович Панфилов
        14 мая 2021, 16:46
        Здравствуйте, почему если в слайдер с одновременным показом 3 слайдов добавить например 12 слайдов, а не 5, то при прокрутке назад с конца он не возвращается к 1 слайду, а остается на 2
        1. Александр Мальцев
          15 мая 2021, 14:32
          Привет!
          Поправил. Файлы на GitHub обновил.
        2. Alexey
          14 мая 2021, 14:37
          Здравствуйте Александр!
          Огромное спасибо за этот прекрасный слайдер и отличную документацию!
          #1: Могли бы вы исправить или подсказать как исправить то, что этот слайдер совершенно не отображается на моем мобильном телефоне? В чем может быть причина? Safari, iPhone 6 Plus.
          #2: Со временем, после 10-20 автоматических слайдов, слайдер почему то начинает листать, скажем не на 100% влево, а уже на 99% и потом 1% резко дергается, до конца. Было бы здорово если бы это можно было бы как-то исправить.
          Но в целом, я безмерно Вам благодарен. Вы мне очень помогли этим слайдером. Большое спасибо.
          1. Alexey
            15 мая 2021, 10:32
            С проблемой #2 я справился. Дело в том, что если поместить слайдер в DIV у которого ширина будет равняться цифре с VW, например 65vw — появится вот такой вот баг. Слайдер со временем начинает дергаться все больше и больше. Стоит сделать этот DIV = 100% баг исчезает.

            Проблема #1 до сих пор актуальна :( Этот слайдер почему то не отображается на моем iPhone 6+ Safari. :(
            1. Александр Мальцев
              15 мая 2021, 13:59
              Привет!
              Спасибо, второй баг посмотрю.
              Первый баг скорее всего из-за стилей. Добавил префиксы в CSS. Файл с префиксами: chief-slider-with-prefixes.css. Попробуй использовать их. Также добавил их в первый пример: chief-slider-01. Можешь потестировать используя его.
              1. Alexey
                15 мая 2021, 14:21
                Привет! Спасибо большое за твой ответ!
                К сожалению по прежнему не работает, но я понял как именно проблема проявляется. Слайдер все таки появляется. И автоматический листает первый, второй, третий, четвертый слайд, а последнего слайда уже нет и затем слайды просто исчезают. 2ой цикл не появляется. Я проверил твои слайдеры (в том числе и первый), на этом вебсайте, с мобильного safari. Проблема, к сожалению, присутствует.
                Заранее большое спасибо.
                1. Александр Мальцев
                  15 мая 2021, 14:53
                  Значит что-то в JS не поддерживается. А версия Safari какая?
                  1. Alexey
                    15 мая 2021, 15:32
                    В google chrome такая же проблема на мобильном телефоне.
                    Баг появляется если включить loop:true. Без разницы, autoplay это или нет.
                    Последний и последующие слайды отсутствуют, в не зависимости от количества слайдов.
                    1. Alexey
                      15 мая 2021, 15:16
                      Большое спасибо за поддержку!
                      12.5.3 Если версия safari совпадает с версией iOS. (В google пишут, что версия safari == версия iOS)
                      PS: Баг присутствует когда loop: true.
                      1. Александр Мальцев
                        16 мая 2021, 08:47
                        Событие transitionstart не поддерживается в iOS 12.x. Немного изменил, попробуй подключить файл chief-slider.dev.js вместо «chief-slider.js».
                        1. Alexey
                          16 мая 2021, 08:58
                          О да! :) Большое спасибо. Теперь слайдер работает, в том числе на ios 12. Большое спасибо за слайдер и тех поддержку, ты — талант :)
            2. Василий
              02 мая 2021, 13:34
              Здравствуйте, Александр!
              Спасибо за отличный слайдер!
              Есть необходимость добавить следующую функциональность: навигация по слайдам с помощью ползунка… или стандартного input type=«range», или(и даже лучше в плане стилизации), кастомного.
              На подобие как здесь — https://darsa.in/sly/examples/horizontal.html
              В комментариях такого примера не нашел(может плохо искал;)))
              Подскажите, пожалуйста, в каком направлении лучше копать? Может хотя бы алгоритм или псевдокод…
              Заранее огромное спасибо!!!
              1. sankavankina
                27 апреля 2021, 18:31
                Доброго времени суток! Очень понравился ваш слайдер, прекрасно подошёл для моей задачи, единственное, что вообще никак не могу сделать, так это счётчик слайдов (1/3). Подскажите, пожалуйста, как это реализовать. Очень нужно… Спасибо!
                1. Александр Мальцев
                  03 мая 2021, 14:14
                  Привет! Спасибо за отзыв.
                  Это можно выполнить разными способами. Например, с помощью CSS счётчиков (первый пример в статье):
                  .slider__items {
                    counter-reset: slide;
                  }
                  .slider__item {
                    position: relative;
                    counter-increment: slide;
                  }
                  .slider__item::before {
                    content: counter(slide) "/5";
                    position: absolute;
                    top: 10px;
                    right: 20px;
                    color: #fff;
                    font-style: italic;
                    font-size: 32px;
                    font-weight: bold;
                    display: block;
                  }
                  
                2. Master
                  26 апреля 2021, 20:55
                  Спасибо, Александр, за столь ценный IT продукт. Использовал его в адаптивном сайте. Только заметил проблему: слайдер с зацикливанием работает не корректно в мобильных браузерах (проверял на Safari и Google Chrome). После пролистывания всех слайдов с изображениями, бесконечно идут пустые окна и слайдер не возвращается к первому изображению. В чем может быть проблема?
                  1. snakeTLN
                    22 апреля 2021, 13:42
                    Александр, спасибо вам за труд. Не сильна в JS, но ваш слайдер v2 легко использовать, даже не особо разбираясь в JS. Но заметили такой минус. Слайдер со свайпом не работает в IE11, т е не только свайп не работает, но и сам слайдер полностью. Как их подружить?
                    1. Александр Мальцев
                      26 апреля 2021, 14:32
                      Пожалуйста! В Internet Explorer, работающим под управлением Windows 10 работает. А какая ошибка в консоли выводится?
                    2. kadochnikov_k
                      17 марта 2021, 15:14
                      Александр, хочу еще раз поблагодарить за слайдер! Перехожу сейчас с первой версии на вторую, не могу разобраться в некоторых моментах:
                      1. Есть ли возможность добавлять индикаторы автоматически по количеству слайдов в слайдере?
                      2. Есть ли возможность не листать слайды и не выводить кнопки управления слайдером если все слайды умещаются на странице?
                      1. Александр Мальцев
                        18 марта 2021, 16:00
                        Пожалуйста! Конечно можно.
                        Пример решения (открыть):
                        const $sliders = document.querySelectorAll('[data-slider="chiefslider"]');
                        $sliders.forEach(function ($item) {
                          if ($item.querySelector('.slider__item').getBoundingClientRect().width * $item.querySelectorAll('.slider__item').length > $item.querySelector('.slider__wrapper').getBoundingClientRect().width) {
                            // добавим индикаторы
                            const $indicators = document.createElement('ol');
                            $indicators.className = 'slider__indicators';
                            let inner = '';
                            $item.querySelectorAll('.slider__item').forEach(function ($sliderItem, index) {
                              inner += `<li data-slide-to="${index}"></li>`;
                            });
                            $indicators.innerHTML = inner;
                            $item.appendChild($indicators);
                            // инициализируем слайдер
                            new ChiefSlider($item);
                          } else {
                            $item.querySelectorAll('.slider__control').forEach(function ($control) {
                              $control.style.display = 'none';
                            })
                          }
                        });
                        
                        1. kadochnikov_k
                          18 марта 2021, 18:11
                          Круто! Огромное спасибо еще раз
                      2. kadochnikov_k
                        16 марта 2021, 11:44
                        Добрый день! Подскажите, как во второй версии инициализировать слайдер, если их несколько на странице?
                        1. Александр Мальцев
                          16 марта 2021, 14:16
                          Привет!
                          Можно назначить каждому id, а затем их инициализировать следующим образом:
                          // инициализируем слайдер с id="slider-1"
                          new ChiefSlider(document.querySelector('#slider-1'));
                          // инициализируем слайдер с id="slider-2"
                          new ChiefSlider(document.querySelector('#slider-2'));
                          
                          Можно, например, посредством forEach (открыть):
                          const $sliders = document.querySelectorAll('[data-slider="chiefslider"]');
                          $sliders.forEach(function ($slider) {
                            new ChiefSlider($slider);
                          });
                          
                          1. kadochnikov_k
                            17 марта 2021, 12:41
                            Огромное спасибо! И еще: есть ли возможность во второй версии добавлять индикаторы автоматически в зависимости от количества слайдов?
                        2. damir
                          27 февраля 2021, 01:09
                          Почему кнопки управления не работают? js и css подключены, использую предложенный вами пример
                          1. Вячеслав
                            08 февраля 2021, 09:11
                            Александр, огромное спасибо за слайдер! Не могли бы Вы подсказать, как поменять стиль анимации? Сейчас у Вас только перелистование, а мне надо, чтобы на некоторых слайдерах было плавное исчезновение. Может имеет смысл дополнить скрипт слайдера функцией выбора анимации?
                            1. Serega
                              28 января 2021, 09:30
                              Здравствуйте у вас классные слайдеры. Я пока только учусь создавать сайты HTML. Я разместил фотографии в слайдере у вас на примере это Адаптивный слайдер с зацикливанием. Скажите а можно как то раелизовать что бы при клике на фото они увеличивались и их могли пролистывать люди как на пк так и на мобильном. Заранее благодарю.
                              1. Михаил
                                26 января 2021, 09:56
                                Можно ли реализовать навигацию в виде превьюшек?
                                1. Александр Мальцев
                                  27 января 2021, 15:40
                                  Можно, включу в список задач. После релиза новой версии этого скрипта добавлю такой пример в статью.
                                2. Дмитрий Покормяхо
                                  18 января 2021, 12:10
                                  Добрый день! Большое спасибо за статью. Всё написано просто и понятно, но с php выдаёт ошибку в консоль: Cannot read property 'querySelector' of null at script.js:23 at script.js:238.
                                  Подскажите, пожалуйста, где ошибка.
                                  PHP
                                  <!DOCTYPE html>
                                  <html>
                                  
                                  <head>
                                      <title>ТатаМед</title>
                                      <link rel="stylesheet" href="style/style.css">
                                  	<link rel="shortcut icon" href="/images/logo_ed_2.png" type="image/png">
                                  	<script src="script/script.js"></script>
                                  	<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
                                  </head>
                                  
                                  <body>
                                  	<?
                                  		include 'rewievs/uploadDataBase.php';
                                  		if ( isset($_GET["page"]) )
                                  		{
                                  			$page = $_GET["page"];
                                  		}
                                  		else 
                                  		{
                                  			$page = 1;
                                  		}
                                  		
                                  		$arrayOfMagazInfo = [ ["Мёд разнотравье, 0,7 литра в стеклянной баночке", "Мёд акациевый, 1 литра в стеклянной баночке", "Мёд в сотах, 1 кг"],
                                  		["105грн", "150грн", "250грн"], 
                                  		["images/magaz_photo_1.jpg", "images/magaz_photo_2.jpg", "images/magaz_photo_3.jpg"] ];
                                  	?>
                                      <header class="header">
                                          <div class="logo">
                                              <img src="images/logo_ed_2.png" alt="Тата Мед" class="logo_image">
                                          </div>
                                          <h1>ТатаМед</h1>
                                          <nav class="head_nav">
                                              <ul class="head_menu">
                                  				<?
                                  					if ($page == 1)
                                  					{
                                  						echo "<li class='head_menu_element'><a href='?page=1' class='select'>Головна</a></li>
                                  								<li class='head_menu_element'><a href='?page=2' class='head_menu_link'>Наша продукція</a></li>
                                  								<li class='head_menu_element'><a href='?page=3' class='head_menu_link'>Контакти</a></li>
                                  								<li class='head_menu_element'><a href='?page=4' class='head_menu_link'>Відгуки</a></li>";
                                  					}
                                  					else if ($page == 2)
                                  					{
                                  						echo "<li class='head_menu_element'><a href='?page=1' class='head_menu_link'>Головна</a></li>
                                  								<li class='head_menu_element'><a href='?page=2' class='select'>Наша продукція</a></li>
                                  								<li class='head_menu_element'><a href='?page=3' class='head_menu_link'>Контакти</a></li>
                                  								<li class='head_menu_element'><a href='?page=4' class='head_menu_link'>Відгуки</a></li>";
                                  					}
                                  					else if ($page == 3)
                                  					{
                                  						echo "<li class='head_menu_element'><a href='?page=1' class='head_menu_link'>Головна</a></li>
                                  								<li class='head_menu_element'><a href='?page=2' class='head_menu_link'>Наша продукція</a></li>
                                  								<li class='head_menu_element'><a href='?page=3' class='select'>Контакти</a></li>
                                  								<li class='head_menu_element'><a href='?page=4' class='head_menu_link'>Відгуки</a></li>";
                                  					}
                                  					else if ($page == 4)
                                  					{
                                  						echo "<li class='head_menu_element'><a href='?page=1' class='head_menu_link'>Головна</a></li>
                                  								<li class='head_menu_element'><a href='?page=2' class='head_menu_link'>Наша продукція</a></li>
                                  								<li class='head_menu_element'><a href='?page=3' class='head_menu_link'>Контакти</a></li>
                                  								<li class='head_menu_element'><a href='?page=4' class='select'>Відгуки</a></li>";
                                  					}
                                  				?>
                                              </ul>
                                          </nav>
                                      </header>
                                  	<main>
                                  		<?
                                  			if ($page == 1)
                                  			{
                                  				echo "
                                  					<h2>Сонячний мед</h2>
                                  					<p class='aboutText'>
                                  						Мед перебрався в красиві баночки...
                                  						Просто шматочок літа під золотою кришечкою.
                                  					</p>
                                  					<div class='firstVideoContainer'>
                                  						<video src='videos/sun_honey.mp4' controls='controls' class='video video_1'></video>
                                  					</div>
                                  					<div class='secondVideoContainer'>
                                  						<video src='videos/Video_02.mp4' controls='controls' class='video video_2'></video>
                                  					</div>
                                  			
                                  					<div class='slider'>
                                  						<div class='slider__wrapper'>
                                  							<div class='slider__item'>
                                  								<div style='height: 250px; background: orange;'>1</div>
                                  							</div>
                                  							<div class='slider__item'>
                                  								<div style='height: 250px; background: green;'>2</div>
                                  							</div>
                                  							<div class='slider__item'>
                                  								<div style='height: 250px; background: violet;'>3</div>
                                  							</div>
                                  							<div class='slider__item'>
                                  								<div style='height: 250px; background: coral;'>4</div>
                                  							</div>
                                  						</div>
                                  						<a class='slider__control slider__control_left' href='#' role='button'></a>
                                  						<a class='slider__control slider__control_right slider__control_show' href='#' role='button'></a>
                                  					</div>
                                  
                                  					";
                                  			}
                                  			else if ($page == 2)
                                  			{
                                  				echo "<h2>Наша продукція</h2>";
                                  				for ($i = 0; $i < count($arrayOfMagazInfo[0]); $i++)
                                  				{
                                  					echo "<div class='magaz_block'>
                                  							<img class='magazImg' src=".$arrayOfMagazInfo[2][$i].">
                                  							<p class='productName'>".$arrayOfMagazInfo[0][$i]."</p>
                                  							<p class='price'>Цена: ".$arrayOfMagazInfo[1][$i]."</p>
                                  						</div>";
                                  				}
                                  			}
                                  			else if ($page == 3)
                                  			{
                                  				echo "<h2>Контакти</h2>
                                  						<p class='contacts'>
                                  							Телефон: <a class='contacts contactsHref' href='tel:380975572806'>+38-050-281-3750</a>
                                  							Почта: <a class='contacts contactsHref' href='mailto:tatamed@gmail.com'>tatamed@gmail.com</a>
                                  						</p>";
                                  			}
                                  			else if ($page == 4)
                                  			{
                                  				$tab = mysql_query("SELECT * FROM `rewiev` ");
                                  				
                                  				echo "<h2>Відгуки</h2>";
                                  				echo "<table class='rewievTable' align='center' cellspacing='0px'>
                                  							<tr>
                                  								<th>Ім'я</th>
                                  								<th>Відгук</th>
                                  							</tr>";
                                  				
                                  				while ($row = mysql_fetch_array($tab) )
                                  				{
                                  					echo "<tr>
                                  								<td align='center'>
                                  									".$row['name']."
                                  								</td>
                                  								<td id='comment'>
                                  									<i>".$row['rewiev']."</i>
                                  								</td>
                                  							</tr>";
                                  				}
                                  				echo "</table>
                                  						<form type='submit' method='POST' action='rewievs/rewievSend.php'>
                                  							<p align='center'>
                                  								<b>
                                  									<i class='writeRewievText'>Ваше ім'я:</i>
                                  								</b>
                                  								
                                  								<input class='writeRewievInput' type='text' name='name'>
                                  								
                                  								<b>
                                  									<i class='writeRewievText'>Ваш відгук:</i>
                                  								</b>
                                  								
                                  								
                                  								<textarea class='writeRewievInput' name='k' rows='4'></textarea>
                                  								
                                  								
                                  								<input class='writeRewievButton' type='submit' value='Надіслати'>
                                  							</p>";
                                  			}
                                  		?>
                                  	</main>
                                  </body>
                                  
                                  </html>
                                  
                                  CSS
                                  	body, html {
                                  	margin: 0;
                                      background-color: #FFCF48;
                                      min-width: 675px;
                                  }
                                  
                                  .header {
                                  	background: url(../images/header_background.jpg);
                                      background-size:  100% 500px;
                                      overflow: hidden;
                                  }
                                  
                                  .logo_image {
                                      width: 150px;
                                      margin: 10px 10px 10px 35px;
                                      display: inline-block;
                                      float: left;
                                  }
                                  
                                  h1 {
                                      margin: 30px 0 30px 225px;
                                  	font-family: Comic Sans MS;
                                  	font-size: 60px;
                                  	-webkit-text-stroke: 2.5px brown;
                                      color: yellow;
                                  	text-shadow: 3px 3px 10px black;
                                  }
                                  
                                  h2 {
                                  	font-family: Comic Sans MS;
                                  	font-size: 40px;
                                  	-webkit-text-stroke: 1.2px brown;
                                      color: yellow;
                                  	margin-left: 0px;
                                  	text-shadow: 2px 2px 7px grey;
                                  }
                                  
                                  .head_menu {
                                      display: inline-block;
                                  }
                                  
                                  .head_menu_element {
                                  	display: inline-block;
                                      list-style-type: none;
                                      margin-top: 10px;
                                      margin-bottom: 5px;
                                  }
                                  
                                  .head_menu_link {
                                  	margin: 10px auto;
                                      padding: 5px;
                                      background-color: yellow;
                                      border: 3px solid orange;
                                      border-radius: 15px;
                                      font-family: Comic Sans MS;
                                      text-decoration: none;
                                  }
                                  
                                  .head_menu_link:hover {
                                      border: 3px solid orangered;
                                  }
                                  
                                  .select {
                                  	margin: 10px auto;
                                      padding: 5px;
                                      background-color: yellow;
                                      border: 3px solid red;
                                      border-radius: 15px;
                                      font-family: Comic Sans MS;
                                      text-decoration: none;
                                  }
                                  
                                  main {
                                  	text-align: center;
                                  }
                                  
                                  .aboutText {
                                  	font-family: Comic Sans MS;
                                  	color: DarkOrange;
                                  	font-size: 30px;
                                  	-webkit-text-stroke: 0.6px brown;
                                  }
                                  
                                  .video, .video:active, .video:focus {
                                  	width: 600px;
                                  	border: 4px solid Chocolate;
                                  	overflow: hidden;
                                  	padding: 0px;
                                  	outline: none;
                                  }
                                  
                                  .video_1 {
                                  	margin: 0px 40px 40px 0px;
                                  }
                                  
                                  .video_2 {
                                  	margin: 0px 40px 0px 0px;
                                  }
                                  
                                  .magaz_block {
                                  	display: inline-block;
                                  	padding: 10px;
                                  	margin: 20px;
                                  	border: 2px solid brown;
                                  	background-color: lightyellow;
                                  	width: 406px;
                                  }
                                  
                                  .magazImg {
                                  	width: 400px;
                                  	height: 300px;
                                  }
                                  
                                  .productName, .price {
                                  	color: DarkOrange;
                                  	/*#df8100*/
                                  	font-family: Comic Sans MS;
                                  }
                                  
                                  .contacts {
                                  	font-family: Comic Sans MS;
                                  	font-size: 30px;
                                  	-webkit-text-stroke: 0.6px brown;
                                      color: DarkOrange;
                                  	text-decoration: none;
                                  	/*text-shadow: 3px 3px 10px grey;*/
                                  }
                                  
                                  .contactsHref:hover {
                                  	text-decoration: underline;
                                  	text-decoration-color: Chocolate;
                                  	color: orangered;
                                  }
                                  
                                  .rewievTable {
                                  	background-color: #ffe559;
                                  	text-align: center;
                                  	border: 2px solid Chocolate;
                                  	width: 50%;
                                  	font-size: 20px;
                                  }
                                  
                                  td, th {
                                  	border: 1px solid Chocolate;
                                  	padding: 8px;
                                  	color: #cf7903;
                                  }
                                  
                                  .writeRewievText {
                                  	color: #cf7903;
                                  	font-size: 20px;
                                  }
                                  
                                  .writeRewievInput, .writeRewievInput:active, .writeRewievInput:focus {
                                  	width: 500px;
                                  	outline: none;
                                  	color: Chocolate;
                                  	background-color: #ffdd28;
                                  	border-color: orange;
                                  	border-radius: 10px;
                                  	padding: 5px;
                                  	font-family: comic Sans MS;
                                  	font-size: 20px;
                                  }
                                  
                                  .writeRewievButton, .writeRewievButton:active, .writeRewievButton:focus {
                                  	border-radius: 10px;	 
                                      outline: none;
                                  	color: Chocolate;
                                  	background-color: #ffdd28;
                                  	border-color: orange;
                                  	border-radius: 10px;
                                  	padding: 5px;
                                  	font-family: comic Sans MS;
                                  	font-size: 20px;
                                  }
                                  
                                  textarea {
                                  	color: Chocolate;
                                  	border: 2px solid orange;
                                  	min-width: 500px;
                                  	max-width: 800px;
                                  	min-height: 100px;
                                  	max-height: 200px;
                                  }
                                  
                                  /* ------------------------------- */
                                  
                                  .slider {
                                        position: relative;
                                        overflow: hidden;
                                      }
                                  
                                      .slider__wrapper {
                                        display: flex;
                                        transition: transform 0.6s ease;
                                      }
                                  
                                      .slider__item {
                                        flex: 0 0 100%;
                                        max-width: 100%;
                                      }
                                  
                                      @media (min-width: 980px) {
                                        .slider__item {
                                          flex: 0 0 50%;
                                          max-width: 50%;
                                        }
                                      }
                                  
                                      .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, .5);
                                      }
                                  
                                      .slider__control:hover,
                                      .slider__control:focus {
                                        color: #fff;
                                        text-decoration: none;
                                        outline: 0;
                                        opacity: .9;
                                      }
                                  
                                      .slider__control_left {
                                        left: 0;
                                      }
                                  
                                      .slider__control_right {
                                        right: 0;
                                      }
                                  
                                      .slider__control::before {
                                        content: '';
                                        display: inline-block;
                                        width: 20px;
                                        height: 20px;
                                        background: transparent no-repeat center center;
                                        background-size: 100% 100%;
                                      }
                                  
                                      .slider__control_left::before {
                                        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
                                      }
                                  
                                      .slider__control_right::before {
                                        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
                                      }
                                  
                                      .slider__item>div {
                                        line-height: 250px;
                                        font-size: 100px;
                                        text-align: center;
                                      }
                                  
                                  JS
                                  	'use strict';
                                      var multiItemSlider = (function () {
                                  
                                        function _isElementVisible(element) {
                                          var rect = element.getBoundingClientRect(),
                                            vWidth = window.innerWidth || doc.documentElement.clientWidth,
                                            vHeight = window.innerHeight || doc.documentElement.clientHeight,
                                            elemFromPoint = function (x, y) { return document.elementFromPoint(x, y) };
                                          if (rect.right < 0 || rect.bottom < 0
                                            || rect.left > vWidth || rect.top > vHeight)
                                            return false;
                                          return (
                                            element.contains(elemFromPoint(rect.left, rect.top))
                                            || element.contains(elemFromPoint(rect.right, rect.top))
                                            || element.contains(elemFromPoint(rect.right, rect.bottom))
                                            || element.contains(elemFromPoint(rect.left, rect.bottom))
                                          );
                                        }
                                  
                                        return function (selector, config) {
                                          var
                                            _mainElement = document.querySelector(selector), // основный элемент блока
                                            _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                                            _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                                            _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                                            _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                                            _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                                            _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                                            _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента    
                                            _positionLeftItem = 0, // позиция левого активного элемента
                                            _transform = 0, // значение транфсофрмации .slider_wrapper
                                            _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
                                            _items = [], // массив элементов
                                            _interval = 0,
                                            _html = _mainElement.innerHTML,
                                            _states = [
                                              { active: false, minWidth: 0, count: 1 },
                                              { active: false, minWidth: 980, count: 2 }
                                            ],
                                            _config = {
                                              isCycling: false, // автоматическая смена слайдов
                                              direction: 'right', // направление смены слайдов
                                              interval: 5000, // интервал между автоматической сменой слайдов
                                              pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
                                            };
                                  
                                          for (var key in config) {
                                            if (key in _config) {
                                              _config[key] = config[key];
                                            }
                                          }
                                  
                                          // наполнение массива _items
                                          _sliderItems.forEach(function (item, index) {
                                            _items.push({ item: item, position: index, transform: 0 });
                                          });
                                  
                                          var _setActive = function () {
                                            var _index = 0;
                                            var width = parseFloat(document.body.clientWidth);
                                            _states.forEach(function (item, index, arr) {
                                              _states[index].active = false;
                                              if (width >= _states[index].minWidth)
                                                _index = index;
                                            });
                                            _states[_index].active = true;
                                          }
                                  
                                          var _getActive = function () {
                                            var _index;
                                            _states.forEach(function (item, index, arr) {
                                              if (_states[index].active) {
                                                _index = index;
                                              }
                                            });
                                            return _index;
                                          }
                                  
                                          var position = {
                                            getItemMin: function () {
                                              var indexItem = 0;
                                              _items.forEach(function (item, index) {
                                                if (item.position < _items[indexItem].position) {
                                                  indexItem = index;
                                                }
                                              });
                                              return indexItem;
                                            },
                                            getItemMax: function () {
                                              var indexItem = 0;
                                              _items.forEach(function (item, index) {
                                                if (item.position > _items[indexItem].position) {
                                                  indexItem = index;
                                                }
                                              });
                                              return indexItem;
                                            },
                                            getMin: function () {
                                              return _items[position.getItemMin()].position;
                                            },
                                            getMax: function () {
                                              return _items[position.getItemMax()].position;
                                            }
                                          }
                                  
                                          var _transformItem = function (direction) {
                                            var nextItem;
                                            if (!_isElementVisible(_mainElement)) {
                                              return;
                                            }
                                            if (direction === 'right') {
                                              _positionLeftItem++;
                                              if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) {
                                                nextItem = position.getItemMin();
                                                _items[nextItem].position = position.getMax() + 1;
                                                _items[nextItem].transform += _items.length * 100;
                                                _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
                                              }
                                              _transform -= _step;
                                            }
                                            if (direction === 'left') {
                                              _positionLeftItem--;
                                              if (_positionLeftItem < position.getMin()) {
                                                nextItem = position.getItemMax();
                                                _items[nextItem].position = position.getMin() - 1;
                                                _items[nextItem].transform -= _items.length * 100;
                                                _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
                                              }
                                              _transform += _step;
                                            }
                                            _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
                                          }
                                  
                                          var _cycle = function (direction) {
                                            if (!_config.isCycling) {
                                              return;
                                            }
                                            _interval = setInterval(function () {
                                              _transformItem(direction);
                                            }, _config.interval);
                                          }
                                  
                                          // обработчик события click для кнопок "назад" и "вперед"
                                          var _controlClick = function (e) {
                                            if (e.target.classList.contains('slider__control')) {
                                              e.preventDefault();
                                              var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                                              _transformItem(direction);
                                              clearInterval(_interval);
                                              _cycle(_config.direction);
                                            }
                                          };
                                  
                                          // обработка события изменения видимости страницы
                                          var _handleVisibilityChange = function () {
                                            if (document.visibilityState === "hidden") {
                                              clearInterval(_interval);
                                            } else {
                                              clearInterval(_interval);
                                              _cycle(_config.direction);
                                            }
                                          }
                                  
                                          var _refresh = function () {
                                            clearInterval(_interval);
                                            _mainElement.innerHTML = _html;
                                            _sliderWrapper = _mainElement.querySelector('.slider__wrapper');
                                            _sliderItems = _mainElement.querySelectorAll('.slider__item');
                                            _sliderControls = _mainElement.querySelectorAll('.slider__control');
                                            _sliderControlLeft = _mainElement.querySelector('.slider__control_left');
                                            _sliderControlRight = _mainElement.querySelector('.slider__control_right');
                                            _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width);
                                            _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width);
                                            _positionLeftItem = 0;
                                            _transform = 0;
                                            _step = _itemWidth / _wrapperWidth * 100;
                                            _items = [];
                                            _sliderItems.forEach(function (item, index) {
                                              _items.push({ item: item, position: index, transform: 0 });
                                            });
                                          }
                                  
                                          var _setUpListeners = function () {
                                            _mainElement.addEventListener('click', _controlClick);
                                            if (_config.pause && _config.isCycling) {
                                              _mainElement.addEventListener('mouseenter', function () {
                                                clearInterval(_interval);
                                              });
                                              _mainElement.addEventListener('mouseleave', function () {
                                                clearInterval(_interval);
                                                _cycle(_config.direction);
                                              });
                                            }
                                            document.addEventListener('visibilitychange', _handleVisibilityChange, false);
                                            window.addEventListener('resize', function () {
                                              var
                                                _index = 0,
                                                width = parseFloat(document.body.clientWidth);
                                              _states.forEach(function (item, index, arr) {
                                                if (width >= _states[index].minWidth)
                                                  _index = index;
                                              });
                                              if (_index !== _getActive()) {
                                                _setActive();
                                                _refresh();
                                              }
                                            });
                                          }
                                  
                                          // инициализация
                                          _setUpListeners();
                                          if (document.visibilityState === "visible") {
                                            _cycle(_config.direction);
                                          }
                                          _setActive();
                                  
                                          return {
                                            right: function () { // метод right
                                              _transformItem('right');
                                            },
                                            left: function () { // метод left
                                              _transformItem('left');
                                            },
                                            stop: function () { // метод stop
                                              _config.isCycling = false;
                                              clearInterval(_interval);
                                            },
                                            cycle: function () { // метод cycle 
                                              _config.isCycling = true;
                                              clearInterval(_interval);
                                              _cycle();
                                            }
                                          }
                                  
                                        }
                                      }());
                                  
                                      var slider = multiItemSlider('.slider', {
                                        isCycling: true
                                      })
                                  
                                  Site
                                  1. Дмитрий Покормяхо
                                    18 января 2021, 18:51
                                    Извиняюсь. Сам разобрался. Не там подключал js. :)
                                  2. kadochnikov_k
                                    13 января 2021, 13:27
                                    Александр, еще раз спасибо за слайдер! Я использую этот вариант слайдера, но в нем не было свайпа и я его решил добавить, используя ваш код. Но свайп так и не заработал, не могу понять в чем моя ошибка, возможно вы подскажете? Вот что у меня получилось:
                                    'use strict';
                                    var multiItemSliderVertical = (function () {
                                    
                                        function _isElementVisible(element) {
                                            var
                                                rect = element.getBoundingClientRect(),
                                                windowHeight = (window.innerHeight || document.documentElement.clientHeight),
                                                windowWidth = (window.innerWidth || document.documentElement.clientWidth),
                                                vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0),
                                                horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
                                            return (vertInView && horInView);
                                        }
                                    
                                        return function (selector, config) {
                                            var
                                                _mainElement = document.querySelector(selector),
                                                _sliderWrapper = _mainElement.querySelector('.slider__wrapper_vertical'),
                                                _sliderItems = _mainElement.querySelectorAll('.slider__item_vertical'),
                                                _sliderControls = _mainElement.querySelectorAll('.slider__control_vertical'),
                                                _sliderControlLeft = _mainElement.querySelector('.slider__control_left_vertical'),
                                                _sliderControlRight = _mainElement.querySelector('.slider__control_right_vertical'),
                                                _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width),
                                                _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width),
                                                _wrapperHeight = parseFloat(getComputedStyle(_sliderWrapper).height),
                                                _itemHeight = parseFloat(getComputedStyle(_sliderItems[0]).height),
                                                _html = _mainElement.innerHTML,
                                                _indexIndicator = 0,
                                                _maxIndexIndicator = _sliderItems.length - 1,
                                                _indicatorItems,
                                                _positionLeftItem = 0,
                                                _transform = 0,
                                                _step = _itemWidth / _wrapperWidth * 100,
                                                _stepHeight = _itemHeight / _wrapperHeight * 100,
                                                _items = [],
                                                _interval = 0,
                                                _states = [
                                                    { active: false, minWidth: 0, count: 1 },
                                                    { active: false, minWidth: 576, count: 2 },
                                                    { active: false, minWidth: 992, count: 3 },
                                                    { active: false, minWidth: 1200, count: 4 },
                                                ],
                                                _config = {
                                                    isCycling: false,
                                                    direction: 'right',
                                                    interval: 10000,
                                                    pause: true
                                                };
                                    
                                            for (var key in config) {
                                                if (key in _config) {
                                                    _config[key] = config[key];
                                                }
                                            }
                                    
                                            _sliderItems.forEach(function (item, index) {
                                                _items.push({ item: item, position: index, transform: 0 });
                                            });
                                    
                                            var _setActive = function () {
                                                var _index = 0;
                                                var width = parseFloat(document.body.clientWidth);
                                                _states.forEach(function (item, index, arr) {
                                                    _states[index].active = false;
                                                    if (width >= _states[index].minWidth)
                                                        _index = index;
                                                });
                                                _states[_index].active = true;
                                            }
                                    
                                            var _getActive = function () {
                                                var _index;
                                                _states.forEach(function (item, index, arr) {
                                                    if (_states[index].active) {
                                                        _index = index;
                                                    }
                                                });
                                                return _index;
                                            }
                                    
                                            var position = {
                                                getMin: 0,
                                                getMax: _items.length - 1,
                                            }
                                    
                                            var _transformItem = function (direction) {
                                                var nextItem, currentIndicator = _indexIndicator;
                                                if (!_isElementVisible(_mainElement)) {
                                                    return;
                                                }
                                                if (direction === 'right') {
                                                    if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
                                                        return;
                                                    }
                                                    _positionLeftItem++;
                                                    _transform -= _stepHeight;
                                                    _indexIndicator = _indexIndicator + 1;
                                                    if (_indexIndicator > _maxIndexIndicator) {
                                                        _indexIndicator = 0;
                                                    }
                                                }
                                                if (direction === 'left') {
                                                    if (_positionLeftItem <= position.getMin) {
                                                        return;
                                                    }
                                                    _positionLeftItem--;
                                                    _transform += _stepHeight;
                                                    _indexIndicator = _indexIndicator - 1;
                                                    if (_indexIndicator < 0) {
                                                        _indexIndicator = _maxIndexIndicator;
                                                    }
                                                }
                                                _sliderWrapper.style.transform = 'translateY(' + _transform + '%)';
                                                _indicatorItems[currentIndicator].classList.remove('active');
                                                _indicatorItems[_indexIndicator].classList.add('active');
                                            }
                                    
                                            var _slideTo = function (to) {
                                                var i = 0, direction = (to > _indexIndicator) ? 'right' : 'left';
                                                while (to !== _indexIndicator && i <= _maxIndexIndicator) {
                                                    _transformItem(direction);
                                                    i++;
                                                }
                                            }
                                    
                                            var _cycle = function (direction) {
                                                if (!_config.isCycling) {
                                                    return;
                                                }
                                                _interval = setInterval(function () {
                                                    _transformItem(direction);
                                                }, _config.interval);
                                            }
                                    
                                            var _controlClick = function (e) {
                                                if (e.target.classList.contains('slider__control_vertical')) {
                                                    e.preventDefault();
                                                    var direction = e.target.classList.contains('slider__control_right_vertical') ? 'right' : 'left';
                                                    _transformItem(direction);
                                                    clearInterval(_interval);
                                                    _cycle(_config.direction);
                                                }
                                                if (e.target.getAttribute('data-slide-to-vertical')) {
                                                    _slideTo(parseInt(e.target.getAttribute('data-slide-to-vertical')));
                                                    clearInterval(_interval);
                                                    _cycle(_config.direction);
                                                }
                                            };
                                    
                                            var _handleVisibilityChange = function () {
                                                if (document.visibilityState === "hidden") {
                                                    clearInterval(_interval);
                                                } else {
                                                    clearInterval(_interval);
                                                    _cycle(_config.direction);
                                                }
                                            }
                                    
                                            var _refresh = function () {
                                                clearInterval(_interval);
                                                _mainElement.innerHTML = _html;
                                                _sliderWrapper = _mainElement.querySelector('.slider__wrapper_vertical');
                                                _sliderItems = _mainElement.querySelectorAll('.slider__item_vertical');
                                                _sliderControls = _mainElement.querySelectorAll('.slider__control_vertical');
                                                _sliderControlLeft = _mainElement.querySelector('.slider__control_left_vertical');
                                                _sliderControlRight = _mainElement.querySelector('.slider__control_right_vertical');
                                                _wrapperHeight = parseFloat(getComputedStyle(_sliderWrapper).height);
                                                _itemHeight = parseFloat(getComputedStyle(_sliderItems[0]).height);
                                                _positionLeftItem = 0;
                                                _transform = 0;
                                                _indexIndicator = 0;
                                                _maxIndexIndicator = _sliderItems.length - 1;
                                                _step = _itemWidth / _wrapperWidth * 100;
                                                _stepHeight = _itemHeight / _wrapperHeight * 100;
                                                _items = [];
                                                _sliderItems.forEach(function (item, index) {
                                                    _items.push({ item: item, position: index, transform: 0 });
                                                });
                                                _addIndicators();
                                            }
                                    
                                            var _setUpListeners = function () {
                                                _mainElement.addEventListener('click', _controlClick);
                                                if (_config.pause && _config.isCycling) {
                                                    _mainElement.addEventListener('mouseenter', function () {
                                                        clearInterval(_interval);
                                                    });
                                                    _mainElement.addEventListener('mouseleave', function () {
                                                        clearInterval(_interval);
                                                        _cycle(_config.direction);
                                                    });
                                                }
                                    
                                                document.addEventListener('visibilitychange', _handleVisibilityChange, false);
                                                window.addEventListener('resize', function () {
                                                    var
                                                        _index = 0,
                                                        width = parseFloat(document.body.clientWidth);
                                                    _states.forEach(function (item, index, arr) {
                                                        if (width >= _states[index].minWidth)
                                                            _index = index;
                                                    });
                                                    if (_index !== _getActive()) {
                                                        _setActive();
                                                        _refresh();
                                                    }
                                                });
                                    
                                                _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');
                                                        clearInterval(_interval);
                                                        _cycle(_config.direction);
                                                    } else if (_deltaX < -50) {
                                                        _transformItem('right');
                                                        clearInterval(_interval);
                                                        _cycle(_config.direction);
                                                    }
                                                });
                                    
                                                _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');
                                                    }
                                                });
                                            }
                                    
                                            var _addIndicators = function () {
                                                var sliderIndicators = document.createElement('ol');
                                                sliderIndicators.classList.add('slider__indicators_vertical');
                                                for (var i = 0; i < _sliderItems.length; i++) {
                                                    var sliderIndicatorsItem = document.createElement('li');
                                                    if (i === 0) {
                                                        sliderIndicatorsItem.classList.add('active');
                                                    }
                                                    sliderIndicatorsItem.setAttribute("data-slide-to-vertical", i);
                                                    sliderIndicators.appendChild(sliderIndicatorsItem);
                                                }
                                                _mainElement.appendChild(sliderIndicators);
                                                _indicatorItems = _mainElement.querySelectorAll('.slider__indicators_vertical > li')
                                            }
                                    
                                            // добавляем индикаторы
                                            _addIndicators();
                                            // инициализация
                                            _setUpListeners();
                                    
                                            if (document.visibilityState === "visible") {
                                                _cycle(_config.direction);
                                            }
                                            _setActive();
                                    
                                            return {
                                                right: function () {
                                                    _transformItem('right');
                                                },
                                                left: function () {
                                                    _transformItem('left');
                                                },
                                                stop: function () {
                                                    _config.isCycling = false;
                                                    clearInterval(_interval);
                                                },
                                                cycle: function () {
                                                    _config.isCycling = true;
                                                    clearInterval(_interval);
                                                    _cycle();
                                                }
                                            }
                                    
                                        }
                                    }());
                                    
                                    document.querySelectorAll('.slider_vertical').forEach(function (item, index) {
                                        item.setAttribute('data-slider-id-vertical', index);
                                        var sliderSelector = '[data-slider-id-vertical="' + index + '"]';
                                        var sliderElem = document.querySelector(sliderSelector);
                                        // если слайдов в слайдере нет, то завершаем текущую работу функции
                                        if (sliderElem.querySelectorAll('.slider__item_vertical').length === 0) {
                                            return;
                                        }
                                        if (
                                            sliderElem.querySelector('.slider__item_vertical').getBoundingClientRect().width *
                                            sliderElem.querySelectorAll('.slider__item_vertical').length >
                                            sliderElem.querySelector('.slider__wrapper_vertical').getBoundingClientRect().width
                                        ) {
                                            multiItemSliderVertical('[data-slider-id-vertical="' + index + '"]', {
                                                isCycling: true,
                                            });
                                        } else {
                                            var sliderControls = sliderElem.querySelectorAll('.slider__control_vertical');
                                            for (var i = 0; i < sliderControls.length; i++) {
                                                sliderControls[i].style.display = 'none';
                                            }
                                        }
                                    });
                                    
                                    1. Александр Мальцев
                                      14 января 2021, 16:21
                                      Пожалуйста! В ближайшее время обновлю скрипт слайдера. Он будет включать возможность включения свайпа из коробки.
                                      1. Виталий
                                        25 января 2021, 17:55
                                        День добрый. А вы не добавили еще свайп в слайдер?
                                        1. Александр Мальцев
                                          27 января 2021, 15:33
                                          Новая версия в процессе разработки, свайп туда уже добавил. Находиться она на Github: github.com/itchief/chiefSlider
                                        2. kadochnikov_k
                                          15 января 2021, 16:36
                                          Все-таки возможно подскажите, почему в моем случае не сработало добавление этого кода для свайпа?
                                          _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');
                                                              clearInterval(_interval);
                                                              _cycle(_config.direction);
                                                          } else if (_deltaX < -50) {
                                                              _transformItem('right');
                                                              clearInterval(_interval);
                                                              _cycle(_config.direction);
                                                          }
                                                      });
                                          
                                                      _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. kadochnikov_k
                                            14 января 2021, 16:43
                                            Спасибо большое!
                                        3. SinGlEBW
                                          08 января 2021, 01:14
                                          Хотел бы указать некоторую проблему с слайдером. У меня на сайте планируется 5 слайдеров (не спрашивайте зачем). 4 не похожих на 1.
                                          Используя одинаковые классы в слайдере придётся добавлять доп. классы слайдерам и переназначать стили или как вариант копировать всю функцию и переназначать классы там. Что бы этого не городить пришлось чуть улучшить
                                          querySelector||All

                                          Флаги указывал чтоб сходу понятно было, что метод не стандартный.
                                            Element.prototype.querySelector = function (selectOrRegExp, flag = false){
                                              if(selectOrRegExp.constructor === RegExp.prototype.constructor && flag){
                                                return [...this.children].find((item) => selectOrRegExp.test(item.className));
                                              }else{
                                                return this.querySelector(selectOrRegExp);
                                              }
                                            }
                                            
                                            Element.prototype.querySelectorAll = function (selectOrRegExp, flag = false){
                                              if(selectOrRegExp.constructor === RegExp.prototype.constructor && flag){
                                                return [...this.children].filter((item) => selectOrRegExp.test(item.className));
                                              }else{
                                                return this.querySelectorAll(selectOrRegExp);
                                              }
                                            }
                                          
                                          Результат:
                                           let  _mainElement = document.querySelector(selector),
                                                _sliderWrapper = _mainElement.querySelector(/\w*__wrap/, true),
                                                _sliderItems = _sliderWrapper.querySelectorAll(/\w*__item/, true),
                                                _sliderControls = _mainElement.querySelectorAll(/\w*__control/, true),
                                                _sliderControlLeft = _mainElement.querySelector(/\w*__control_left/, true),
                                                _sliderControlRight = _mainElement.querySelector(/\w*__control_right/, true),
                                          	....
                                          
                                          Тут повнимательней, получить элементы можно Родитель-дочерний(е), но не Предок-Родитель-дочерний.
                                          	_sliderItems = _sliderWrapper.querySelectorAll(/\w*__item/, true),
                                          
                                          1. SinGlEBW
                                            08 января 2021, 01:37
                                            До конца не проверил. Если обычная строка попадает в метод querySelector
                                            то она зацикликся.
                                            Методы всё же лучше назвать по другому. Например
                                            Element.prototype.с_querySelector
                                            Element.prototype.с_querySelectorAll
                                            
                                          2. Тимофей
                                            21 декабря 2020, 13:07
                                            Привет, вопрос не по теме. У вас не нашел ответа. Подскажите по input type=range. Сам код выложил по адресу range.cmstext.ru Вроде всё работает.
                                            1. Проблема в том, что не всегда срабатывает onmouseover адекватно. т.е. при нажитии мышкой на левый срабатывает правый так как они в абсолюте лежат в одном z-index как победить это проблему? помогите
                                            2. Как заставить javascript обрабатывать значения ползунков чтобы они не пересекались. Пробовал проверять значение не получается. Помогите
                                            Заранее спасибо. Вы бог
                                            1. Тимофей
                                              13 декабря 2020, 06:00
                                              Александр здравствуйте, спасибо за ваш труд. Очень интересно и полезно. Хочу использовать Ваш слайдер, посмотрел все примеры но не нашел как изменить количество активных (отображаемых) блоков при использовании нескольких слайдеров на странице по ID. Например у слайдера #slider1 по 5 блоков, у #slider2 3 блока. Спасибо Вам заранее. Очень рад, что нашел эту страницу.
                                              1. Александр Мальцев
                                                13 декабря 2020, 13:50
                                                Привет! Спасибо за отзыв. Это делается с помощью CSS:
                                                /* по 5 блоков */
                                                #slider1 .slider__item {
                                                  flex: 0 0 20%;
                                                  max-width: 20%;
                                                }
                                                /* по 3 блока */
                                                #slider2 .slider__item {
                                                  flex: 0 0 33.3333333333%;
                                                  max-width: 33.3333333333%;
                                                }
                                                
                                              2. Сергей
                                                12 декабря 2020, 23:41
                                                Здравствуйте. Отличный лаконичный слайдер, и главное, спасибо за подробную «документацию».
                                                Прочитав комментарии я понял, что
                                                /* Без изменения кода слайдера инициализировать все слайдеры на странице можно так: */
                                                document.querySelectorAll('.slider').forEach(function (item, index) {
                                                item.setAttribute('slider-id', index);
                                                multiItemSlider('[slider-id="' + index + '"]');
                                                });

                                                Или нужно инициализировать каждый слайдер таким образом:
                                                var slider = multiItemSlider('#product-slider', {
                                                isCycling: false, // автоматическая смена слайдов

                                                });

                                                У меня вопрос: как «совместить» эти способы. Т.е. в большинстве мест проекта хочется автоматически инициализировать слайдеры. Однако, есть страницы или элементы, где нужно настроить — время зацикливания или отсутствие зацикливания, например. Убрать элементы управления можно с помощью css. Но как можно автоматически инициализировать все слайдеры, при этом, программировать настройки нужных?
                                                1. Александр Мальцев
                                                  13 декабря 2020, 14:28
                                                  Здравствуйте. Версия слайдера с возможностью его настройки посредством параметров сейчас находится в разработке.
                                                  В данный момент пока планирую реализовать следующие параметры:
                                                  {
                                                    infinite: infinite, // будет определять с зацикливанием или без зацикливания
                                                    autoplay: autoplay, // будет включать автоматическую смену слайдов
                                                    autoplaySpeed: autoplaySpeed, // устанавливает время между автоматической сменой слайдов
                                                  }
                                                  
                                                  Если нужны ещё какие-то параметры для настройки, то напишите.
                                                2. Александр
                                                  04 декабря 2020, 20:49
                                                  Доброго времени суток, спасибо за предоставленную идею со слайдером, все отлично, за исключением одного нюанса. У меня 3 слайда, при ширине больше 1024px отображаются все три, с этим проблем нет.
                                                  При разрешении меньше 1024px нужно, чтобы оставался один слайд и они листались с помощью стрелочек, тут тоже проблем нет, однако слайды начинаются не с первого, а со второго, который ставится первым, затем второй (который должен быть третьим), а после него идет пустой слайд =(
                                                  Причем прокрутить назад с первого слайда я не могу, хотя по сути он вторым должен быть.
                                                  в js ничего не менял, менял только стили для стрелочек.
                                                  вот html: itchief.ru/assets/uploadify/4/4/6/44635217d677050eda4b318355f664ba.png
                                                  Если можно решить эту проблему, то буду очень признателен, такое ощущение, что в массив со слайдами слайды пушатся как-то неверно((
                                                  Вот пустой слайд: itchief.ru/assets/uploadify/4/e/5/4e54621a0b7cd6b9941040c393e2a8a2.png
                                                  Должно быть так, только с другой картинкой и текстом соответственно: itchief.ru/assets/uploadify/8/6/0/8607820a94db91ea200dbc4883cd7ec7.png
                                                  1. Александр Мальцев
                                                    05 декабря 2020, 13:52
                                                    Привет! Сделайте пример на «codepen.io» или в другой песочнице, по картинкам трудновато что-то дельное подсказать.
                                                    1. Александр
                                                      07 декабря 2020, 02:03
                                                      Думаю так будет даже лучше и проще: trifle22.github.io/slider-test/
                                                      Если открывать с мобильного устройства, так слайдер вообще не работает, и начинает работать только после перезагрузки страницы =((
                                                  2. Kolya
                                                    28 ноября 2020, 12:37
                                                    Здравстуйте, огромное спасибо за слайдер, а можно как-то переключать сразу 3-4 слайда?
                                                    1. Александр Мальцев
                                                      05 декабря 2020, 14:33
                                                      Здравствуйте! Посмотрите ответ в этом комментарии.
                                                      1. Александр
                                                        04 декабря 2020, 20:55
                                                        Думаю да, надо бы только скрипт подправить, где функции переключения прописаны, но чего-то конкретного сказать не могу ((
                                                      2. Фёдор Васькин
                                                        23 ноября 2020, 12:37
                                                        Здравствуйте, Александр! Использую Ваш слайдер в учебных целях. Если я добавляю скрипт и стили в htm файле, то слайдер работает отлично. Если стили подключаю отдельным файлом, то тоже отлично. А если переношу код js в отдельный файл и подключаю скрипт, то при на нажатии на стрелку прокрутки меня почему-то перебрасывает на начало странице, и картинка не прокручивается. Подскажите, пожалуйста, в чём может быть причина и как её можно исправить?
                                                        1. Фёдор Васькин
                                                          25 ноября 2020, 10:18
                                                          Разобрался, всё получилось.
                                                          1. Анна Бондаренко
                                                            11 декабря 2020, 15:51
                                                            Добрый день. Подскажите, каким было решение…
                                                            1. Александр Мальцев
                                                              25 ноября 2020, 15:08
                                                              Отлично!
                                                          2. Isa
                                                            19 ноября 2020, 17:16
                                                            У меня с этим слайдером проблемы, при подключении css меняется отображение сайта полностью, и плюс слайдер не работает, при нажатии на стрелки картинки не листает
                                                            1. Александр Мальцев
                                                              21 ноября 2020, 12:50
                                                              Скорее всего у вас конфликт со стилями и скриптами вашего сайта.
                                                            2. Isa
                                                              19 ноября 2020, 15:35
                                                              Здравствуйте Александр, я воспользовался вашим сладером, у меня возник такая сетуция, у меня выводятся пару картинок вернее их 5штук выводятся из бд, для каждой картинки указана ссылка в виде
                                                              <? if(!empty($item->iconurl)) '<div class="items-ico"> echo <img src="' . $item->iconurl . '"></div>';?>
                                                              <? if(!empty($item->iconurl2)) '<div class="items-ico"> echo <img src="' . $item->iconurl2 . '"></div>';?>
                                                              
                                                              как мне пристроить к ним ваш слайдер? Стуле и жава прикрепил через отделеные страницы. Но вот их выводом затруднительно. Подскажите пожалуйста как мне все правильно сделать, чтоб эти картинки как у вас на слайдере можно было листать
                                                              1. Александр Мальцев
                                                                19 ноября 2020, 16:45
                                                                Здравствуйте! Такое в php обычно выводят циклом (через foreach).
                                                              2. Алексей Валерьевич Алексеев
                                                                08 ноября 2020, 14:39
                                                                Спасибо Вам за Вашу работу очень хорошее решение!
                                                                Хотел бы спросить есть ли возможность у слайдера перемещаться к конкретному слайду отдельно. Я хочу немного доработать его под свои задачи и сделать мини превью каждого слайда при нажатии на которые происходит переход к нужной картинке по принципу работы индикаторов.

                                                                Заранее благодарен!
                                                                1. Александр Мальцев
                                                                  12 ноября 2020, 15:30
                                                                  Пожалуйста!
                                                                  Такой стандартной возможности нет, но это просто решается (пример).
                                                                2. Kitsu-NeshKaa
                                                                  04 ноября 2020, 16:53
                                                                  Александр, доброго времени суток! Начал использовать ваш слайдер — полет отличный! Вопрос встал когда решил сам его допиливать. Дал всем блокам в слайдере ID и хочу их скрывать в зависимости от того на какой странице находится пользователь. Например блок 5.
                                                                  window.onload = function() {
                                                                  document.getElementById('5').style.display = «none»;
                                                                  }
                                                                  Скрытие происходит, но сами слайды не схлопываются и остается пустое место от скрытого слайда. Как их схлопнуть?
                                                                  1. Александр Мальцев
                                                                    05 ноября 2020, 14:51
                                                                    Привет!
                                                                    Для этого нужно в скрипте изменить одну строчку:
                                                                    // замените эту
                                                                    _sliderItems = _mainElement.querySelectorAll('.slider__item'),
                                                                    // на следующую
                                                                    _sliderItems = _mainElement.querySelectorAll('.slider__item:not([style*="display: none;"])'),
                                                                    
                                                                    1. Kitsu-NeshKaa
                                                                      05 ноября 2020, 15:05
                                                                      Спасибо за ответ. Блок исчезает но теперь остается пустое место в конце слайдера =(
                                                                      1. Kitsu-NeshKaa
                                                                        05 ноября 2020, 15:28
                                                                        Причем если засунуть в not и в блок класс — то срабатывает
                                                                        1. Kitsu-NeshKaa
                                                                          05 ноября 2020, 17:19
                                                                          Нашел ответ — window.onload слишком поздно срабатывает. Делайте инициализацию слайдера после того как дали класс или скрыли блок слайдера. Александр спасибо!
                                                                          1. Александр Мальцев
                                                                            06 ноября 2020, 11:14
                                                                            Пожалуйста!
                                                                            1. Kitsu-NeshKaa
                                                                              06 ноября 2020, 15:58
                                                                              Еще вопрос появился: что нужно добавить при тач-скролинге что бы не листалась вверх-вниз страница?
                                                                              1. Александр Мальцев
                                                                                12 ноября 2020, 15:42
                                                                                Для этого нужно просто отменить стандартное поведение браузера в обработчике этого события (пример):
                                                                                _mainElement.addEventListener('touchstart', function (e) {
                                                                                  e.preventDefault();
                                                                                  //...
                                                                                });
                                                                                _mainElement.addEventListener('touchend', function (e) {
                                                                                  e.preventDefault();
                                                                                  //...
                                                                                });
                                                                                
                                                                                1. Kitsu-NeshKaa
                                                                                  12 ноября 2020, 17:00
                                                                                  не совсем то. Свайпы должны работать по вертикали а по горизонтали страница не должна прокручиваться =)
                                                                                  1. Александр Мальцев
                                                                                    13 ноября 2020, 14:46
                                                                                    Пример со свайпом по вертикали (открыть).
                                                                  2. Andrey
                                                                    16 октября 2020, 15:09
                                                                    Доброго времени суток! Подскажите, пожалуйста, как решить проблему. Данный слайдер установлен на CMS Drupal. Он выводит блоки в представлении. В кастомном скрипте прописано количество выводимых блоков — 4.
                                                                    Drupal.behaviors.Carousel = {
                                                                      attach: function (context, settings) {
                                                                        $('.responsive').slick({
                                                                          dots: true,
                                                                          infinite: false,
                                                                          speed: 300,
                                                                          slidesToShow: 4,
                                                                          slidesToScroll: 4,
                                                                          responsive: [{
                                                                            breakpoint: 768,
                                                                            settings: {
                                                                              slidesToShow: 2,
                                                                              slidesToScroll: 2
                                                                            }
                                                                          },
                                                                          {
                                                                            breakpoint: 480,
                                                                            settings: {
                                                                              slidesToShow: 1,
                                                                              slidesToScroll: 1
                                                                            }
                                                                          }]
                                                                        });
                                                                      }
                                                                    };
                                                                    
                                                                    Но проблема возникла на страницах, где количество блоков меньше 4. Не просчитывается ширина и слайды неверного размера получаются.
                                                                    Подскажите, пожалуйста, как лучше выйти в данной ситуации? Делать условие на проверку количества выводимых блоков и задавать им ширину от этого или изначально принудительно задать ширину слайда?
                                                                    1. Александр Мальцев
                                                                      17 октября 2020, 16:03
                                                                      Здравствуйте! Можно проверять количество блоков, и формировать вызов функции slick уже в зависимости от их количества.
                                                                    2. kadochnikov_k
                                                                      15 октября 2020, 14:40
                                                                      Добрый день! Спасибо за ваш слайдер, не перестаю восхищаться его универсальностью! В одном из проектов возникла потребность сделать вертикальный слайдер с листанием слайдов скроллом или свайпом экрана, когда слайдер занимает весь экран. Я сделал вертикальную смену слайдов, но не могу придумать как привязаться к прокрутке колеса мыши и свайпу экрана для перелистывания. Код прикрепляю, буду благодарен, если сможете помочь.
                                                                      'use strict';
                                                                      var multiItemSlider = (function () {
                                                                      
                                                                          function _isElementVisible(element) {
                                                                              var
                                                                                  rect = element.getBoundingClientRect(),
                                                                                  windowHeight = (window.innerHeight || document.documentElement.clientHeight),
                                                                                  windowWidth = (window.innerWidth || document.documentElement.clientWidth),
                                                                                  vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0),
                                                                                  horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
                                                                              return (vertInView && horInView);
                                                                          }
                                                                      
                                                                          return function (selector, config) {
                                                                              var
                                                                                  _mainElement = document.querySelector(selector),
                                                                                  _sliderWrapper = _mainElement.querySelector('.slider__wrapper'),
                                                                                  _sliderItems = _mainElement.querySelectorAll('.slider__item'),
                                                                                  _sliderControls = _mainElement.querySelectorAll('.slider__control'),
                                                                                  _sliderControlLeft = _mainElement.querySelector('.slider__control_left'),
                                                                                  _sliderControlRight = _mainElement.querySelector('.slider__control_right'),
                                                                                  _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width),
                                                                                  _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width),
                                                                                  _wrapperHeight = parseFloat(getComputedStyle(_sliderWrapper).height),
                                                                                  _itemHeight = parseFloat(getComputedStyle(_sliderItems[0]).height),
                                                                                  _html = _mainElement.innerHTML,
                                                                                  _indexIndicator = 0,
                                                                                  _maxIndexIndicator = _sliderItems.length - 1,
                                                                                  _indicatorItems,
                                                                                  _positionLeftItem = 0,
                                                                                  _transform = 0,
                                                                                  _step = _itemWidth / _wrapperWidth * 100,
                                                                                  _stepHeight = _itemHeight / _wrapperHeight * 100,
                                                                                  _items = [],
                                                                                  _interval = 0,
                                                                                  _states = [
                                                                                      { active: false, minWidth: 0, count: 1 },
                                                                                      { active: false, minWidth: 576, count: 2 },
                                                                                      { active: false, minWidth: 992, count: 3 },
                                                                                      { active: false, minWidth: 1200, count: 4 },
                                                                                  ],
                                                                                  _config = {
                                                                                      isCycling: false,
                                                                                      direction: 'right',
                                                                                      interval: 10000,
                                                                                      pause: true
                                                                                  };
                                                                      
                                                                              for (var key in config) {
                                                                                  if (key in _config) {
                                                                                      _config[key] = config[key];
                                                                                  }
                                                                              }
                                                                      
                                                                              _sliderItems.forEach(function (item, index) {
                                                                                  _items.push({ item: item, position: index, transform: 0 });
                                                                              });
                                                                      
                                                                              var _setActive = function () {
                                                                                  var _index = 0;
                                                                                  var width = parseFloat(document.body.clientWidth);
                                                                                  _states.forEach(function (item, index, arr) {
                                                                                      _states[index].active = false;
                                                                                      if (width >= _states[index].minWidth)
                                                                                          _index = index;
                                                                                  });
                                                                                  _states[_index].active = true;
                                                                              }
                                                                      
                                                                              var _getActive = function () {
                                                                                  var _index;
                                                                                  _states.forEach(function (item, index, arr) {
                                                                                      if (_states[index].active) {
                                                                                          _index = index;
                                                                                      }
                                                                                  });
                                                                                  return _index;
                                                                              }
                                                                      
                                                                              var position = {
                                                                                  getMin: 0,
                                                                                  getMax: _items.length - 1,
                                                                              }
                                                                      
                                                                              var _transformItem = function (direction) {
                                                                                  var nextItem, currentIndicator = _indexIndicator;
                                                                                  if (!_isElementVisible(_mainElement)) {
                                                                                      return;
                                                                                  }
                                                                                  if (direction === 'right') {
                                                                                      if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
                                                                                          return;
                                                                                      }
                                                                                      _positionLeftItem++;
                                                                                      _transform -= _stepHeight;
                                                                                      _indexIndicator = _indexIndicator + 1;
                                                                                      if (_indexIndicator > _maxIndexIndicator) {
                                                                                          _indexIndicator = 0;
                                                                                      }
                                                                                  }
                                                                                  if (direction === 'left') {
                                                                                      if (_positionLeftItem <= position.getMin) {
                                                                                          return;
                                                                                      }
                                                                                      _positionLeftItem--;
                                                                                      _transform += _stepHeight;
                                                                                      _indexIndicator = _indexIndicator - 1;
                                                                                      if (_indexIndicator < 0) {
                                                                                          _indexIndicator = _maxIndexIndicator;
                                                                                      }
                                                                                  }
                                                                                  _sliderWrapper.style.transform = 'translateY(' + _transform + '%)';
                                                                                  _indicatorItems[currentIndicator].classList.remove('active');
                                                                                  _indicatorItems[_indexIndicator].classList.add('active');
                                                                              }
                                                                      
                                                                              var _slideTo = function (to) {
                                                                                  var i = 0, direction = (to > _indexIndicator) ? 'right' : 'left';
                                                                                  while (to !== _indexIndicator && i <= _maxIndexIndicator) {
                                                                                      _transformItem(direction);
                                                                                      i++;
                                                                                  }
                                                                              }
                                                                      
                                                                              var _cycle = function (direction) {
                                                                                  if (!_config.isCycling) {
                                                                                      return;
                                                                                  }
                                                                                  _interval = setInterval(function () {
                                                                                      _transformItem(direction);
                                                                                  }, _config.interval);
                                                                              }
                                                                      
                                                                              var _controlClick = function (e) {
                                                                                  if (e.target.classList.contains('slider__control')) {
                                                                                      e.preventDefault();
                                                                                      var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                                                                                      _transformItem(direction);
                                                                                      clearInterval(_interval);
                                                                                      _cycle(_config.direction);
                                                                                  }
                                                                                  if (e.target.getAttribute('data-slide-to')) {
                                                                                      _slideTo(parseInt(e.target.getAttribute('data-slide-to')));
                                                                                      clearInterval(_interval);
                                                                                      _cycle(_config.direction);
                                                                                  }
                                                                              };
                                                                      
                                                                              var _handleVisibilityChange = function () {
                                                                                  if (document.visibilityState === "hidden") {
                                                                                      clearInterval(_interval);
                                                                                  } else {
                                                                                      clearInterval(_interval);
                                                                                      _cycle(_config.direction);
                                                                                  }
                                                                              }
                                                                      
                                                                              var _refresh = function () {
                                                                                  clearInterval(_interval);
                                                                                  _mainElement.innerHTML = _html;
                                                                                  _sliderWrapper = _mainElement.querySelector('.slider__wrapper');
                                                                                  _sliderItems = _mainElement.querySelectorAll('.slider__item');
                                                                                  _sliderControls = _mainElement.querySelectorAll('.slider__control');
                                                                                  _sliderControlLeft = _mainElement.querySelector('.slider__control_left');
                                                                                  _sliderControlRight = _mainElement.querySelector('.slider__control_right');
                                                                                  _wrapperHeight = parseFloat(getComputedStyle(_sliderWrapper).height);
                                                                                  _itemHeight = parseFloat(getComputedStyle(_sliderItems[0]).height);
                                                                                  _positionLeftItem = 0;
                                                                                  _transform = 0;
                                                                                  _indexIndicator = 0;
                                                                                  _maxIndexIndicator = _sliderItems.length - 1;
                                                                                  _step = _itemWidth / _wrapperWidth * 100;
                                                                                  _stepHeight = _itemHeight / _wrapperHeight * 100;
                                                                                  _items = [];
                                                                                  _sliderItems.forEach(function (item, index) {
                                                                                      _items.push({ item: item, position: index, transform: 0 });
                                                                                  });
                                                                                  _addIndicators();
                                                                              }
                                                                      
                                                                              var _setUpListeners = function () {
                                                                                  _mainElement.addEventListener('click', _controlClick);
                                                                                  if (_config.pause && _config.isCycling) {
                                                                                      _mainElement.addEventListener('mouseenter', function () {
                                                                                          clearInterval(_interval);
                                                                                      });
                                                                                      _mainElement.addEventListener('mouseleave', function () {
                                                                                          clearInterval(_interval);
                                                                                          _cycle(_config.direction);
                                                                                      });
                                                                                  }
                                                                      
                                                                                  document.addEventListener('visibilitychange', _handleVisibilityChange, false);
                                                                                  window.addEventListener('resize', function () {
                                                                                      var
                                                                                          _index = 0,
                                                                                          width = parseFloat(document.body.clientWidth);
                                                                                      _states.forEach(function (item, index, arr) {
                                                                                          if (width >= _states[index].minWidth)
                                                                                              _index = index;
                                                                                      });
                                                                                      if (_index !== _getActive()) {
                                                                                          _setActive();
                                                                                          _refresh();
                                                                                      }
                                                                                  });
                                                                              }
                                                                      
                                                                              var _addIndicators = function () {
                                                                                  var sliderIndicators = document.createElement('ol');
                                                                                  sliderIndicators.classList.add('slider__indicators');
                                                                                  for (var i = 0; i < _sliderItems.length; i++) {
                                                                                      var sliderIndicatorsItem = document.createElement('li');
                                                                                      if (i === 0) {
                                                                                          sliderIndicatorsItem.classList.add('active');
                                                                                      }
                                                                                      sliderIndicatorsItem.setAttribute("data-slide-to", i);
                                                                                      sliderIndicators.appendChild(sliderIndicatorsItem);
                                                                                  }
                                                                                  _mainElement.appendChild(sliderIndicators);
                                                                                  _indicatorItems = _mainElement.querySelectorAll('.slider__indicators > li')
                                                                              }
                                                                      
                                                                              // добавляем индикаторы
                                                                              _addIndicators();
                                                                              // инициализация
                                                                              _setUpListeners();
                                                                      
                                                                              if (document.visibilityState === "visible") {
                                                                                  _cycle(_config.direction);
                                                                              }
                                                                              _setActive();
                                                                      
                                                                              return {
                                                                                  right: function () {
                                                                                      _transformItem('right');
                                                                                  },
                                                                                  left: function () {
                                                                                      _transformItem('left');
                                                                                  },
                                                                                  stop: function () {
                                                                                      _config.isCycling = false;
                                                                                      clearInterval(_interval);
                                                                                  },
                                                                                  cycle: function () {
                                                                                      _config.isCycling = true;
                                                                                      clearInterval(_interval);
                                                                                      _cycle();
                                                                                  }
                                                                              }
                                                                      
                                                                          }
                                                                      }());
                                                                      
                                                                      document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                          item.setAttribute('data-slider-id', index);
                                                                          var sliderSelector = '[data-slider-id="' + index + '"]';
                                                                          var sliderElem = document.querySelector(sliderSelector);
                                                                          // если слайдов в слайдере нет, то завершаем текущую работу функции
                                                                          if (sliderElem.querySelectorAll('.slider__item').length === 0) {
                                                                              return;
                                                                          }
                                                                          if (
                                                                              sliderElem.querySelector('.slider__item').getBoundingClientRect().width *
                                                                              sliderElem.querySelectorAll('.slider__item').length >
                                                                              sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width
                                                                          ) {
                                                                              multiItemSlider('[data-slider-id="' + index + '"]', {
                                                                                  isCycling: true,
                                                                              });
                                                                          } else {
                                                                              var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                              for (var i = 0; i < sliderControls.length; i++) {
                                                                                  sliderControls[i].style.display = 'none';
                                                                              }
                                                                          }
                                                                      });
                                                                      
                                                                      1. Александр Мальцев
                                                                        18 октября 2020, 14:13
                                                                        Здравствуйте! Спасибо за отзыв!
                                                                        Пример решения:
                                                                        'use strict';
                                                                        // 1. Добавляем функцию
                                                                        const isTouchDevice = function () {
                                                                          return !!('ontouchstart' in window || navigator.maxTouchPoints);
                                                                        };
                                                                        var multiItemSlider = (function () {...}());
                                                                        document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                          // ...
                                                                          // 2. Сохраняем инстанс слайдера в константу slider
                                                                          const slider = multiItemSlider('[data-slider-id="' + index + '"]', {
                                                                            isCycling: true,
                                                                          });
                                                                          // 3. Добавляем код
                                                                          (function (slider, selector) {
                                                                              let startY = 0;
                                                                              const $slider = document.querySelector(selector);
                                                                              if (isTouchDevice()) {
                                                                                $slider.addEventListener('touchstart', function (e) {
                                                                                  startY = e.changedTouches[0].clientY;
                                                                                });
                                                                                $slider.addEventListener('touchend', function (e) {
                                                                                  const endY = e.changedTouches[0].clientY;
                                                                                  const deltaY = startY - endY;
                                                                                  if (deltaY > 50) {
                                                                                    slider.left();
                                                                                  } else if (deltaY < -50) {
                                                                                    slider.right();
                                                                                  }
                                                                                });
                                                                              } else {
                                                                                $slider.addEventListener('mousedown', function (e) {
                                                                                  startY = e.clientY;
                                                                                });
                                                                                $slider.addEventListener('mouseup', function (e) {
                                                                                  const endY = e.clientY;
                                                                                  const deltaY = startY - endY;
                                                                                  if (deltaY > 50) {
                                                                                    slider.left();
                                                                                  } else if (deltaY < -50) {
                                                                                    slider.right();
                                                                                  }
                                                                                });
                                                                              }
                                                                              let a = true;
                                                                              $slider.addEventListener('wheel', function (e) {
                                                                                e.preventDefault();
                                                                                if (a === false) {
                                                                                  return;
                                                                                }
                                                                                const delta = e.deltaY;
                                                                                console.log(delta);
                                                                                if (delta > 0) {
                                                                                  slider.right();
                                                                                  a = false;
                                                                                } else {
                                                                                  slider.left();
                                                                                  a = false;
                                                                                }
                                                                                window.setTimeout(() => {
                                                                                  a = true;
                                                                                }, 300);
                                                                              })
                                                                            })(slider, '[data-slider-id="' + index + '"]');
                                                                          } else {
                                                                          // ...
                                                                        });
                                                                        
                                                                      2. SinGlEBW
                                                                        14 октября 2020, 04:21
                                                                        Хотя вот что, при использовании _itemWidth / _wrapperWidth и добавление border блоку wraper будем при каждом слайде всё больше и больше видеть кусок предыдущего слайда. Придётся в slider_item
                                                                        добавлять flex: 0 0 calc(100% + (2 * бордер_wrapper));

                                                                        Код предыдущего поста без такой беды. Вот css, почти не пострадал.
                                                                        *,
                                                                        ::after,
                                                                        ::before {
                                                                          box-sizing: border-box;
                                                                        }
                                                                        
                                                                        :root {}
                                                                        
                                                                        body {
                                                                          margin: 0;
                                                                          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                                                                          color: #fff;
                                                                        }
                                                                        
                                                                        .container1 {
                                                                          max-width: 1200px;
                                                                          margin: 0 auto;
                                                                          border: 1px solid #000;
                                                                        }
                                                                        
                                                                        .slider1 {
                                                                          position: relative;
                                                                        }
                                                                        
                                                                        .slider__wrapper1 {
                                                                          display: flex;
                                                                          overflow: hidden;
                                                                        }
                                                                        
                                                                        .slider__item1 {
                                                                         flex: 0 0 100%;
                                                                         transition: transform 0.6s ease;
                                                                        }
                                                                        
                                                                        .slider__content1 {
                                                                          height: 250px;
                                                                          font-size: 100px;
                                                                          padding: 55px 5%;
                                                                          text-align: center;
                                                                        }
                                                                        
                                                                        .el1 {
                                                                          background-color: orange;
                                                                        }
                                                                        
                                                                        .el2 {
                                                                          background-color: green;
                                                                        }
                                                                        
                                                                        .el3 {
                                                                          background-color: violet;
                                                                        }
                                                                        
                                                                        .el4 {
                                                                          background-color: coral;
                                                                        }
                                                                        
                                                                        .slider__btn1 {
                                                                          width: 50px;
                                                                          height: 60px;
                                                                        
                                                                          display: none;
                                                                          position: absolute;
                                                                          z-index: 100;
                                                                          top: 50%;
                                                                          transform: translateY(-50%);
                                                                          transition: all .2s ease-in;
                                                                          border: 2px solid darkorchid;
                                                                        }
                                                                        .slider__btn--show1{
                                                                          display: block;
                                                                        }
                                                                        
                                                                        .slider__btn--left1 {
                                                                          left: 0px;
                                                                        }
                                                                        
                                                                        .slider__btn--right1 {
                                                                          right: 0px;
                                                                        }
                                                                        
                                                                        .slider__btn--right1:hover {
                                                                          background-color: crimson;
                                                                        }
                                                                        
                                                                        .slider__btn1::before {
                                                                          content: '';
                                                                          width: 20px;
                                                                          height: 20px;
                                                                          display: block;
                                                                          position: relative;
                                                                          top: 50%;
                                                                          left: 50%;
                                                                          border-top: 1px solid #000;
                                                                          border-left: 1px solid #000;
                                                                        }
                                                                        
                                                                        .slider__btn--left1::before {
                                                                          transform: translate(-25%, -50%) rotate(-45deg);
                                                                        }
                                                                        
                                                                        .slider__btn--right1::before {
                                                                          transform: translate(-75%, -50%) rotate(-225deg);
                                                                        }
                                                                        
                                                                        
                                                                        1. SinGlEBW
                                                                          14 октября 2020, 03:35
                                                                          Извините простите но не смог удержаться, даже зарегался. Изучая ваш материал я не понял зачем усложнять код. Посидев и потыкав, уменьшил его в 2е. Хотя JS мне изучать и изучать. Мне интересны тонкости и выслушать опыт, зачем и почему. Создавать функцию в файле понятно, локальная область, но зачем пару строк оборачивать тоже в функцию?

                                                                          function directedSlider (selector) {
                                                                            let
                                                                              mainElement = document.querySelector(selector),// основный элемент блока. Нужно это что бы поиск был от него, а не где-то на сайте 
                                                                              sliderItemAll = mainElement.querySelectorAll('.slider__item1'),
                                                                              sliderBtnLeft = mainElement.querySelector('.slider__btn--left1'), // кнопка "LEFT"
                                                                              sliderBtnRight = mainElement.querySelector('.slider__btn--right1'), // кнопка "RIGHT"
                                                                              positionItem = 0;
                                                                          
                                                                            //Этап 1
                                                                            [sliderBtnLeft, sliderBtnRight].forEach((item) => item.addEventListener('click', btnStep))
                                                                            //Этап 2
                                                                            function btnStep(e){
                                                                            
                                                                              if(e.target === sliderBtnRight){
                                                                              
                                                                                if(!sliderBtnLeft.classList.contains('slider__btn--show1'))
                                                                                sliderBtnLeft.classList.add('slider__btn--show1')
                                                                               
                                                                                if(positionItem < sliderItemAll.length - 1){
                                                                                  positionItem++
                                                                                }
                                                                                if(positionItem >= sliderItemAll.length - 1){
                                                                                  sliderBtnRight.classList.remove('slider__btn--show1')
                                                                                }
                                                                              }
                                                                              
                                                                              if(e.target === sliderBtnLeft){
                                                                                if(!sliderBtnRight.classList.contains('slider__btn--show1'))
                                                                                  sliderBtnRight.classList.add('slider__btn--show1')
                                                                             
                                                                                if(positionItem > 0){
                                                                                  positionItem--
                                                                                }
                                                                                if(positionItem === 0){
                                                                                  sliderBtnLeft.classList.remove('slider__btn--show1')
                                                                                }
                                                                              }
                                                                          
                                                                              sliderItemAll.forEach((item, index) => item.style.transform = `translate(${-100 * positionItem}%)`)  
                                                                                
                                                                            }
                                                                          }
                                                                          
                                                                          directedSlider('.slider1')
                                                                          


                                                                          1. Получил обе кнопки по отдельности и так же их массив. Зачем массив если можно так: [left, Right].forEach()
                                                                          2. Упаковывать в отдельную функцию цикл раздачи события элементам. Зачем, плодить функции и усложнять код? Где именно такой подход хоть раз себя оправдал?
                                                                          3. Последовательность взаимодействия с элементами должна описываться в коде в той же последовательности.
                                                                          Событие вызывает функцию, так значит не нужно где-то в недрах кода это событие присваивать, а перед ним писать
                                                                          функционал.
                                                                          4. При событии зачем обращаться снова к элементу через класс, если уже достали этот элемент изначально. Так правильно: e.target === sliderBtnRight
                                                                          5. Требуется пояснительная бригада для формулы _itemWidth / _wrapperWidth

                                                                          Выполняя расчёт _itemWidth / _wrapperWidth мы постоянно встречаемся с 0. В чём соль?
                                                                          1. Александр Мальцев
                                                                            14 октября 2020, 13:46
                                                                            Код JavaScript изначально создавался так, чтобы обеспечить работу слайдера именно в режиме зацикливания, а также чтобы он функционировал в устаревших браузерах. После этого он уже дорабатывался для слайдера без зацикливания. Поэтому он, конечно, не оптимизирован конкретно для этой ситуации, да и не вижу в этом смысл. Цель сделать код более универсальным для различных сценариев работы слайдера.

                                                                            А так ваше стремление сделать код более оптимальным (особенно с использованием новых возможностей языка) — это конечно хорошо. Но пока дальше двигать этот слайдер нет времени. Только комментариев под этой темой 290. Если у кого-то есть желание в этом развиваться, то я только буду рад этому. Можно создать для этой темы отдельный проект на Github (вынести его из how-to). Тем более это очень хорошая практика для изучения JavaScript. Можно будет делать всем вместе. Первая задача – это конечно объединить различные коды JavaScript слайдера в один и сделать его настройку для различных сценариев через параметры. Потом уже переходить к следующим этапам. Если будут желающие улучшать и оптимизировать, то напишите об этом. А если нет, то буду это делать сам, но позже.
                                                                          2. Anvar
                                                                            06 октября 2020, 00:40
                                                                            Здравствуйте

                                                                            Александр Мальцев.

                                                                            Вапрос!

                                                                            Из за чего слайдер прекращает прокрутку блоков?(картин с текстом)

                                                                            Если поменять

                                                                            .slider__wrapper {
                                                                              display: flex;
                                                                            
                                                                            
                                                                            .slider__item {
                                                                              flex: 0 0 100%;
                                                                            
                                                                            
                                                                            на

                                                                            .slider__item {
                                                                               display: grid;
                                                                            
                                                                            .slider__wrapper {
                                                                              display: grid;
                                                                              grid-template-columns: repeat(4,1fr);
                                                                            


                                                                            полный код

                                                                            
                                                                            
                                                                            .slider {
                                                                              display: grid;		
                                                                              position: relative;
                                                                              overflow: hidden;
                                                                            }
                                                                            
                                                                            
                                                                            .slider__wrapper {
                                                                              display: grid;
                                                                              grid-template-columns: repeat(4,1fr); 
                                                                              transition: transform 0.6s ease; 
                                                                            
                                                                            
                                                                            }
                                                                            .slider__item {
                                                                              display: grid; 
                                                                              max-width: 50%; 
                                                                            
                                                                            <s></s>
                                                                            
                                                                            


                                                                            Вапрос!

                                                                            Из за чего слайдер прекращает прокрутку блоков?

                                                                            Благодарю за внимание.

                                                                            Слайдер сделать на CSS Grid так как управлять блоками легче,
                                                                            можно добовлять убавлять блоки.
                                                                            grid-template-columns
                                                                            а также растягивать и сужать блоки
                                                                            grid-template-columns

                                                                            1. Александр Мальцев
                                                                              08 октября 2020, 15:37
                                                                              Здравствуйте! В этом случае нужно явно указывать ширину блокам в процентах.
                                                                              Например:
                                                                              .slider {
                                                                                display: grid;
                                                                                position: relative;
                                                                                overflow: hidden;
                                                                              }
                                                                              .slider__wrapper {
                                                                                display: grid;
                                                                                grid-template-columns: repeat(4, 50%);
                                                                                transition: transform 0.6s ease;
                                                                              }
                                                                              .slider__item {
                                                                                display: grid;
                                                                                max-width: 100%;
                                                                              }
                                                                              
                                                                            2. Ola
                                                                              04 октября 2020, 19:23
                                                                              Спасибо Вам Огромное Александр что Вы нам помогаете и делитесь с нами своими знаниями!
                                                                              Вы наш добрый Ангел!***))) Все работает! Как всегда полезный и обьяснен до мелочей чудо-урок!
                                                                              кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
                                                                              1. Александр Мальцев
                                                                                05 октября 2020, 07:38
                                                                                Спасибо за отзыв! Рад, что полезен.
                                                                              2. Ola
                                                                                04 октября 2020, 19:19
                                                                                Спасибо Вам Огромное Александр что Вы нам помогаете и делитесь с нами своими знаниями!
                                                                                Вы наш добрый Ангел!***))) Все работает!!! Как всегда полезный и обьяснен до мелочей чудо-урок!
                                                                                кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
                                                                                1. Artur Zavaziev
                                                                                  26 сентября 2020, 03:51
                                                                                  Здравствуйте! Спасибо большое за слайдер!

                                                                                  Я вывел его в шапке и в цикле для постов wordpress (как галерею каждого проекта), в итоге на странице получился основной слайдер в шапке, и слайдеры у каждого поста. Есть проблема в том, что не работает прокрутка слайдов при нажатии ctrl + F5 у слайдеров постов (работает только у слайдера в шапке), или иногда, когда заходишь на страницу впервые. Но стоит просто обновить и все работает, пока снова не завершишь сеанс надолго. В чем может быть проблема? Что-то с кэшем связано? Пробовал вставлять все коды, которые вы тут приводили на проверку наличия слайдов, не помогло. Помогите пожалуйста, заранее благодарю!!!
                                                                                  1. Александр Мальцев
                                                                                    26 сентября 2020, 14:22
                                                                                    Здравствуйте! Спасибо!
                                                                                    Попробуйте их инициализировать как показано в этом примере.
                                                                                    1. Artur Zavaziev
                                                                                      26 сентября 2020, 16:17
                                                                                      К сожалению, проблема не решилась, даже наоборот, слайдер в шапке тоже перестает работать. Очень хочется использовать ваш легкий и быстрый слайдер в проектах, только не знаю как решить эту проблему.

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

                                                                                      document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                                      item.setAttribute('data-slider-id', index);
                                                                                      var sliderSelector = '[data-slider-id="' + index + '"]';
                                                                                      var sliderElem = document.querySelector(sliderSelector);

                                                                                      if (sliderElem.querySelectorAll('.slider__item').length === 0) {
                                                                                      return;
                                                                                      }
                                                                                      if (
                                                                                      sliderElem.querySelector('.slider__item').getBoundingClientRect().width *
                                                                                      sliderElem.querySelectorAll('.slider__item').length >
                                                                                      sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width
                                                                                      ) {
                                                                                      multiItemSlider('[data-slider-id="' + index + '"]', {
                                                                                      isCycling: true,
                                                                                      });
                                                                                      } else {
                                                                                      var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                                      for (var i = 0; i < sliderControls.length; i++) {
                                                                                      sliderControls[i].style.display = 'none';
                                                                                      }
                                                                                      }
                                                                                      });

                                                                                      Что интересно, если оставить код в таком виде:
                                                                                      document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                                      item.setAttribute('data-slider-id', index);
                                                                                      multiItemSlider('[data-slider-id="' + index + '"]', {
                                                                                      isCycling: true,
                                                                                      });
                                                                                      });

                                                                                      То анимация dots'ов работает при любом раскладе, даже управляются при помощи стрелок слайдера, но картинки не меняются.
                                                                                      1. Александр Мальцев
                                                                                        27 сентября 2020, 04:52
                                                                                        Тут однозначно сложно подсказать, может какие-то другие JavaScript плагины, подключенные к странице, на это влияют. Так в коде, который вы привели, всё чётко.

                                                                                        Попробуйте убрать все другие js-скрипты и стили, подключенные к странице, и проверить будут ли работать слайдеры. Если будет всё работать отлично, то тогда нужно искать стили и скрипты, которые мешают работе слайдеров. Если это подтвердится, то тогда (если необходимы стили и скрипты, с которыми идёт конфликт) нужно менять название классов у элементов, а затем внести соответствующие изменения в CSS и JavaScript файлы слайдера (т.е. изменить одни имена классов на другие).
                                                                                  2. Алексей
                                                                                    24 сентября 2020, 18:41
                                                                                    Добрый день!

                                                                                    Установил на главную страницу сайта (new.avtoshkola.dp.ua) 4 слайдера. И возникли следующие проблемы:

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

                                                                                    Код скрипта:
                                                                                    'use strict';
                                                                                        var multiItemSlider = (function () {
                                                                                          return function (selector, config) {
                                                                                            var
                                                                                              _mainElement = document.querySelector(selector), // основный элемент блока
                                                                                              _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                                                                                              _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                                                                                              _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                                                                                              _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                                                                                              _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                                                                                              _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                                                                                              _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента    
                                                                                              _positionLeftItem = 0, // позиция левого активного элемента
                                                                                              _transform = 0, // значение транфсофрмации .slider_wrapper
                                                                                              _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
                                                                                              _items = []; // массив элементов
                                                                                    
                                                                                            // наполнение массива _items
                                                                                            _sliderItems.forEach(function (item, index) {
                                                                                              _items.push({ item: item, position: index, transform: 0 });
                                                                                            });
                                                                                    
                                                                                            var position = {
                                                                                              getItemMin: function () {
                                                                                                var indexItem = 0;
                                                                                                _items.forEach(function (item, index) {
                                                                                                  if (item.position < _items[indexItem].position) {
                                                                                                    indexItem = index;
                                                                                                  }
                                                                                                });
                                                                                                return indexItem;
                                                                                              },
                                                                                              getItemMax: function () {
                                                                                                var indexItem = 0;
                                                                                                _items.forEach(function (item, index) {
                                                                                                  if (item.position > _items[indexItem].position) {
                                                                                                    indexItem = index;
                                                                                                  }
                                                                                                });
                                                                                                return indexItem;
                                                                                              },
                                                                                              getMin: function () {
                                                                                                return _items[position.getItemMin()].position;
                                                                                              },
                                                                                              getMax: function () {
                                                                                                return _items[position.getItemMax()].position;
                                                                                              }
                                                                                            }
                                                                                    
                                                                                            var _transformItem = function (direction) {
                                                                                              var nextItem;
                                                                                              if (direction === 'right') {
                                                                                                _positionLeftItem++;
                                                                                                if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) {
                                                                                                  nextItem = position.getItemMin();
                                                                                                  _items[nextItem].position = position.getMax() + 1;
                                                                                                  _items[nextItem].transform += _items.length * 100;
                                                                                                  _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
                                                                                                }
                                                                                                _transform -= _step;
                                                                                              }
                                                                                              if (direction === 'left') {
                                                                                                _positionLeftItem--;
                                                                                                if (_positionLeftItem < position.getMin()) {
                                                                                                  nextItem = position.getItemMax();
                                                                                                  _items[nextItem].position = position.getMin() - 1;
                                                                                                  _items[nextItem].transform -= _items.length * 100;
                                                                                                  _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
                                                                                                }
                                                                                                _transform += _step;
                                                                                              }
                                                                                              _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
                                                                                            }
                                                                                    
                                                                                            // обработчик события click для кнопок "назад" и "вперед"
                                                                                            var _controlClick = function (e) {
                                                                                              if (e.target.classList.contains('slider__control')) {
                                                                                                e.preventDefault();
                                                                                                var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                                                                                                _transformItem(direction);
                                                                                              }
                                                                                            };
                                                                                    
                                                                                            var _setUpListeners = function () {
                                                                                              // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                                                                                              _sliderControls.forEach(function (item) {
                                                                                                item.addEventListener('click', _controlClick);
                                                                                              });
                                                                                            }
                                                                                    
                                                                                            // инициализация
                                                                                            _setUpListeners();
                                                                                    
                                                                                            return {
                                                                                              right: function () { // метод right
                                                                                                _transformItem('right');
                                                                                              },
                                                                                              left: function () { // метод left
                                                                                                _transformItem('left');
                                                                                              }
                                                                                            }
                                                                                    
                                                                                          }
                                                                                        }());
                                                                                    
                                                                                        var slider=multiItemSlider('.slider_cars',{});
                                                                                        var slider=multiItemSlider('.slider_reviews',{});
                                                                                        var slider=multiItemSlider('.slider_practice',{});
                                                                                        var slider=multiItemSlider('.slider_theory',{});
                                                                                    
                                                                                    Первая карусель (Блок на сайте Наша команда, вкладка практика):
                                                                                    <div class="slider slider_practice">
                                                                                        <div class="slider__wrapper">
                                                                                          	<div class="slider__item">
                                                                                            	<div class="team_element">
                                                                                    				<div class="team_image" style="background: url(/wp-content/themes/prospekt/img/maksim.jpg);"></div>
                                                                                    				<div class="team_name h5">Максим</div>
                                                                                    				<div class="person_car team_descr_1">
                                                                                    				    <div class="info_1">Транспортное средство:</div>
                                                                                    				    <div class="info_2">Nissan Leaf (Электро)</div>
                                                                                    				</div>
                                                                                    				<div class="person_exp team_descr_2">
                                                                                    				    <div class="info_1">Стаж вождения:</div>
                                                                                    				    <div class="info_2">14 лет</div>
                                                                                    				</div>
                                                                                    		    </div>
                                                                                          	</div>
                                                                                    
                                                                                          	...
                                                                                    
                                                                                    		<div class="slider__item">
                                                                                    		    <div class="team_element">
                                                                                    				<div class="team_image" style="background: url(/wp-content/themes/prospekt/img/ivan.jpg);"></div>
                                                                                    				<div class="team_name h5">Иван</div>
                                                                                    				<div class="person_car team_descr_1">
                                                                                    				    <div class="info_1">Транспортное средство:</div>
                                                                                    				    <div class="info_2">Chevrolet Aveo МКП</div>
                                                                                    				</div>
                                                                                    				<div class="person_exp team_descr_2">
                                                                                    				    <div class="info_1">Стаж вождения:</div>
                                                                                    				    <div class="info_2">15 лет</div>
                                                                                    				</div>
                                                                                    			</div>
                                                                                    		</div>
                                                                                    	</div>
                                                                                    	<a class="slider__control slider__control_left" href="javascript:void(0);" role="button"></a>
                                                                                        <a class="slider__control slider__control_right slider__control_show" href="javascript:void(0);" role="button"></a>
                                                                                    </div>
                                                                                    
                                                                                    Вторая карусель (Блок на сайте Наша команда, вкладка теория):
                                                                                    <div class="slider slider_theory">
                                                                                        <div class="slider__wrapper">
                                                                                          	<div class="slider__item">
                                                                                            	<div class="team_element">
                                                                                    				<div class="team_image" style="background: url(/wp-content/themes/prospekt/img/kristina_2.jpg);"></div>
                                                                                    				<div class="team_name h5">Кристина</div>
                                                                                    				<div class="team_descr_3">
                                                                                    				    <div class="info_1">Адрес:</div>
                                                                                    				    <div class="info_2">ул. Шевченка, 59</div>
                                                                                    				</div>
                                                                                    		    </div>
                                                                                          	</div>
                                                                                          						
                                                                                          	...
                                                                                    
                                                                                          	<div class="slider__item">
                                                                                            	<div class="team_element">
                                                                                    				<div class="team_image" style="background: url(/wp-content/themes/prospekt/img/marina.jpg);"></div>
                                                                                    				<div class="team_name h5">Марина</div>
                                                                                    				<div class="team_descr_3">
                                                                                    				    <div class="info_1">Адрес:</div>
                                                                                    				    <div class="info_2">ул. Шевченка, 56</div>
                                                                                    				</div>
                                                                                    		    </div>
                                                                                          	</div>
                                                                                        </div>
                                                                                        <a class="slider__control slider__control_left" href="javascript:void(0);" role="button"></a>
                                                                                        <a class="slider__control slider__control_right slider__control_show" href="javascript:void(0);" role="button"></a>
                                                                                    </div>
                                                                                    
                                                                                    Третья карусель (Блок на сайте Наши автомобили):
                                                                                    <div class="slider slider_cars">
                                                                                    	 <div class="slider__wrapper">
                                                                                    	     <div class="slider__item">
                                                                                    	        <div class="car_element">
                                                                                    				<div class="car_image" style="background: url(/wp-content/themes/prospekt/img/nissan.jpg);"></div>
                                                                                    				<div class="car_name h5">Nissan Leaf</div>
                                                                                    				<div class="car_descr_1">
                                                                                    					<div class="info_1">Коробка передач:</div>
                                                                                    					<div class="info_2">АКП/Автомат</div>
                                                                                    				</div>
                                                                                    				<div class="car_descr_2">
                                                                                    					<div class="info_1">Кондиционер:</div>
                                                                                    					<div class="info_2">Да</div>
                                                                                    				</div>
                                                                                    				<div class="car_descr_3">
                                                                                    					<div class="info_1">Тип авто:</div>
                                                                                    					<div class="info_2">Электромобиль</div>
                                                                                    				</div>
                                                                                    				<div class="car_descr_4">
                                                                                    					<div class="info_1">Усилитель руля:</div>
                                                                                    					<div class="info_2">Да</div>
                                                                                    				</div>
                                                                                    			</div>
                                                                                    	    </div>
                                                                                    	    
                                                                                    	    ...
                                                                                    
                                                                                    	    <div class="slider__item">
                                                                                    	        <div class="car_element">
                                                                                    				<div class="car_image" style="background: url(/wp-content/themes/prospekt/img/dacia.jpg);"></div>
                                                                                    				<div class="car_name h5">Dacia Sandero</div>
                                                                                    				<div class="car_descr_1">
                                                                                    					<div class="info_1">Коробка передач:</div>
                                                                                    					<div class="info_2">МКП/Механика</div>
                                                                                    				</div>
                                                                                    				<div class="car_descr_2">
                                                                                    					<div class="info_1">Кондиционер:</div>
                                                                                    					<div class="info_2">Да</div>
                                                                                    				</div>
                                                                                    				<div class="car_descr_3">
                                                                                    					<div class="info_1">Объем двигателя:</div>
                                                                                    					<div class="info_2">1.4</div>
                                                                                    				</div>
                                                                                    				<div class="car_descr_4">
                                                                                    					<div class="info_1">Усилитель руля:</div>
                                                                                    					<div class="info_2">Да</div>
                                                                                    				</div>
                                                                                    			</div>
                                                                                    	    </div>
                                                                                    	</div>
                                                                                    	<a class="slider__control slider__control_left" href="javascript:void(0);" role="button"></a>
                                                                                    	<a class="slider__control slider__control_right slider__control_show" href="javascript:void(0);" role="button"></a>
                                                                                    </div>
                                                                                    
                                                                                    Четвертая карусель (Блок на сайте Видео отзывы):
                                                                                    <div class="slider slider_reviews">
                                                                                    	<div class="slider__wrapper">
                                                                                    	    <div class="slider__item">
                                                                                    	        <div class="review_element">
                                                                                    				<iframe width="100%" src="https://www.youtube.com/embed/MohECwj06ww?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
                                                                                    			</div>
                                                                                    	    </div>
                                                                                    	    
                                                                                    	    ...
                                                                                    	      				
                                                                                    	     <div class="slider__item">
                                                                                    	        <div class="review_element">
                                                                                    				<iframe width="100%" src="https://www.youtube.com/embed/qoGkLCr-Kj4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
                                                                                    			</div>
                                                                                    	    </div>
                                                                                    	</div>
                                                                                    	<a class="slider__control slider__control_left" href="javascript:void(0);" role="button"></a>
                                                                                    	<a class="slider__control slider__control_right slider__control_show" href="javascript:void(0);" role="button"></a>
                                                                                    </div>
                                                                                    
                                                                                    Заранее спасибо
                                                                                    1. Александр Мальцев
                                                                                      26 сентября 2020, 14:17
                                                                                      Здравствуйте! Как добавить слайдеру управление тапом можно посмотреть в примерах, которые приведены в комментариях. Оттуда нужно взять соответствующий код и добавить его в свой.
                                                                                      Также в статье и комментариях имеются примеры, в которых показана возможность обновления состояния слайдера при изменении экрана. Из них тоже можно извлечь нужный код и добавить его в свой.

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

                                                                                      В планах имеется, конечно, сделать единый JavaScript код слайдера с возможностью его настройкой для разных ситуаций с помощью аргументов. Но пока такого кода нет. В данный момент единственным решением будет — это самостоятельно собрать код, который вы хотите из различных примеров.
                                                                                    2. Sheldon
                                                                                      11 сентября 2020, 13:08
                                                                                      Здравствуйте. Как сделать чтобы при ресайзе шаг у слайдера не ломался? Когда меняю размер браузера без обновления страницы у меня срабатывает медиа запрос, при котором количество слайдов в видимой области меняется. Шаг слайдера становится не правильным.
                                                                                      1. Sheldon
                                                                                        11 сентября 2020, 15:13
                                                                                        1. Александр Мальцев
                                                                                          12 сентября 2020, 06:30
                                                                                          Здравствуйте. Добавил такую возможность в скрипт. Слайдер: itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-32
                                                                                          1. Sheldon
                                                                                            12 сентября 2020, 11:51
                                                                                            Еще одна проблемка только уже с другим слайдером itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-12. Если уменьши количество item'ов в слайдере, например до 4-х, то у слайдера при ресайзе тоже ломается адаптивность. При быстром листании слайдера не успевают подгрузится новые слайды и видно как они появляются. Для того чтобы это увидеть нужно уменьшить высоту .slider__control до 50px.
                                                                                            1. Александр Мальцев
                                                                                              20 сентября 2020, 08:02
                                                                                              Можно скриншот первой проблемы, чтобы понять в чём она заключается. Вторая проблема заключается в том, что, например, при нажатии вправо, когда количество отображаемых слайдов практически равно их количеству, нам необходимо левый слайд переместить вправо для его отображения там, и в этот момент на его месте ничего не будет, т.е. будет видна «пустота». В этом случае необходимо обеспечить, чтобы количество слайдов в слайдере было больше на 3 чем видимых. В скрипте это пока не реализовано. Сейчас, это можно сделать вручную или посредством кода. Суть тут простая, если, например, у вас 4 слайда, то нужно после их вставить ещё четыре. Т.е. 1 слайд у вас будет на 1 и 5 позициях, 2 слайд – на 2 и 6 и т.д.
                                                                                              Например:
                                                                                              <div class="slider__wrapper">
                                                                                                <!-- 1 слайдер -->
                                                                                                <div class="slider__item">...</div>
                                                                                                <!-- 2 слайдер -->
                                                                                                <div class="slider__item">...</div>
                                                                                                <!-- 3 слайдер -->
                                                                                                <div class="slider__item">...</div>
                                                                                                <!-- 4 слайдер -->
                                                                                                <div class="slider__item">...</div>
                                                                                                <!-- 1 слайдер -->
                                                                                                <div class="slider__item">...</div>
                                                                                                <!-- 2 слайдер -->
                                                                                                <div class="slider__item">...</div>
                                                                                                ...
                                                                                              </div>
                                                                                              
                                                                                              1. Sheldon
                                                                                                20 сентября 2020, 17:17
                                                                                                Не знаю как сделать скриншот первой проблемы, вы же ее уже решили. Шаг у слайдера (https://itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-2) при ресайзе больше не ломается. Спасибо за ответ.
                                                                                            2. Sheldon
                                                                                              12 сентября 2020, 10:50
                                                                                              Еще раз спасибо.
                                                                                              1. Sheldon
                                                                                                12 сентября 2020, 10:38
                                                                                                Спасибо. Не ожидал что так быстро ответите. Есть ли у вас канал на ютубе? Или другой ресурс, на который можно подписаться?
                                                                                                1. Александр Мальцев
                                                                                                  14 сентября 2020, 15:21
                                                                                                  Пожалуйста! Ссылки на социальные сети и другие ресурсы приведены в футере сайта.
                                                                                          2. Дмитрий
                                                                                            21 августа 2020, 11:10
                                                                                            Добрый день, слайдер супер давно его использую в работе! Но сейчас стоит задача слайдер в Табах и уже есть готовый вариант но первая вкладка работает а остальные не отвечают на нажатия стрелок ((( подскажите пожалуйста очень нужна Ваша помощь, пробовал вариант из комментарий не вышло(
                                                                                            		<svg class="hidden">
                                                                                            			<defs>
                                                                                            		<path id="tabshape" d="M80,60C34,53.5,64.417,0,0,0v60H80z"/>
                                                                                            			</defs>
                                                                                            		</svg>
                                                                                            		<div class="container">
                                                                                            
                                                                                            	<section>
                                                                                            		<div class="tabs tabs-style-shape">
                                                                                            			<nav>
                                                                                            				<ul>
                                                                                            				<li>
                                                                                            					<a href="#section-shape-1">
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
                                                                                            					<span>до $10 000</span>
                                                                                            					</a>
                                                                                            					</li>
                                                                                            					<li>
                                                                                            					<a href="#section-shape-2">
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
                                                                                            					<span>$10 000 - $16 000</span>
                                                                                            					</a>
                                                                                            		            		</li>
                                                                                            					<li>
                                                                                            					<a href="#section-shape-3">		
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg									
                                                                                            					<span>$16 000 - $25 000</span>
                                                                                            					</a>
                                                                                            					</li>
                                                                                            					<li>
                                                                                            					<a href="#section-shape-4">
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
                                                                                            					<span>больше $25 000</span>
                                                                                            					</a>
                                                                                            					</li>
                                                                                            					<li>
                                                                                            					<a href="#section-shape-5">
                                                                                            					<svg viewBox="0 0 80 60" preserveAspectRatio="none"><use xlink:href="#tabshape"></use></svg>
                                                                                            					<span>Эксклюзив</span>
                                                                                            					</a>
                                                                                            					</li>
                                                                                            					</ul>
                                                                                            					</nav>
                                                                                            					<div class="content-wrap">
                                                                                            					<section id="section-shape-1">
                                                                                            					<div class="slider">
                                                                                                					<div class="slider__wrapper">
                                                                                            					<div class="slider__item">
                                                                                                    				<div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/1.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Hyundai Sonata 2014</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">9500$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">12500$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/3.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Chevrolet Cruze 2016</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">8700$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">11500$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/15.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Ford focus 2017</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">8700$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">11500$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/13.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Volkswagen Jetta 2015</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">9000$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">12000$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                                </div>
                                                                                                <a class="slider__control slider__control_left" href="#" role="button"></a>
                                                                                                <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
                                                                                              </div>
                                                                                            						</section>
                                                                                            						<section id="section-shape-2">
                                                                                            												<div class="slider">
                                                                                                <div class="slider__wrapper">
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/11.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Mazda CX-5 2015</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">15000$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">19500$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/17.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">VW Passat B7 2014</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">11000$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">13000$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/10.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Mazda 6 2017</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">14000$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">19000$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/8.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Ford Fusion 2015</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">11000$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">13000$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                                </div>
                                                                                                <a class="slider__control slider__control_left" href="#" role="button"></a>
                                                                                                <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
                                                                                              </div>
                                                                                            							</section>
                                                                                            						<section id="section-shape-3"><p>3</p></section>
                                                                                            						<section id="section-shape-4"><p>4</p></section>
                                                                                            						<section id="section-shape-5">
                                                                                            								<div class="slider">
                                                                                                <div class="slider__wrapper">
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/1.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Hyundai Sonata 2014</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">9500$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">12500$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/3.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Chevrolet Cruze 2016</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">8700$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">11500$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/15.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Ford focus 2017</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">8700$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">11500$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                            		<div class="slider__item">
                                                                                                    <div>
                                                                                            			<p><img src="https://onexport.com/assets/images/front/cars/13.jpg" alt=""></p>
                                                                                            			<div class="iwpmheg">Volkswagen Jetta 2015</div>
                                                                                            			<div class="iwpmpricebg">
                                                                                            			<div class="iwpmprice">9000$</div>
                                                                                            				<div class="iwpmpricetext">средня ціна під ключ в Україні</div>
                                                                                            				</div>
                                                                                            			<div class="iwpmukprice">12000$</div>
                                                                                            			<div  class="iwpmria">средня ціна на  <img src="https://onexport.com/assets/images/front/ria.png" alt="" style=" padding-left: 10px; "></div>
                                                                                            			<div class="iwpmmore">більше деталей </div>
                                                                                            		  </div>
                                                                                                  </div>
                                                                                                </div>
                                                                                                <a class="slider__control slider__control_left" href="#" role="button"></a>
                                                                                                <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
                                                                                              </div>
                                                                                            						</section>
                                                                                            					</div><!-- /content -->
                                                                                            				</div><!-- /tabs -->
                                                                                            			</section>
                                                                                            	</div>
                                                                                            <!-- скрипт табов -->
                                                                                            <script src="js/cbpFWTabs.js"></script>
                                                                                            		<script>
                                                                                            			(function() {
                                                                                            				[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
                                                                                            					new CBPFWTabs( el );
                                                                                            				});
                                                                                            			})();
                                                                                            		</script>
                                                                                            	<!-- скрипт табов закончен -->
                                                                                            	<!--скрипт слайдера -->
                                                                                            <script>
                                                                                                'use strict';
                                                                                                var multiItemSlider = (function () {
                                                                                                  return function (selector, config) {
                                                                                                    var
                                                                                                      _mainElement = document.querySelector(selector), // основный элемент блока
                                                                                                      _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                                                                                                      _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                                                                                                      _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                                                                                                      _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                                                                                                      _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                                                                                                      _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                                                                                                      _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
                                                                                                      _positionLeftItem = 0, // позиция левого активного элемента
                                                                                                      _transform = 0, // значение транфсофрмации .slider_wrapper
                                                                                                      _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
                                                                                                      _items = [], // массив элементов
                                                                                                      _interval = 0,
                                                                                                      _config = {
                                                                                                        isCycling: false, // автоматическая смена слайдов
                                                                                                        direction: 'right', // направление смены слайдов
                                                                                                        interval: 5000, // интервал между автоматической сменой слайдов
                                                                                                        pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
                                                                                                      };
                                                                                            
                                                                                                    for (var key in config) {
                                                                                                      if (key in _config) {
                                                                                                        _config[key] = config[key];
                                                                                                      }
                                                                                                    }
                                                                                            
                                                                                                    // наполнение массива _items
                                                                                                    _sliderItems.forEach(function (item, index) {
                                                                                                      _items.push({ item: item, position: index, transform: 0 });
                                                                                                    });
                                                                                            
                                                                                                    var position = {
                                                                                                      getItemMin: function () {
                                                                                                        var indexItem = 0;
                                                                                                        _items.forEach(function (item, index) {
                                                                                                          if (item.position < _items[indexItem].position) {
                                                                                                            indexItem = index;
                                                                                                          }
                                                                                                        });
                                                                                                        return indexItem;
                                                                                                      },
                                                                                                      getItemMax: function () {
                                                                                                        var indexItem = 0;
                                                                                                        _items.forEach(function (item, index) {
                                                                                                          if (item.position > _items[indexItem].position) {
                                                                                                            indexItem = index;
                                                                                                          }
                                                                                                        });
                                                                                                        return indexItem;
                                                                                                      },
                                                                                                      getMin: function () {
                                                                                                        return _items[position.getItemMin()].position;
                                                                                                      },
                                                                                                      getMax: function () {
                                                                                                        return _items[position.getItemMax()].position;
                                                                                                      }
                                                                                                    }
                                                                                            
                                                                                                    var _transformItem = function (direction) {
                                                                                                      var nextItem;
                                                                                                      if (direction === 'right') {
                                                                                                        _positionLeftItem++;
                                                                                                        if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) {
                                                                                                          nextItem = position.getItemMin();
                                                                                                          _items[nextItem].position = position.getMax() + 1;
                                                                                                          _items[nextItem].transform += _items.length * 100;
                                                                                                          _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
                                                                                                        }
                                                                                                        _transform -= _step;
                                                                                                      }
                                                                                                      if (direction === 'left') {
                                                                                                        _positionLeftItem--;
                                                                                                        if (_positionLeftItem < position.getMin()) {
                                                                                                          nextItem = position.getItemMax();
                                                                                                          _items[nextItem].position = position.getMin() - 1;
                                                                                                          _items[nextItem].transform -= _items.length * 100;
                                                                                                          _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
                                                                                                        }
                                                                                                        _transform += _step;
                                                                                                      }
                                                                                                      _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
                                                                                                    }
                                                                                            
                                                                                                    var _cycle = function (direction) {
                                                                                                      if (!_config.isCycling) {
                                                                                                        return;
                                                                                                      }
                                                                                                      _interval = setInterval(function () {
                                                                                                        _transformItem(direction);
                                                                                                      }, _config.interval);
                                                                                                    }
                                                                                            
                                                                                                    // обработчик события click для кнопок "назад" и "вперед"
                                                                                                    var _controlClick = function (e) {
                                                                                                      if (e.target.classList.contains('slider__control')) {
                                                                                                        e.preventDefault();
                                                                                                        var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                                                                                                        _transformItem(direction);
                                                                                                        clearInterval(_interval);
                                                                                                        _cycle(_config.direction);
                                                                                                      }
                                                                                                    };
                                                                                            
                                                                                                    var _setUpListeners = function () {
                                                                                                      // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                                                                                                      _sliderControls.forEach(function (item) {
                                                                                                        item.addEventListener('click', _controlClick);
                                                                                                      });
                                                                                                      if (_config.pause && _config.isCycling) {
                                                                                                        _mainElement.addEventListener('mouseenter', function () {
                                                                                                          clearInterval(_interval);
                                                                                                        });
                                                                                                        _mainElement.addEventListener('mouseleave', function () {
                                                                                                          clearInterval(_interval);
                                                                                                          _cycle(_config.direction);
                                                                                                        });
                                                                                                      }
                                                                                                    }
                                                                                            
                                                                                                    // инициализация
                                                                                                    _setUpListeners();
                                                                                                    _cycle(_config.direction);
                                                                                            
                                                                                                    return {
                                                                                                      right: function () { // метод right
                                                                                                        _transformItem('right');
                                                                                                      },
                                                                                                      left: function () { // метод left
                                                                                                        _transformItem('left');
                                                                                                      },
                                                                                                      stop: function () { // метод stop
                                                                                                        _config.isCycling = false;
                                                                                                        clearInterval(_interval);
                                                                                                      },
                                                                                                      cycle: function () { // метод cycle
                                                                                                        _config.isCycling = true;
                                                                                                        clearInterval(_interval);
                                                                                                        _cycle();
                                                                                                      }
                                                                                                    }
                                                                                            
                                                                                                  }
                                                                                                }());
                                                                                            
                                                                                                var slider = multiItemSlider('.slider', {
                                                                                                  isCycling: true
                                                                                                })
                                                                                            
                                                                                              </script>
                                                                                            	<!-- скрипт слайдера закончен-->
                                                                                            1. AriYeS
                                                                                              11 августа 2020, 00:40
                                                                                              Александр, Здравствуйте, спасибо за ваши примеры слайдеров, всё понятно и доступно. Взял у вас на вооружение следующий слайдер itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-29
                                                                                              Но у меня есть вопрос, мне нужно, чтобы элементы управления не находились непосредственно на слайдах, с помощью стилей я эту проблему сам не смог решить(пробовал убрать абсолютную позицию, но они расширяют родителя и слайдов начинает становиться больше чем 3(это я убирал max-width и flex), либо сами слайды становятся больше чем мне нужно(это если не трогать max-width и flex), вся проблема в том, что slider-item плевать хотели на своего родителя, его уменьшать бесполезно, наоборот, только вредит и не приносит желаемого результата, пробовал вытащить элементы из родительского каталога и редактировать js, но ничего адекватного достичь, увы, не смог(просто не знаю синтаксис языка), пробовал грубо создать глобальную переменную которая бы определяла кнопки в вашем скрипте, но так как слайдеров мне нужно три штуки такой метод вдвойне нецелесообразен. Помогите решить проблему, пожалуйста
                                                                                              1. Александр Мальцев
                                                                                                13 августа 2020, 02:24
                                                                                                Здравствуйте! Так там же есть методы left и right. Используйте их для управления слайдами, а код, связанный с этими кнопками, тогда в принципе вообще можно удалить. Например, можно сделать так.
                                                                                                1. AriYeS
                                                                                                  13 августа 2020, 15:05
                                                                                                  О, об этом я почему то не подумал, спасибо)
                                                                                              2. Володя
                                                                                                10 августа 2020, 16:58
                                                                                                Здраствуйте) возникла проблема слайдер работает тольлько если он на влазит на весь екран… если прокрутить к приверу чуть ниже — чтобы была половина слайдера видна — перестают работать кнопки и сам слайдер не показывает слайды в цикле…
                                                                                                1. Александр Мальцев
                                                                                                  13 августа 2020, 02:31
                                                                                                  Добрый день! Посмотрите ответ в этом комментарии.
                                                                                                2. Александр
                                                                                                  07 августа 2020, 22:51
                                                                                                  Здравствуйте! Спасибо за слайдер, это реально чудо, поставил уже на нескольких своих проектах. Сейчас возникла такая проблемка — есть скрипт LazyLoad для картинок, и он грузится чуть позже скрипта слайдера, в итоге как я понял — слайдер изначально определяет свою высоту по содержимому и высоте картинок, и с включенным lazyload он не успевает понять высоту картинки и в итоге под слайдером и картинкой получается большой оступ. Как это можно решить без изменения порядка подгрузки скриптов? Пробовал в стилях задавать контейнеру высоту в px, тогда это спасает от части, но все равно кривовато, т.к картинки бывают разные по высоте. Надеюсь внятно объяснил)
                                                                                                  1. Александр Мальцев
                                                                                                    10 августа 2020, 05:07
                                                                                                    Здравствуйте!
                                                                                                    Слайдер выполняет расчёты с шириной, высота картинки тут не важна.
                                                                                                    С настройкой картинок не вижу никаких проблем.
                                                                                                    Например, можно задать размеры картинкам с помощью атрибутов width и height. А также им установить с помощью атрибута src изображение, которое будет отображаться до загрузки основной картинки.
                                                                                                    <img class="slider__content_img lazy" src="/examples/images/s-0.png" data-src="/examples/images/s-6.jpg" alt="" width="500" height="281">
                                                                                                    
                                                                                                    Пример слайдера с ленивой загрузкой изображений, которая выполнена с использованием плагина Lazyload.

                                                                                                    Если картинки имеют разное соотношение сторон, то их на сервере нужно приводить к какому-то одному значению или использовать их в качестве background.

                                                                                                    Как это выглядит (отключен кэш и выбран Slow 3G): yadi.sk/i/LxKU0xMRw_pbLw
                                                                                                  2. kadochnikov_k
                                                                                                    30 июля 2020, 10:35
                                                                                                    Добрый день! Столкнулся с такой проблемой: в слайдер с индикаторами добавил код, приведенный ниже, и индикаторы перестают правильно работать (в моем случае активным всегда остается первый индикатор, хотя переключение по индикаторам происходит нормально). Не могу понять, почему?
                                                                                                    Код, который я добавляю:
                                                                                                    document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                                                    item.setAttribute('slider-id', index);
                                                                                                    multiItemSlider('[slider-id="' + index + '"]'); {
                                                                                                    var sliderSelector = '[slider-id="' + index + '"]';
                                                                                                    var sliderElem = document.querySelector(sliderSelector);
                                                                                                    if (sliderElem.querySelector('.slider__item').getBoundingClientRect().width * sliderElem.querySelectorAll('.slider__item').length >= sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width) {
                                                                                                    // слайдов больше, чем на экране

                                                                                                    var slider = multiItemSlider('[slider-id="' + index + '"]', {
                                                                                                    isCycling: true
                                                                                                    })
                                                                                                    } else {
                                                                                                    // слайдов меньше, чем на экране
                                                                                                    // удалить slider__control_show

                                                                                                    var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                                                    for (var i = 0; i < sliderControls.length; i++) {
                                                                                                    sliderControls[i].style.display = 'none';
                                                                                                    }
                                                                                                    }
                                                                                                    }
                                                                                                    });
                                                                                                    1. Александр Мальцев
                                                                                                      30 июля 2020, 15:17
                                                                                                      Здравствуйте! В коде происходит лишняя инициализация слайдера.
                                                                                                      Попробуйте сделать так:
                                                                                                      document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                                                        item.setAttribute('data-slider-id', index);
                                                                                                        // multiItemSlider('[slider-id="' + index + '"]');
                                                                                                        var sliderSelector = '[data-slider-id="' + index + '"]';
                                                                                                        var sliderElem = document.querySelector(sliderSelector);
                                                                                                        if (sliderElem.querySelector('.slider__item').getBoundingClientRect().width * sliderElem.querySelectorAll('.slider__item').length > sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width) {
                                                                                                          // слайдов больше, чем на экране
                                                                                                          multiItemSlider('[data-slider-id="' + index + '"]', {
                                                                                                            isCycling: true
                                                                                                          });
                                                                                                        } else {
                                                                                                          // слайдов меньше, чем на экране
                                                                                                          // удалить slider__control_show
                                                                                                          var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                                                          for (var i = 0; i < sliderControls.length; i++) {
                                                                                                            sliderControls[i].style.display = 'none';
                                                                                                          }
                                                                                                        }
                                                                                                      });
                                                                                                      
                                                                                                      1. kadochnikov_k
                                                                                                        19 августа 2020, 16:45
                                                                                                        Добрый день! В процессе использования слайдера столкнулся с такой проблемой: если на странице несколько слайдеров и в одном из них по каким то причинам нет слайдов, то слайдеры ниже перестают работать (им не присваиваются id, но даже если их присвоить то слайдеры не инициализируются). Никак не могу понять в чем дело, может быть вы подскажите?
                                                                                                        1. Александр Мальцев
                                                                                                          20 августа 2020, 04:42
                                                                                                          Здравствуйте!
                                                                                                          Для этого добавьте условие для проверки наличия слайдов в слайдере:
                                                                                                          document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                                                            item.setAttribute('data-slider-id', index);
                                                                                                            var sliderSelector = '[data-slider-id="' + index + '"]';
                                                                                                            var sliderElem = document.querySelector(sliderSelector);
                                                                                                            // если слайдов в слайдере нет, то завершаем текущую работу функции
                                                                                                            if (sliderElem.querySelectorAll('.slider__item').length === 0) {
                                                                                                              return;
                                                                                                            }
                                                                                                            if (
                                                                                                              sliderElem.querySelector('.slider__item').getBoundingClientRect().width *
                                                                                                                sliderElem.querySelectorAll('.slider__item').length >
                                                                                                              sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width
                                                                                                            ) {
                                                                                                              multiItemSlider('[data-slider-id="' + index + '"]', {
                                                                                                                isCycling: true,
                                                                                                              });
                                                                                                            } else {
                                                                                                              var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                                                              for (var i = 0; i < sliderControls.length; i++) {
                                                                                                                sliderControls[i].style.display = 'none';
                                                                                                              }
                                                                                                            }
                                                                                                          });
                                                                                                          
                                                                                                        2. kadochnikov_k
                                                                                                          30 июля 2020, 16:02
                                                                                                          Спасибо огромное, все заработало!
                                                                                                      2. РУСЛАН
                                                                                                        30 июля 2020, 00:08
                                                                                                        Добрый вечер, а как реализовать, чтоб реагировал пролистование через сенсорные экраны, а то не могу найти решение а у вас сделоно отлично. Спасибо за рание за совет.
                                                                                                        1. Александр Мальцев
                                                                                                          30 июля 2020, 15:20
                                                                                                          Здравствуйте! В этом комментарии есть решение как это выполнить.
                                                                                                          1. РУСЛАН
                                                                                                            30 июля 2020, 15:33
                                                                                                            Спасибо огромное))
                                                                                                        2. Mihail
                                                                                                          24 июля 2020, 22:33
                                                                                                          Александр добрый день. Я к Вам ранее обращался, Вы мне очень помогли с вопросом. Спасибо еще раз. У меня возникла проблема никак не могу ее решить. В комментариях я нашел очень хороший пример слайдера как раз тот, что мне нужен.
                                                                                                          https://itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-19 
                                                                                                          Но в этом примере есть проблема. Мне необходимо .slider__item с 100% уменьшить до 33.333333%; Это получается! Но когда нажимаешь на пагинацию до конца все кнопки, там на половине пустые слайды показываются. Я видел примеры другие где на слайдере по 3 slider__item и пагинация работает исправна, НО МНЕ НУЖНА ПОМОЩЬ ИМЕННО В ЭТОМ ПРИМЕРЕ. Тут боковые слайды как раз именно так выглядят как мне нужно (на половину спрятаны). ЗАРАНЕЕ ВАМ БОЛЬШОЕ СПАСИБО!!! Мне кажется что тут в самом скрипте нужно исправить где то код. Прошу помощи. Мне необходимо чтобы не было пустых окон в слайде, чтобы он зациклено «шел».

                                                                                                          .slider__item {
                                                                                                          flex: 0 0 33.333333%;
                                                                                                          max-width: 33.333333%;
                                                                                                          }
                                                                                                          1. Mihail
                                                                                                            30 июля 2020, 01:14
                                                                                                            Добрый день! Вопрос снимаю. Прошу прощения, что отвлек. Тупанул. Просто не добавил зацикливание.
                                                                                                          2. VLADIMIR BULANOV
                                                                                                            16 июля 2020, 10:10
                                                                                                            Здравствуйте! Наконец, нашел нормальное руководство по слайдерам без «скачайте наш плагин или ничего не получится!»)) Отличные примеры, все гуд, но столкнулся с проблемой:
                                                                                                            В моем слайдере возможно динамическое изменение HTML кода в слайдах, из-за этого обычный метод _refresh не совсем подходит… (в частности, я «налопатил» уже каким то образом до того, что при изменении хтмл у меня трансформации слайдов «улетают» в рандомных направлениях, делая слайдер неюзабельным пока не обновишь страницу).

                                                                                                            Что я ищу — это метод, который полностью «убивает» скрипт слайдера и инициализирует его по-новой, на основе нового DOM внутри. Можете подсказать что-нибудь? Спасибо!
                                                                                                            1. Александр Мальцев
                                                                                                              20 июля 2020, 15:08
                                                                                                              Привет!
                                                                                                              Можно просто добавить метод destroy, который будет удалять всё что связано с этим слайдером, т.е. его HTML код и обработчики событий. Пример, в котором показано как это можно сделать. Далее вам необходимо после вставки нового HTML кода на страницу заново инициализировать его обычным способом.
                                                                                                            2. Павел
                                                                                                              11 июля 2020, 08:22
                                                                                                              Добрый день! Буду очень признателен если найдете время на ответ. Подскажите пожалуйста, каким образом реализовать автопрокрутку первого слайдера?
                                                                                                              1. Александр Мальцев
                                                                                                                11 июля 2020, 15:43
                                                                                                                Привет! Взять слайдер с автопрокруткой, например, 3-ий по порядку в статье и изменить у него CSS так, чтобы в текущий момент показывался только один слайд:
                                                                                                                .slider__item {
                                                                                                                  flex: 0 0 100%;
                                                                                                                  max-width: 100%;
                                                                                                                }
                                                                                                                
                                                                                                                1. stas452
                                                                                                                  12 июля 2020, 19:10
                                                                                                                  Добрый день! Слайдер отличный, спасибо большое, но если размещать его в popup окне, картинки не меняют размера при смене экрана, то есть не адаптивны, но при этом popup окно полностью адаптивно, можете подсказать как можно решить проблему? Заранее большое спасибо!

                                                                                                                  PS: пробовал
                                                                                                                  .slider__item background-image {
                                                                                                                  display: block;
                                                                                                                  max-width: 100%;
                                                                                                                  height: auto;
                                                                                                                  }

                                                                                                                  Ничего не выходило(
                                                                                                                  1. Александр Мальцев
                                                                                                                    20 июля 2020, 15:29
                                                                                                                    Добрый день! Вам необходимо инициализировать слайдер после открытия popup окна. Если вы будете делать это до открытия popup, то слайдер не будет работать, т.к. он не может рассчитать размеры элементов, т.к. они ещё не известны.
                                                                                                                    1. stas452
                                                                                                                      20 июля 2020, 15:33
                                                                                                                      Всё отлично, а как мне его инициализировать? (СЛАЙДЕР)
                                                                                                                      1. Александр Мальцев
                                                                                                                        20 июля 2020, 15:43
                                                                                                                        Вам необходимо в обработчик события после того как окно будет показано добавить код:
                                                                                                                        const slider = multiItemSlider('.slider');
                                                                                                                        
                                                                                                                        1. stas452
                                                                                                                          20 июля 2020, 15:47
                                                                                                                          // инициализация
                                                                                                                          _setUpListeners();

                                                                                                                          return {
                                                                                                                          right: function () { // метод right
                                                                                                                          _transformItem('right');
                                                                                                                          },
                                                                                                                          left: function () { // метод left
                                                                                                                          _transformItem('left');
                                                                                                                          }
                                                                                                                          const slider = multiItemSlider('.slider');
                                                                                                                          const slider = multiItemSlider('.slider');

                                                                                                                          }

                                                                                                                          Так не сработало(
                                                                                                                          1. Александр Мальцев
                                                                                                                            20 июля 2020, 15:58
                                                                                                                            Не знаю, это зависит от того, как у вас реализовано popup окно. Сделайте пример на jsFiddle или посмотрите вот эту реализацию слайдера в popup окне. Кроме этого, в комментариях ещё много других примеров, может там уже есть то, что вы ищите.
                                                                                                                            1. stas452
                                                                                                                              20 июля 2020, 18:22
                                                                                                                              Я могу вам предоставить код? Можете мне как-то помочь в этом? Сам popup адаптивный под моб.устройста, а вот слайдер внутри него нет, и пример который вы прикрепили тоже не то, уже больше недели не могу найти решение проблемы, всё бы ничего а заказчик ждёт, буду очень признателен вам! Заранее спасибо большое!
                                                                                                                              1. Александр Мальцев
                                                                                                                                22 июля 2020, 15:07
                                                                                                                                Предоставьте на jsFiddle эту часть страницы.
                                                                                                                                1. stas452
                                                                                                                                  22 июля 2020, 15:27
                                                                                                                                  jsfiddle.net/yf9n530t/

                                                                                                                                  Вот пожалуйста, этого вам хватит?
                                                                                                                                  Прошу обратить внимание что без слайдера, внутри popup окна, картинки адаптивны.
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    22 июля 2020, 16:20
                                                                                                                                    Нет, вам нужно собрать текущий вариант части страницы, состоящий из popup окна и слайдера с картинками. Причём он должен иметь такой же функционал как у вас на сайте. Другого контента, который у вас есть на странице предоставлять не надо. Т.е. в результате на jsfiddle.net необходимо создать полностью рабочий мини пример этой ситуации без всего лишнего. Так вообще желательно делать, когда вы к кому-то обращаетесь за советом.
                                                                                                              2. Виктор
                                                                                                                10 июля 2020, 09:37
                                                                                                                Доброго времени суток!
                                                                                                                Александр, помогите пожалуйста разобраться как разместить 2 карусели (одну под другой) с одним элементом управления (карусели должны быть адаптивные и менять количество отображаемых файлов в зависимости от ширины окна). Js только начал изучать и пока не понимаю всю логику заложенную в скрипт, а карусель очень хочется разместить на сайте.
                                                                                                                Правильно ли я понимаю что для отключения зацикливания во все isCycling необходимо прописать false? А что сделать для отключения автопрокрутки?
                                                                                                                1. Александр Мальцев
                                                                                                                  11 июля 2020, 15:56
                                                                                                                  Привет!
                                                                                                                  В этом комментарии есть подобный пример. А настройка количество отображаемых слайдов в зависимости от ширины окна описана в статье. Она осуществляется через медиа запросы, JavaScript тут не нужен.

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

                                                                                                                  Параметр isCycling нужен для включения режима автоматического смена слайдов. Т.е. если он false, то слайды автоматически меняться не будут. А если true, то через определённое время определяемым параметром interval.
                                                                                                                2. stas452
                                                                                                                  09 июля 2020, 12:48
                                                                                                                  Александр, здравствуйте, вышла такая проблема, при дублирование кода слайдера, на втором перестают работать кнопки и при клике кидает на главную страницу сайта, есть решение проблемы? Ибо нужно чтобы слайдер был в нескольких местах страницы и с разными картинками внутри, заранее спасибо!
                                                                                                                  1. Александр Мальцев
                                                                                                                    09 июля 2020, 15:04
                                                                                                                    Здравствуйте! Можно хоть сколько слайдеров создать на странице. Вот пример с 2 слайдерами.
                                                                                                                    1. stas452
                                                                                                                      09 июля 2020, 16:42
                                                                                                                      Огромное спасибо!
                                                                                                                  2. Владимир
                                                                                                                    27 июня 2020, 18:46
                                                                                                                    Здравствуйте, спасибо Вам большое за слайдеры, всё очень круто и качественно работает!!! Если не затруднит, подскажите, пожалуйста, как сделать в «Адаптивный слайдер с зацикливанием» точки-переключатели (dots). Заранее благодарю!
                                                                                                                    1. Александр Мальцев
                                                                                                                      28 июня 2020, 11:47
                                                                                                                      Здравствуйте! Спасибо за отзыв!
                                                                                                                      Для этого нужно в него перенести соответствующий код из другого слайдера в котором он имеется. Если ничего не упустил, то держите пример.
                                                                                                                      1. Владимир
                                                                                                                        28 июня 2020, 12:07
                                                                                                                        Всё работает, благодарю!
                                                                                                                    2. Владимир
                                                                                                                      27 июня 2020, 08:52
                                                                                                                      Доброго времени суток! Спасибо большое за слайдер, очень помогли. Но у меня возникла одна проблема: я воспользовался кодом из «Слайдер с зацикливанием и автоматической сменой слайдов», всё работает отлично, но в IE 11 данный слайдер не работает. Нет никаких ошибок, просто не работает. Подскажите, пожалуйста, как это вылечить. Буду очень благодарен. Нужна поддержка IE 10+.
                                                                                                                      1. Владимир
                                                                                                                        27 июня 2020, 11:28
                                                                                                                        Прошу прощения, уже нашёл ответ в комментариях.
                                                                                                                      2. Ilya Smolin
                                                                                                                        15 июня 2020, 16:06
                                                                                                                        Здравствуйте, спасибо за слайдер, но возникла проблема, есть довольно много контента на слайдере (высота 900px) и когда стоишь ровно по центру или чуть ниже то слайдер не листает, а листает только в начале контента. Что мне необходимо изменить чтоб он работал? Заранее спасибо

                                                                                                                        прикрепил скриншот

                                                                                                                        <img
                                                                                                                        src=«https://itchief.ru/assets/uploadify/0/8/d/08d470c30f423a4db8b64001b89e967bs.jpg» class=«fancybox thumbnail center»>
                                                                                                                        1. Александр Мальцев
                                                                                                                          21 июня 2020, 10:42
                                                                                                                          Здравствуйте! Замените в JavaScript коде реализацию функции _isElementVisible на эту:
                                                                                                                          function _isElementVisible(element) {
                                                                                                                            var position = element.getBoundingClientRect();
                                                                                                                            if ((position.top >= 0 && position.bottom <= window.innerHeight) || (position.top < window.innerHeight && position.bottom >= 0)) {
                                                                                                                              return true;
                                                                                                                            }
                                                                                                                            return false;
                                                                                                                          }
                                                                                                                          
                                                                                                                        2. Святослав
                                                                                                                          02 июня 2020, 19:27
                                                                                                                          Здравствуйте, помогите пожалуйста разобраться, как мне изменить расположение индикаторов, так как оно находится в скрипте не понимаю как им поменять расположение в блоке слайдера.
                                                                                                                          1. Денис
                                                                                                                            02 июня 2020, 20:08
                                                                                                                            Попробуйте добавить в стили что-то из серии
                                                                                                                            .slider__indicators {
                                                                                                                            position: absolute;
                                                                                                                            top: 0px;
                                                                                                                            }
                                                                                                                            1. Святослав
                                                                                                                              08 июня 2020, 13:47
                                                                                                                              Денис спасибо за ответ. уже разобрался.
                                                                                                                            2. Святослав
                                                                                                                              02 июня 2020, 20:02
                                                                                                                              Спасибо вам Александр, разобрался. Вопрос снят.
                                                                                                                            3. Денис
                                                                                                                              01 июня 2020, 01:49
                                                                                                                              Доброго времени суток! Огромное спасибо Вам за сайт в целом и слайдер в частности!
                                                                                                                              К сожалению, моей квалификации не хватает, чтобы по достоинству оценить всю его прелесть, но, надеюсь, что это временно…
                                                                                                                              Подскажите, пожалуйста, каким образом можно модифицировать код, что бы он работал следующим образом:
                                                                                                                              — на странице находится произвольное количество слайдеров (например, 10). Между слайдерами размещен произвольный контент.
                                                                                                                              — количество элементов в каждом слайдере — одинаковое.
                                                                                                                              — элементы управления есть только на одном (первом слайдере).
                                                                                                                              — использование элементов управления на этом слайдере влияет на содержание всех остальных слайдеров — содержание меняется на всех слайдерах сразу.
                                                                                                                              Спасибо большое заранее!
                                                                                                                              1. Александр Мальцев
                                                                                                                                02 июня 2020, 13:39
                                                                                                                                Здравствуйте! Вам просто нужно по-другому инициализировать слайдеры, чтобы всё работало. Пример кода имеется в этом комментарии.
                                                                                                                                1. Денис
                                                                                                                                  03 июня 2020, 00:15
                                                                                                                                  Либо лыжи не едут… ткните, глупому, пальцем, пожалуйста, куда вставлять код из этого комментария? и да… если я правильно все понимаю, то код на гите отличается от того, который вы приводите в качестве примеров… может быть в этом проблема?
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    03 июня 2020, 14:17
                                                                                                                                    Да, не то подсказал.
                                                                                                                                    Вот пример.
                                                                                                                                    1. Денис
                                                                                                                                      13 июня 2020, 18:52
                                                                                                                                      Огонь! Все прям как нужно! Спасибо за решение! Скажите, а как теперь их запихать в разные вкладки (бутстраповские). Пробовал сюда приделать решение из этого поста, но оно никак не хочет работать… все-таки магия js для меня непостижима(((
                                                                                                                                      1. Александр Мальцев
                                                                                                                                        22 июня 2020, 14:52
                                                                                                                                        Пример, в котором показано как слайдеры можно поместить в разные бутстраповские вкладки.
                                                                                                                                        1. Денис
                                                                                                                                          07 июля 2020, 17:35
                                                                                                                                          Спасибо огромное! Все работоет как нужно. Почему сам не догадался — непонятн((( Но зато, немного переделал, что бы оно динамически определяло количество вкладок и вызывало функцию инициализации для каждой. Еще раз огромное спасибо!
                                                                                                                                      2. Владимир
                                                                                                                                        11 июня 2020, 17:18
                                                                                                                                        Здравствуйте, я новичок и не понимаю как сделать к этому примеру еще и чтобы при наведении на основной слайдер с навигацией другие слайдеры тоже переставали листаться, подскажите пожалуйста.
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          13 июня 2020, 14:57
                                                                                                                                          Здравствуйте! Код для реализации этого функционала добавил в конец скрипта. Пример расположен здесь.
                                                                                                                                          1. Владимир
                                                                                                                                            14 июня 2020, 10:08
                                                                                                                                            Спасибо, все работает
                                                                                                                                2. Егор
                                                                                                                                  14 мая 2020, 13:28
                                                                                                                                  Александр, спасибо за прекрасный ресурс и невероятно функциональные примеры кодов. Данный слайдер отлично работает в современных браузерах (Chrome), но встал вопрос по пользователям IE 11… В этом старом браузере не работает листание (ни авто, ни кликом). Буду очень признателен за любые советы в данном направлении!

                                                                                                                                  UPDATE
                                                                                                                                  Нашел ответ в комментариях. Просто супер!
                                                                                                                                  Спасибо!
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    14 мая 2020, 16:19
                                                                                                                                    Отлично! Рад что всё получилось.
                                                                                                                                  2. Андрей
                                                                                                                                    09 мая 2020, 20:24
                                                                                                                                    Добрый день! Спасибо за слайдер, редко такое решение найдешь. Перекопал уже штук 20))

                                                                                                                                    Вопрос. Есть сайт 60-100 страниц на pug/sass. Слайдер используется не на всех. И если на странице скрипт слайдера не находит ".slider__wrapper" или другие классы слайдера, то я получаю ошибку «Cannot read property 'querySelector' of null». При этом формы обратной связи и старые slick слайдеры перестают работать.

                                                                                                                                    Как это исправить? Я так понимаю нужно сделать проверку наличия слайдера на странице и только после инициализировать слайдер? Но пока в js плохо ориентируюсь. Подскажите, пожалуйста)
                                                                                                                                    1. Александр Мальцев
                                                                                                                                      11 мая 2020, 15:17
                                                                                                                                      Добрый день!
                                                                                                                                      Вам необходимо просто проверить если ли элемент на странице и только после этого выполнять уже его инициализацию:
                                                                                                                                      if (document.querySelectorAll('.slider').length) {
                                                                                                                                        multiItemSlider('.slider');
                                                                                                                                      }
                                                                                                                                      
                                                                                                                                      1. Андрей
                                                                                                                                        11 мая 2020, 15:34
                                                                                                                                        Спасибо! То есть код можно прочитать примерно так: Если в документе у всех селекторов .slider есть хотя бы один символ содержимого, то для них инициализируем Слайдер. Верно?

                                                                                                                                        Очень благодарен за ваш подход не только с готовыми решениями, но и объяснением смыслов!
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          11 мая 2020, 15:45
                                                                                                                                          Да, вы просто проверяете с помощью length количество элементов с классом slider на странице и выполняете инструкцию инициализации только тогда, когда их найдено больше 0. Сравнение с 0 в данном случае можно опустить, поэтому в примере его указывать не стал.
                                                                                                                                          if (document.querySelectorAll('.slider').length > 0) {
                                                                                                                                            multiItemSlider('.slider');
                                                                                                                                          }
                                                                                                                                          
                                                                                                                                    2. bc
                                                                                                                                      03 мая 2020, 07:43
                                                                                                                                      Привет! Отличный слайдер! Можете подробнее рассказать как получить текущий правый элемент в карусели? Никак не могу сообразить почему так, как у вас получаете.
                                                                                                                                      1. Александр Мальцев
                                                                                                                                        03 мая 2020, 15:53
                                                                                                                                        Привет! Спасибо! Наиболее просто это выполнить — это добавить в скрипт какую-то переменную для хранения значения (индекса) правого слайда. Зная текущее количество активных слайдов это значение можно очень просто вычислить.
                                                                                                                                        1. bc
                                                                                                                                          03 мая 2020, 17:36
                                                                                                                                          PositionItemLeft++
                                                                                                                                          If( positionItemLeft + wrapperItem / itemWidth — 1)
                                                                                                                                          То есть в строке выше получаем значение позиции крайнего правого? Каким образом, расскажите и зачем PositionItemLeft++ каждый раз увеличивать на 1?
                                                                                                                                          1. Александр Мальцев
                                                                                                                                            04 мая 2020, 16:06
                                                                                                                                            Потому что, когда мы сдвигаем слайдер вправо, левый элемент в ней уже будет тот который имеет индекс 2. Далем этого для того, чтобы знать какой слайдер сейчас расположен слева. С помощью выражения (positionItemLeft + wrapperItem / itemWidth — 1) вычисляем индекс крайнего правого слайда.
                                                                                                                                      2. sasdfasdf
                                                                                                                                        30 апреля 2020, 11:50
                                                                                                                                        Здравствуйте как сделать слайдер адаптивным? Вот код jsfiddle.net/5rvsgp80/
                                                                                                                                        Если изменить ширину экрана и изменить количество видимых элементов, то слайдер не меняет значение ширины.
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          30 апреля 2020, 16:27
                                                                                                                                          Здравствуйте! Для этого необходимо добавить событие onresize для window. Пример такого скрипта можете посмотреть в этом слайдере.
                                                                                                                                          1. sasdfasdf
                                                                                                                                            30 апреля 2020, 19:42
                                                                                                                                            не работает, я не знаю уже как там и что исправлять jsfiddle.net/wo42jqbu/
                                                                                                                                            1. adfadsfadsfsad
                                                                                                                                              30 апреля 2020, 16:42
                                                                                                                                              не работает, то же самое jsfiddle.net/e7nkwc5h/2/
                                                                                                                                              1. Александр Мальцев
                                                                                                                                                01 мая 2020, 13:09
                                                                                                                                                Вы хотите программно менять количество видимых элементов после смены ширины или как? Ширина слайдера всегда равна 100% доступной ширины контейнера, в котором он расположен. Сами слайды задаются в процентом отношении. Адаптивность настраивается с помощью медиа запросов. Покажите то, что вы хотите на скриншоте.
                                                                                                                                                1. adfadsfadsfsad
                                                                                                                                                  01 мая 2020, 15:49
                                                                                                                                                  Я хотел вот так jsfiddle.net/euqp4v6r/. Код работает, но иногда, при ширине экрана меньше 576px,
                                                                                                                                                  и при максимальной возможной, слайдер не скидывает значение ширины, а берет прежние, и получается, что не ровно, слайды идут.

                                                                                                                                                  вот фото itchief.ru/assets/uploadify/9/2/7/92706e8dfd4c1fc8630b317ace8783d9.png
                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                    02 мая 2020, 15:26
                                                                                                                                                    Понятно. Скрипт поправил: jsfiddle.net/itchief/rvdjmybx/
                                                                                                                                                    1. adfadsfadsfsad
                                                                                                                                                      02 мая 2020, 19:11
                                                                                                                                                      БОЛЬШОЕ СПАСИБО!!!
                                                                                                                                          2. Mihail
                                                                                                                                            18 апреля 2020, 11:25
                                                                                                                                            Добрый день Александр. Спасибо Вам огромное за Ваш пример слайдера. Помогите, пожалуйста решить пару вопросов по его работе.

                                                                                                                                            Я выбрал из вашего комментария, как Вы написали возможность добавления автоматически каждому слайдеру id:
                                                                                                                                            document.querySelectorAll('.slider').forEach(function(item, index){ 
                                                                                                                                              item.setAttribute('slider-id', index);
                                                                                                                                              multiItemSlider('[slider-id="'+ index +'"]');
                                                                                                                                            });
                                                                                                                                            
                                                                                                                                            В данном случае возникают ошибки:
                                                                                                                                            1. На первом слайде добавляется 2 раза <ol> и кнопки пагинации у этого слайдера отрабатывают не корректно.
                                                                                                                                            2. Сейчас у всех слайдеров пропала возможность автосмены слайдов.
                                                                                                                                            Как задать в таком случае условие, чтобы допустим у слайда с id=«0» и с id=«2» была возможность автоматической смены слайдов (зацикленная)?

                                                                                                                                            PS. Я выбрал пример с пагинацией, добавил вашу возможность:

                                                                                                                                            1. Зацикливания.
                                                                                                                                            2. Прокрутку слайдов touch.
                                                                                                                                            Благодарю Вас за помощь. Заранее большое спасибо

                                                                                                                                            ВЕСЬ КОД ПРИМЕРА:
                                                                                                                                            <div class="slider">...</div>
                                                                                                                                            <div class="slider">...</div>
                                                                                                                                            <div class="slider">...</div> 
                                                                                                                                            
                                                                                                                                            <script>
                                                                                                                                            ...
                                                                                                                                            document.querySelectorAll('.slider').forEach(function(item, index){ 
                                                                                                                                              item.setAttribute('id', index);
                                                                                                                                              multiItemSlider('[id="'+ index +'"]');
                                                                                                                                            });
                                                                                                                                            // Инициализация слайдера осуществляется следующим образом
                                                                                                                                            var slider = multiItemSlider('.slider', {
                                                                                                                                              isCycling: true
                                                                                                                                            });
                                                                                                                                            </script>
                                                                                                                                            
                                                                                                                                            1. Александр Мальцев
                                                                                                                                              20 апреля 2020, 15:32
                                                                                                                                              Здравствуйте!
                                                                                                                                              Это можно сделать так:
                                                                                                                                              1. Сначала просто добавьте к слайдерам id:
                                                                                                                                              document.querySelectorAll('.slider').forEach(function (item, index) {
                                                                                                                                                item.id = 'slider-' + index;
                                                                                                                                              });
                                                                                                                                              
                                                                                                                                              2. Инициализируйте их каждый так, как вам это необходимо (через id):
                                                                                                                                              var slider0 = multiItemSlider('#slider-0', {
                                                                                                                                                isCycling: true
                                                                                                                                              });
                                                                                                                                              var slider1 = multiItemSlider('#slider-1', {
                                                                                                                                                isCycling: false
                                                                                                                                              });
                                                                                                                                              var slider2 = multiItemSlider('#slider-2', {
                                                                                                                                                isCycling: true
                                                                                                                                              });
                                                                                                                                              
                                                                                                                                              1. Mihail
                                                                                                                                                20 апреля 2020, 17:17
                                                                                                                                                Александр добрый день! Все заработало!!! Спасибо Вам огромное!!! Первый и второй пункт заработал. Скажите пожалуйста этот скрипт никак не конфликтует с 1С Битриксом!? Изначально не сразу срабатывает. Спустя время как будто скрипт адаптируется… Я когда его в первый раз поставил без дополнительных возможностей он отказывался работать и кнопки погинации не работали. Отработали чуть позже. Сейчас в этом посте Ваш ответ на пункт 1 и 2 тоже исправил не сразу отработал скрипт, а спустя время. При чем КЭШ чистил. Скрипт подключен после библиотеки JQUERY в самом низу. Понимаю что этот скрипт никак не задействован с jquery, но все же может кто то писал до меня Вам про аналогичные проблемы с 1 С Битрикс!??? СПАСИБО ЕЩЕ РАЗ!!!
                                                                                                                                                1. Александр Мальцев
                                                                                                                                                  22 апреля 2020, 16:37
                                                                                                                                                  Здравствуйте!
                                                                                                                                                  Оберните весь код, включаю функцию в следующую конструкцию:
                                                                                                                                                  (function(){
                                                                                                                                                    ...
                                                                                                                                                  })();
                                                                                                                                                  
                                                                                                                                                  Это исключит создание переменных в глобальной области видимости. Если есть какие-то конфликты, то это должно их убрать.
                                                                                                                                                  Также попробуйте перезагрузить страницу с помощью Ctrl+F5. Это позволит сделать это с очисткой её кэша в браузере.
                                                                                                                                                  1. Mihail
                                                                                                                                                    24 апреля 2020, 18:39
                                                                                                                                                    Огромное Вам Спасибо!!! Это действительно помогло
                                                                                                                                            2. Артём Валерьевич
                                                                                                                                              10 апреля 2020, 13:49
                                                                                                                                              Здравствуйте! Спасибо за статью! В веб-разработке не силен, поэтому прошу помощи.
                                                                                                                                              Интересует два вопроса:
                                                                                                                                              1. Возможно ли добавить подписи под изображениями?
                                                                                                                                              2. При подключении слайдера появляется куча пустого места под футером. Скрины прилагаю
                                                                                                                                              2.1. проблемная страница
                                                                                                                                              2.2. нормальная страница
                                                                                                                                              1. Александр Мальцев
                                                                                                                                                12 апреля 2020, 14:25
                                                                                                                                                Здравствуйте!
                                                                                                                                                Конечно, можно. Вот пример.
                                                                                                                                                Если под слайдером появляется пустое место, то нужно посмотреть стили. Может у вас какие-нибудь элементы имеют такое же названия классов как используются в этом слайдере. Тут нужно открыть инспектор элементов в браузере и посмотреть, из-за чего это.
                                                                                                                                              2. Данияр
                                                                                                                                                03 апреля 2020, 21:58
                                                                                                                                                Здравствуйте!

                                                                                                                                                Опять вернулся к этому классному слайдеру)

                                                                                                                                                В общем, мне надо сделать три вещи на слайдере состоящим из одного слайда на весь экран:
                                                                                                                                                1. Поставить номер слайда формата 01/03, чтобы он оставался при изменении слайдера;
                                                                                                                                                2. Сделать как-бы заполнение индикатора в зависимости от времени до завершения слайда. То есть чтобы индикатор заполнялся цветом в зависимости от времени;
                                                                                                                                                3. Поставить анимацию переходов как здесь: codepen.io/ashthornton/full/ZmxaWv (там же и меняются цифры также как мне и надо).

                                                                                                                                                Можете посоветовать пожалуйста как это можно выполнить и можно ли вообще это сделать с текущим слайдером?
                                                                                                                                                1. Александр Мальцев
                                                                                                                                                  12 апреля 2020, 14:30
                                                                                                                                                  Здравствуйте!
                                                                                                                                                  Слайдер имеет исходные коды, вам никто не запрещает их изменять. Конечно всё это можно выполнить, но это потребует значительного изменения кода.
                                                                                                                                                2. Roman Bizikin
                                                                                                                                                  01 апреля 2020, 00:29
                                                                                                                                                  Прекрасный слайдер, ввожу в работу и есть задача с которой никак не могу разобраться в виду слабого понимания JS, а именно привести слайдер к такому виду: скриншот.
                                                                                                                                                  я модифицировал код, чтобы получать активный объект по центру при перелистывании, но теперь мне нужно изменить ширину активного элемента, вот эта задача и не выходит
                                                                                                                                                  есть параметры ширины, которые определяют кол-во отображаемых элементов:
                                                                                                                                                  flex: 0 0 33.33%;
                                                                                                                                                   max-width: 33.33%;
                                                                                                                                                  пробовал дать активному элементу 50%, а остальным 25% соответственно, получается брак, т.к. свойство transition при вычислении выбрасывает элементы за пределы экрана, подскажите пожалуйста какое может быть решение
                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                    12 апреля 2020, 14:41
                                                                                                                                                    Спасибо! Изменить ширину слайдов не сложно осуществить. Но, на сколько в этом случае должен выполняться сдвиг слайдов? Здесь уже не получиться это выполнять на фиксированную величину. Может вместо сдвига, использовать эффект появления слайдов или какой-то другой?
                                                                                                                                                  2. Alex
                                                                                                                                                    30 марта 2020, 23:10
                                                                                                                                                    Александр, вечер добрый. Вопрос такого плана, как можно сделать слайдер от маленькой до большой картинки. Допустим у нас есть 3 картинки одна: 150x150, вторая 300x300, третья 500x500. Слайдер начинает движение и картинку 150x150 помещает в в див где была 300x300 картинка, при этом сохраняя размеры дива увеличивая 150x150. ну и т.д. Прикладываю пример, ну и да, они не должны быть в одной линии должны находится диагонально.
                                                                                                                                                    скриншот
                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                      03 апреля 2020, 07:48
                                                                                                                                                      Добрый день!
                                                                                                                                                      Это можно выполнить, например, через CSS анимацию и абсолютное позиционирование. На каждой ключевой точке определяете соответственно размеры и положение слайда.
                                                                                                                                                      Пример, в котором показано, как можно сделать такую анимацию: slider-example-1
                                                                                                                                                      1. Alex
                                                                                                                                                        03 апреля 2020, 12:35
                                                                                                                                                        Спасибо!
                                                                                                                                                    2. Дмитрий
                                                                                                                                                      22 марта 2020, 12:47
                                                                                                                                                      Александр, добрый день, после установки слайдера видимо возник конфликт скриптов, поможете разобраться?
                                                                                                                                                      Куда можно отправить ссылку на страницу с проблемой?
                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                        22 марта 2020, 13:33
                                                                                                                                                        Добрый день! Email есть в футере сайта.
                                                                                                                                                      2. Алишер Пигалев
                                                                                                                                                        27 февраля 2020, 11:24
                                                                                                                                                        Доброго времени суток. Наткнулся недавно на ваш сайт и он мне уже во многом помог. Большое спасибо.
                                                                                                                                                        Хотелось бы получить вашего совета.
                                                                                                                                                        Столкнулся с ситуацией что на странице нужно 3 слайдера. Слайдеры работают исправно, с зацикливанием и автозаменой слайдов. Но в одном слайдере нужно чтобы выводился только один элемент, а в остальных двух уже установленное количество. Пытался сделать через ID и через дублирование класса slider__item в slider__item1, но все равно сбиваются все элементы слайдеров (через ID просто улетает навигация и слегка меняются размеры элементов, через дублирование (для лучшего понимания продублировал все функции и смежные классы для slider_item) ломается полностью автозамена слайдов и навигация).
                                                                                                                                                        Подскажите пожалуйста, как лучше это можно реализовать?
                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                          29 февраля 2020, 14:10
                                                                                                                                                          Вроде бы всё просто.
                                                                                                                                                          Можно, например, к слайдерам добавить id и прописать следующие стили:
                                                                                                                                                          #slider-1 .slider__item {
                                                                                                                                                            flex: 0 0 100%;
                                                                                                                                                            max-width: 100%;
                                                                                                                                                          }
                                                                                                                                                          #slider-2 .slider__item {
                                                                                                                                                            flex: 0 0 50%;
                                                                                                                                                            max-width: 50%;
                                                                                                                                                          }
                                                                                                                                                          #slider-3 .slider__item {
                                                                                                                                                            flex: 0 0 33.333333%;
                                                                                                                                                            max-width: 33.333333%;
                                                                                                                                                          }
                                                                                                                                                          
                                                                                                                                                          Вот ссылка на пример: 3 слайдера на одной странице
                                                                                                                                                          1. Алишер Пигалев
                                                                                                                                                            02 марта 2020, 05:36
                                                                                                                                                            Огромное спасибо) Пробовал делать через ИД, но видимо где-то допускал ошибку и плыла вся страница. Теперь все работает) Процветания вам и вашему сайту)
                                                                                                                                                        2. Dannik
                                                                                                                                                          20 февраля 2020, 15:46
                                                                                                                                                          Здравствуйте! В комментариях был ответ по поводу свайпа слайдера (пример itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-touch), к сожалению свайп работает только в мобильниках, возможно ли это сделать дэсктопах? Было бы здорово, т.к пользователи уже привыкли тянуть каждый слайд
                                                                                                                                                          1. Dannik
                                                                                                                                                            20 февраля 2020, 15:53
                                                                                                                                                            На сколько я понял, за данный функционал отвечает вот этот код:
                                                                                                                                                            // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                                                                                                                                                            _sliderControls.forEach(function (item) {
                                                                                                                                                              item.addEventListener('click', _controlClick);
                                                                                                                                                            });
                                                                                                                                                            _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');
                                                                                                                                                              }
                                                                                                                                                            });
                                                                                                                                                            
                                                                                                                                                            1. Dannik
                                                                                                                                                              20 февраля 2020, 15:54
                                                                                                                                                              Вот только не понятно как включить тач на десктопе
                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                22 февраля 2020, 14:46
                                                                                                                                                                На декстопе нет touch событий. Чтобы это реализовать на декстопе нужно использовать какие-то другие события, например, mouseup и mousedown:
                                                                                                                                                                _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');
                                                                                                                                                                  }
                                                                                                                                                                });
                                                                                                                                                                
                                                                                                                                                                Пример: Слайдер со свайпом на декстопах
                                                                                                                                                          2. Dannik
                                                                                                                                                            18 февраля 2020, 12:06
                                                                                                                                                            Спасибо огромное за слайдер! Подскажите пожалуйста, как сделать так что бы пользователь всегда видел половинки картинок предыдущих и следующих слайдов. Хотел сделать слайдер товаров как на www.toyota.com/
                                                                                                                                                            Менял, подкручивал css, но что то не выходит. Пока не особо силен в верстке.
                                                                                                                                                            Заранее благодарен!
                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                              18 февраля 2020, 15:27
                                                                                                                                                              Можно сделать дополнительную обёртку для слайдов и установить ей padding-left и padding-right.
                                                                                                                                                              Пример слайда с частичным отображением предыдущего и следующего слайдов.
                                                                                                                                                              1. Dannik
                                                                                                                                                                18 февраля 2020, 16:16
                                                                                                                                                                Спасибо Вам IT шеф! Желаю здравия Вам и Вашим близким!
                                                                                                                                                            2. Данияр
                                                                                                                                                              15 февраля 2020, 07:03
                                                                                                                                                              Александр здравствуйте!
                                                                                                                                                              Во-первых, хочу сказать Вам огромное спасибо за такой грамотный подход к реализации слайдера. Это действительно очень круто реализовано и самое главное просто и содержит всё необходимое, спасибо!
                                                                                                                                                              Во-вторых, у меня есть вопрос, который я не знаю как решить. В общем, я на одной странице использую два слайдера, они полностью работают. Но там есть проблема с индикаторами, почему-то у первого слайдера отображаются два индикатора (можно увидеть это в коде) и визуально при перелистывании слайдов индикатор меняется, но первый продолжает гореть. В коде отображается так, что один индикатор стоит поверх другого и если его удалить, то всё норм, но вопрос как это реализовать и почему такое происходит?

                                                                                                                                                              Ссылка на полный код: https://codepen.io/asdasdasdasd111/pen/oNXbKxQ
                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                16 февраля 2020, 16:25
                                                                                                                                                                Здравствуйте, спасибо за отзыв!
                                                                                                                                                                Вам необходимо каждый слайдер инициализировать всего один раз. В вашем коде необходимо удалить или закомментировать первый вызов, т.к. он тоже активирует первый слайдер.
                                                                                                                                                                ...
                                                                                                                                                                /* var slider = multiItemSlider('.slider', {
                                                                                                                                                                  isCycling: true
                                                                                                                                                                }); */
                                                                                                                                                                	
                                                                                                                                                                var slider1 = multiItemSlider('#slider-1');
                                                                                                                                                                var slider2 = multiItemSlider('#slider-2');
                                                                                                                                                                
                                                                                                                                                                И если нужно добавить параметр isCycling к первому слайдеру, то следует сделать так:
                                                                                                                                                                ...
                                                                                                                                                                /* var slider = multiItemSlider('.slider', {
                                                                                                                                                                  isCycling: true
                                                                                                                                                                }); */
                                                                                                                                                                	
                                                                                                                                                                var slider1 = multiItemSlider('#slider-1', {
                                                                                                                                                                  isCycling: true
                                                                                                                                                                });
                                                                                                                                                                var slider2 = multiItemSlider('#slider-2');
                                                                                                                                                                
                                                                                                                                                                1. Данияр
                                                                                                                                                                  16 февраля 2020, 21:27
                                                                                                                                                                  Спасибо огромное! Всё получилось, спасибо Вам! Успехов в развитии!)
                                                                                                                                                              2. Ольга
                                                                                                                                                                12 февраля 2020, 20:10
                                                                                                                                                                Добрый вечер!
                                                                                                                                                                Не совсем понятно как добавить дополнительный слайд. К примеру мне необходимо не 4, а 5 слайдов.
                                                                                                                                                                1. Ольга
                                                                                                                                                                  12 февраля 2020, 21:58
                                                                                                                                                                  Разобралась сама=)
                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                    13 февраля 2020, 06:38
                                                                                                                                                                    Привет! Отлично!
                                                                                                                                                                2. ILIA LITVINOV
                                                                                                                                                                  12 февраля 2020, 00:07
                                                                                                                                                                  Александр, здравствуйте.

                                                                                                                                                                  Спасибо Вам за такой гибкий слайдер.

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

                                                                                                                                                                  Но если между слайдами добавить вместо padding — margin, скрипт не воспринимает эти отступы и отступает на ширину самого слайда игнорируя margin. С-но все сдвигается не полностью.

                                                                                                                                                                  Есть какой-то вариант заставить скрипт видеть margin между слайдами?:)
                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                    14 февраля 2020, 15:03
                                                                                                                                                                    Здравствуйте.
                                                                                                                                                                    Создайте дополнительную обёртку для каждого слайда. После этого можно будет настраивать отступы с помощью margin:
                                                                                                                                                                    <div class="slider__item">
                                                                                                                                                                      <div style="height: 250px;">
                                                                                                                                                                        <div style="background: orange;">
                                                                                                                                                                          1
                                                                                                                                                                        </div>
                                                                                                                                                                      </div>
                                                                                                                                                                    </div>
                                                                                                                                                                    
                                                                                                                                                                    Например, установим margin отступы по 10px:
                                                                                                                                                                    .slider__item>div>div {
                                                                                                                                                                      margin: 10px;
                                                                                                                                                                    }
                                                                                                                                                                    
                                                                                                                                                                    Слайдер, отступы в котором для слайдов настроены с помощью margin

                                                                                                                                                                    Установку положения слайда при желании также можно настроить с помощью техники сочетания относительного и абсолютного позиционирования:
                                                                                                                                                                    .slider__item>div {
                                                                                                                                                                      height: 250px;
                                                                                                                                                                      position: relative;
                                                                                                                                                                    }
                                                                                                                                                                    .slider__item>div>div {
                                                                                                                                                                      position: absolute;
                                                                                                                                                                      top: 10px;
                                                                                                                                                                      left: 10px;
                                                                                                                                                                      right: 10px;
                                                                                                                                                                      bottom: 10px;
                                                                                                                                                                    }
                                                                                                                                                                    
                                                                                                                                                                  2. kaduk yevheniy
                                                                                                                                                                    10 февраля 2020, 22:28
                                                                                                                                                                    Добрый вечер Александр. Изначально хотел поблагодарить вас и сказать вам огромное спасибо за всю проделанную вами работу! очень много интересных статей. и у меня вопрос если можно ?!
                                                                                                                                                                    а возможно ли сделать так чтобы под вашим слайдером были видны минимизированные фото, и средняя показывалась на слайдере.
                                                                                                                                                                    спасибо за раннее в любом случае.
                                                                                                                                                                    визуальный пример приведен ниже.
                                                                                                                                                                    Евгений
                                                                                                                                                                    src=«itchief.ru/assets/uploadify/b/f/6/bf6dc956cb54483da64e55d544a26d69.jpg» />
                                                                                                                                                                    1. Vlad
                                                                                                                                                                      29 января 2020, 19:27
                                                                                                                                                                      извините за глупый вопрос, а что за отдельный код инициализации скрипта, например
                                                                                                                                                                      var slider = multiItemSlider('.slider')
                                                                                                                                                                      ?
                                                                                                                                                                      Его обязательно размещать? Если да, то где?
                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                        30 января 2020, 04:36
                                                                                                                                                                        Очень много компонентов на веб-страницах построены с использованием JavaScript. JavaScript – это код, который добавляет к компоненту определённую логику. В большинстве случаев эта логика организована в виде определённой функции, в данном случае, с помощью multiItemSlider.

                                                                                                                                                                        Функция само по себе ничего не делает, пока её не запустишь. Инициализация в этом случае – это и есть запуск этой функции. Эта функция может принимать различные аргументы. Первый аргумент обязательный. С помощью него необходимо задать элемент, который на странице будет каруселью. Другими словами, элемент, который содержит определённую HTML структуру этой карусели. Второй аргумент – это дополнительные настройки для карусели, указываются в формате объекта.

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

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

                                                                                                                                                                        Инициализацию слайдера выполнять конечно нужно, если хотите чтобы он работал.
                                                                                                                                                                        Обычно все скрипты подключают к странице перед закрывающим тегом body. Данный код необходимо разместить после подключения js-скрипта слайдера.
                                                                                                                                                                        1. Vlad
                                                                                                                                                                          30 января 2020, 08:53
                                                                                                                                                                          спасибо за развернутый ответ, теперь понятно.
                                                                                                                                                                          П.С. у вас шикарный навороченный сайт, сразу видна рука айтишника ) Особенно мне понравилось меню в мобильном с прокруткой. Было бы здорово, если бы вы написали статью, как это сделать, я думаю многим было бы интересно.
                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                            30 января 2020, 14:49
                                                                                                                                                                            Спасибо! Как сделать такое меню напишу.
                                                                                                                                                                      2. Vlad
                                                                                                                                                                        28 января 2020, 17:06
                                                                                                                                                                        Александр, прошу помощи!
                                                                                                                                                                        Как сделать так, чтобы слайдер был только в мобильной версии?
                                                                                                                                                                        делаю вот такой элемент из 4 блоков в табах (табы сделал сегодня по вашей статье): itchief.ru/assets/uploadify/f/a/e/faee69f9007c44356567ddb3d7ef893c.jpg
                                                                                                                                                                        В ПК версии я хочу, чтобы эти 4 блока оставались без карусели.
                                                                                                                                                                        А вот в мобильной чтобы оставалось 1.5-2 блока, а остальное было справа в горизонтальной прокрутке, и чтобы заголовки табов тоже были в карусели. Вот так:
                                                                                                                                                                        itchief.ru/assets/uploadify/1/b/2/1b25962e7742738e508fccdc30848d54.jpg

                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                          29 января 2020, 16:58
                                                                                                                                                                          Чтобы табы выполнить с прокруткой, их (сами вкладки) необходимо поместить в контейнер и добавить к нему следующее CSS-свойство:
                                                                                                                                                                          overflow-x: auto;
                                                                                                                                                                          
                                                                                                                                                                          Это основной принцип, детальная реализация зависит от разметки.

                                                                                                                                                                          Для реализации такой карусели возможно потребуется написать дополнительные CSS-правила для ПК-версии и мобильной, например с использованием медиа-запросов.
                                                                                                                                                                          Чтобы блоки оставались без карусели на ПК-версии, можете просто активировать её только для мобильных устройств:
                                                                                                                                                                          if (window.matchMedia('screen and (max-width: 543px)').matches) {
                                                                                                                                                                            multiItemSlider('.slider');
                                                                                                                                                                          }
                                                                                                                                                                          
                                                                                                                                                                        2. Руслан
                                                                                                                                                                          27 января 2020, 12:15
                                                                                                                                                                          Добрый день.
                                                                                                                                                                          Буквально вчера открыл для себя Ваш сайт — и возрадовался. Т.к. уже с первых минут нашёл на нем то, что мне нужно (о слайдере)!
                                                                                                                                                                          Прочитал все коментарии (чтобы не повторить вопрос), но не нашел ответа на следующий вопрос.
                                                                                                                                                                          По умолчанию на слайдере есть один условный блок (одна картинка + текст к ней). И слайдер при нажатии на кнопки управления слайдером сдвигает один блок влево или вправо.
                                                                                                                                                                          На моём варианте Вашего слайдера 4 блока. И моя задача состоит в том, чтобы при нажатии на кнопки управления соответсвующий сдвиг происходил на 4 блока (либо на ширину слайдера — не знаю, как правильно сформулировать, но, думаю, смысл Вы поняли). Подскажите, пожалуйста, как это реализовать. Заранее спасибо
                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                            27 января 2020, 14:00
                                                                                                                                                                            Привет! Спасибо за отзыв.
                                                                                                                                                                            Для этого можно в скрипт добавить следующее:
                                                                                                                                                                            var count = Math.round(100 / _step);
                                                                                                                                                                            while (count > 0) {
                                                                                                                                                                              _transformItem(direction);
                                                                                                                                                                              count--;
                                                                                                                                                                            }
                                                                                                                                                                            
                                                                                                                                                                            Т.е. определить количество слайдов, одновременно отображающихся на странице, а затем вызвать _transformItem это же количество раз.
                                                                                                                                                                            Пример доступен в песочнице по этой ссылке.
                                                                                                                                                                          2. Kasper
                                                                                                                                                                            26 декабря 2019, 12:53
                                                                                                                                                                            Добрый день.

                                                                                                                                                                            Александр, очень не хочется прибегать к jquery, ваш скрипт понравился, но никак не удается его «допилить», чтобы получить нужный мне результат: ссылка на картинку.
                                                                                                                                                                            Задача состоит реализовать карусель «по кругу» для мобильной версии сайта, очень похожую на ваш вариант «Слайдер с тремя активными слайдами», но отличие в том, что средняя картинка будет всегда центрироваться и от неё будет некоторое расстояние между ней и первой/третьей картинками. Не удается через js задать, чтобы элемент :nth-child(2) в динамике давал margin по бокам и накладывал прямоугольник с тенью на 1-ю и 3-ю картинку на экране.

                                                                                                                                                                            Можете подсказать?
                                                                                                                                                                            1. Kasper
                                                                                                                                                                              20 января 2020, 17:50
                                                                                                                                                                              Настроил что хотел. Пришлось вставлять «пыстышку» и указывать ей padding по тому методу, который у вас указан в другой ветке (расчет высоты по соотношению сторон на основе % от ширины). Все хорошо.
                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                21 января 2020, 12:38
                                                                                                                                                                                Отлично!
                                                                                                                                                                              2. Александр Мальцев
                                                                                                                                                                                27 декабря 2019, 14:41
                                                                                                                                                                                Привет! Как это реализовать можно посмотреть в этом примере.
                                                                                                                                                                                1. Kasper
                                                                                                                                                                                  19 января 2020, 14:46
                                                                                                                                                                                  Добрый день. Александр, вопрос смежный, но не конкретно про ваш слайдер.

                                                                                                                                                                                  Я поместил ваш слайдер в отдельный блок, задал ему position: absolut, ширину 100%, background-size: 100%, а картинки привязал в css к div-ам через background: url("..").

                                                                                                                                                                                  Слайдер работает прекрасно. Но в параллельном блоке есть статичная информацию с меню, кнопками и текстом (два блока в родителе: слайдер и статичный блок с текстом поверх и кнопками). И у меня никак не получается подогнать грамотно высоту статичного блока под высоту слайдера. Пробовал через min-height: ...vw, но на ipad все уплывает. Подскажите, пожалуйста, как в таком случае указать высоту блока равную высоте параллельного блока от одного родителя с учетом того, что этот параллельный блок (слайдер) размещен через absolut…
                                                                                                                                                                                  1. Kasper
                                                                                                                                                                                    27 декабря 2019, 16:11
                                                                                                                                                                                    Александр, я вам безумно благодарен! Уже настроил дизайн под слайдер slick, но все равно буду переделывать под вашу реализацию. Спасибо большое!
                                                                                                                                                                                2. AV
                                                                                                                                                                                  24 декабря 2019, 17:35
                                                                                                                                                                                  Александр добрый день! Давно использую ваш слайдер — все прекрасно работает! Но вот возникла потребность в импользовании пагинации. Посмотрел отдельную тему с таковым сладером — понял, что для меня он не очень удобен. Хотелось бы иметь один полностью универсальный слайдер — как в этом примере, но с вожможностью подключения пагинации в html, также как стрелки для прокрутки влево-вправо. Как можно это реализовать?
                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                    26 декабря 2019, 14:00
                                                                                                                                                                                    Привет!
                                                                                                                                                                                    Это сделать очень просто.
                                                                                                                                                                                    Для этого нужно добавить в слайдер после кнопок-стрелок следующий код:
                                                                                                                                                                                    <ol class="slider__indicators">
                                                                                                                                                                                      <li class="active" data-slide-to="0"></li>
                                                                                                                                                                                      <li data-slide-to="1"></li>
                                                                                                                                                                                      <li data-slide-to="2"></li>
                                                                                                                                                                                      <li data-slide-to="3"></li>
                                                                                                                                                                                      <li data-slide-to="4"></li>
                                                                                                                                                                                      <li data-slide-to="5"></li>
                                                                                                                                                                                      <li data-slide-to="6"></li>
                                                                                                                                                                                    </ol>
                                                                                                                                                                                    
                                                                                                                                                                                    В JavaScript из функции _addIndicators удалить всё кроме одной строчки:
                                                                                                                                                                                    var _addIndicators = function () {
                                                                                                                                                                                      _indicatorItems = _mainElement.querySelectorAll('.slider__indicators > li')
                                                                                                                                                                                    }
                                                                                                                                                                                    
                                                                                                                                                                                    Этот пример доступен по этой ссылке
                                                                                                                                                                                    1. AV
                                                                                                                                                                                      26 декабря 2019, 22:54
                                                                                                                                                                                      Да, действительно просто! Спасибо!
                                                                                                                                                                                  2. kadochnikov_k
                                                                                                                                                                                    10 декабря 2019, 16:29
                                                                                                                                                                                    Добрый день! Огромное спасибо за слайдер! Подскажите, как обнулять таймер листания при перелистывании слайдов пальцем? Сейчас из-за того, что таймер не обнуляется, происходят двойные перелистывания.
                                                                                                                                                                                    1. kadochnikov_k
                                                                                                                                                                                      10 декабря 2019, 17:40
                                                                                                                                                                                      Уже разобрался) Еще вопрос: можно ли сделать так, чтобы слайды не перелистывались, если все слайды сейчас на экране?
                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                        11 декабря 2019, 15:36
                                                                                                                                                                                        Можно просто не инициализировать данный блок как слайдер. Т.е. перед тем, как это выполнить проверить умещаются ли все слайды на экран и если да, то ничего не делать и установить .slider__control значение display равное none:
                                                                                                                                                                                        var sliderSelector = '.slider';
                                                                                                                                                                                        var sliderElem = document.querySelector('.slider');
                                                                                                                                                                                        if (sliderElem.querySelector('.slider__item').getBoundingClientRect().width * sliderElem.querySelectorAll('.slider__item').length !== sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width) {
                                                                                                                                                                                          var slider = multiItemSlider('.slider');
                                                                                                                                                                                        } else {
                                                                                                                                                                                          // удалить slider__control_show
                                                                                                                                                                                          var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                                                                                                                                          for (var i = 0; i < sliderControls.length; i++) {
                                                                                                                                                                                            sliderControls[i].style.display = 'none';
                                                                                                                                                                                          }
                                                                                                                                                                                        }
                                                                                                                                                                                        
                                                                                                                                                                                        Пример доступен по этой ссылке.
                                                                                                                                                                                        1. kadochnikov_k
                                                                                                                                                                                          12 декабря 2019, 10:31
                                                                                                                                                                                          Работает, спасибо! Только возникла такая сложность: в слайдере с автоматической сменой слайдов стрелочки пропадают, но листаться они не перестают, попробовал дописать код, но не помогло
                                                                                                                                                                                          var sliderSelector = '.slider';
                                                                                                                                                                                              var sliderElem = document.querySelector('.slider');
                                                                                                                                                                                              if (sliderElem.querySelector('.slider__item').getBoundingClientRect().width * sliderElem.querySelectorAll('.slider__item').length >= sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width) {
                                                                                                                                                                                                var slider = multiItemSlider('.slider');
                                                                                                                                                                                              } else {
                                                                                                                                                                                                // удалить slider__control_show
                                                                                                                                                                                                var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                                                                                                                                                for (var i = 0; i < sliderControls.length; i++) {
                                                                                                                                                                                                  sliderControls[i].style.display = 'none';
                                                                                                                                                                                                }
                                                                                                                                                                                                  var slider = multiItemSlider('.slider', {
                                                                                                                                                                                              isCycling: false
                                                                                                                                                                                              })
                                                                                                                                                                                              }
                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                            12 декабря 2019, 13:59
                                                                                                                                                                                            Немного не так.
                                                                                                                                                                                            Код будет таким:
                                                                                                                                                                                            var sliderSelector = '.slider';
                                                                                                                                                                                            var sliderElem = document.querySelector(sliderSelector);
                                                                                                                                                                                            if (sliderElem.querySelector('.slider__item').getBoundingClientRect().width * sliderElem.querySelectorAll('.slider__item').length > sliderElem.querySelector('.slider__wrapper').getBoundingClientRect().width) {
                                                                                                                                                                                                // слайдов больше, чем на экране
                                                                                                                                                                                                var slider = multiItemSlider(sliderSelector, {
                                                                                                                                                                                                    isCycling: true
                                                                                                                                                                                                });
                                                                                                                                                                                            } else {
                                                                                                                                                                                                // слайдов меньше, чем на экране
                                                                                                                                                                                                // удалить slider__control_show
                                                                                                                                                                                                var sliderControls = sliderElem.querySelectorAll('.slider__control');
                                                                                                                                                                                                for (var i = 0; i < sliderControls.length; i++) {
                                                                                                                                                                                                  sliderControls[i].style.display = 'none';
                                                                                                                                                                                                }
                                                                                                                                                                                            }
                                                                                                                                                                                            
                                                                                                                                                                                            1. kadochnikov_k
                                                                                                                                                                                              13 декабря 2019, 13:43
                                                                                                                                                                                              Огромное спасибо! Все работает)
                                                                                                                                                                                    2. Дмитрий
                                                                                                                                                                                      05 декабря 2019, 15:40
                                                                                                                                                                                      Доброго дня, подскажите в чем может быть проблема, подключил css и js файлы, в отдельном модуле прописал слайдер, но при инициализации на сайте выдает ошибку slider.js:23 Uncaught TypeError: Cannot read property 'querySelector' of null
                                                                                                                                                                                      return function (selector, config) {
                                                                                                                                                                                              var
                                                                                                                                                                                                _mainElement = document.querySelector(selector),
                                                                                                                                                                                                _sliderWrapper = _mainElement.querySelector('.slider__wrapper'),/*на эту строку ругается*/
                                                                                                                                                                                                _sliderItems = _mainElement.querySelectorAll('.slider__item'),
                                                                                                                                                                                                _sliderControls = _mainElement.querySelectorAll('.slider__control'),
                                                                                                                                                                                                _sliderControlLeft = _mainElement.querySelector('.slider__control_left'),
                                                                                                                                                                                                _sliderControlRight = _mainElement.querySelector('.slider__control_right'),
                                                                                                                                                                                      
                                                                                                                                                                                      1. Дмитрий
                                                                                                                                                                                        06 декабря 2019, 09:38
                                                                                                                                                                                        Проблему решил, дело было в ранней инициализации js скрипта.
                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                          06 декабря 2019, 13:24
                                                                                                                                                                                          Отлично!
                                                                                                                                                                                      2. Тимур Хабибуллин
                                                                                                                                                                                        28 ноября 2019, 08:44
                                                                                                                                                                                        Доброго времени суток. Не могу понять, как реализовать слайдер с вкладками. Примеры видел реализации от простых для сложных, который уже тут есть. Но все равно не хочет работать.
                                                                                                                                                                                        Ссылка
                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                          29 ноября 2019, 13:16
                                                                                                                                                                                          Привет!
                                                                                                                                                                                          Это можно решить с помощью следующего кода:
                                                                                                                                                                                          var slider1, slider2, slider3;
                                                                                                                                                                                          var tabs = document.querySelectorAll('#tab_1, #tab_2, #tab_3');    
                                                                                                                                                                                          var tabChecked = document.querySelector('.tabs > input:checked');
                                                                                                                                                                                          var initSliders = function(id) {
                                                                                                                                                                                            if (id === 'tab_1' && slider1 === undefined) {
                                                                                                                                                                                              slider1 = multiItemSlider('#slider-1');
                                                                                                                                                                                            } else if (id === 'tab_2' && slider2 === undefined) {
                                                                                                                                                                                              slider2 = multiItemSlider('#slider-2');
                                                                                                                                                                                            } else if (id === 'tab_3' && slider3 === undefined) {
                                                                                                                                                                                              slider3 = multiItemSlider('#slider-3');
                                                                                                                                                                                            }
                                                                                                                                                                                          }
                                                                                                                                                                                          if (tabChecked) {
                                                                                                                                                                                            initSliders(tabChecked.id);
                                                                                                                                                                                          }  
                                                                                                                                                                                          for (var i = 0; i < tabs.length; i++) {
                                                                                                                                                                                            tabs[i].addEventListener('change', function() {
                                                                                                                                                                                              initSliders(this.id);
                                                                                                                                                                                            })
                                                                                                                                                                                          }
                                                                                                                                                                                          
                                                                                                                                                                                          Ссылка на пример
                                                                                                                                                                                        2. Igor
                                                                                                                                                                                          25 ноября 2019, 11:30
                                                                                                                                                                                          доброго времени суток! спасибо за Ваши труды)
                                                                                                                                                                                          Есть вопрос:
                                                                                                                                                                                          как отключить зацикливание в данном слайдере?
                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                            25 ноября 2019, 15:24
                                                                                                                                                                                            Привет! Спасибо за отзыв!
                                                                                                                                                                                            Ссылка на пример в котором нет зацикливания.
                                                                                                                                                                                            1. Igor
                                                                                                                                                                                              25 ноября 2019, 18:57
                                                                                                                                                                                              Спасибо, всё работает как часы :)
                                                                                                                                                                                          2. alyon
                                                                                                                                                                                            21 ноября 2019, 12:22
                                                                                                                                                                                            подскажите пожалуйста, как в слайдер несколькими активными слайдами добавить поля migx?
                                                                                                                                                                                            вывожу изображение так
                                                                                                                                                                                            [[getImageList?
                                                                                                                                                                                            &tvname=`photos`
                                                                                                                                                                                            &tpl=`tplCarouselItem`
                                                                                                                                                                                            ]]

                                                                                                                                                                                            код чанка
                                                                                                                                                                                            <div class="item [[+idx:is=`1` :then=`active`]]   ">
                                                                                                                                                                                              <img src="[[+image]]" alt="[[+title]]">
                                                                                                                                                                                                <div class="carousel-caption">
                                                                                                                                                                                                </div>
                                                                                                                                                                                            </div>
                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                              21 ноября 2019, 12:38
                                                                                                                                                                                              Откуда это?
                                                                                                                                                                                              Код должен быть таким:
                                                                                                                                                                                              <div class="slider">
                                                                                                                                                                                                <div class="slider__wrapper">
                                                                                                                                                                                                  [[getImageList?
                                                                                                                                                                                                    &tvname=`photos`
                                                                                                                                                                                                    &tpl=`tplCarouselItem`
                                                                                                                                                                                                  ]]
                                                                                                                                                                                                </div>
                                                                                                                                                                                                <a class="slider__control slider__control_left" href="#" role="button"></a>
                                                                                                                                                                                                <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
                                                                                                                                                                                              </div>
                                                                                                                                                                                              
                                                                                                                                                                                              Чанк tplCarouselItem:
                                                                                                                                                                                              <div class="slider__item">
                                                                                                                                                                                                <img src="[[+image]]" alt="[[+title]]">
                                                                                                                                                                                              </div>
                                                                                                                                                                                              
                                                                                                                                                                                              Кроме этого, конечно же не забыть подключить соответствующий CSS и JavaScript код.
                                                                                                                                                                                              1. alyon
                                                                                                                                                                                                21 ноября 2019, 12:55
                                                                                                                                                                                                спасибо!
                                                                                                                                                                                            2. kadochnikov_k
                                                                                                                                                                                              18 ноября 2019, 12:08
                                                                                                                                                                                              Здравствуйте! Подскажите, почему в этом примере не работает автоматическая смена слайдов?
                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                18 ноября 2019, 14:39
                                                                                                                                                                                                Привет!
                                                                                                                                                                                                В этом примере она отключена:
                                                                                                                                                                                                var slider = multiItemSlider('.slider', {
                                                                                                                                                                                                  isCycling: false
                                                                                                                                                                                                });
                                                                                                                                                                                                
                                                                                                                                                                                                Если нужно её включить, то установите параметру isCycling значение true:
                                                                                                                                                                                                var slider = multiItemSlider('.slider', {
                                                                                                                                                                                                  isCycling: true
                                                                                                                                                                                                });
                                                                                                                                                                                                
                                                                                                                                                                                                1. kadochnikov_k
                                                                                                                                                                                                  19 ноября 2019, 10:22
                                                                                                                                                                                                  Спасибо! Еще заметил проблему — на мобильном, если слайдер находится не по центру экрана (чуть выше или чуть ниже), то перестают срабатывать кнопки, индикаторы и слайды перестают перелистываться
                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                    19 ноября 2019, 14:11
                                                                                                                                                                                                    Спасибо, есть такое. Поправил этот момент.
                                                                                                                                                                                              2. Roman
                                                                                                                                                                                                10 ноября 2019, 16:24
                                                                                                                                                                                                Здравствуйте. Очень простой, а поэтому крутой, слайдер.
                                                                                                                                                                                                Столкнулся с такой проблемой: мне надо что бы на одной странице друг за другом шло несколько слайдеров, но когда сделал один и раскопировал его ниже, то работает только первый, а остальные (точная копия!) не хотят.
                                                                                                                                                                                                Подскажите, пожалуйста, в чём может быть дело и как это исправить?(
                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                  10 ноября 2019, 17:12
                                                                                                                                                                                                  Привет! Спасибо за отзыв. На странице можно поместить какое угодно количество слайдов.
                                                                                                                                                                                                  После этого их нужно инициализировать. Как это выполнить есть в этом комментарии.
                                                                                                                                                                                                  Если через цикл, то показано как это выполнить в этом комментарии.
                                                                                                                                                                                                  1. Roman
                                                                                                                                                                                                    11 ноября 2019, 19:25
                                                                                                                                                                                                    спасибо огромное!
                                                                                                                                                                                                  2. Roman
                                                                                                                                                                                                    10 ноября 2019, 16:36
                                                                                                                                                                                                    даже в примерах если вставить два раза блок contаiner, то работать будет только первый
                                                                                                                                                                                                  3. kadochnikov_k
                                                                                                                                                                                                    08 ноября 2019, 12:36
                                                                                                                                                                                                    Добрый день! Не могу разобраться со ссылками. Комментариях уже задавали вопрос, вы привели в качестве примера эту ссылку, но в этом примере проблема такая же — ссылки не открываются при нажатии по ним левой кнопкой мыши. Подскажете, что за это отвечает?
                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                      08 ноября 2019, 13:47
                                                                                                                                                                                                      Привет! А в каком браузере не работает? Обновил этот пример для наглядности. Попробовал в нескольких браузерах, всё отлично. Вот ещё один пример, здесь есть изображение и ссылка.
                                                                                                                                                                                                      1. kadochnikov_k
                                                                                                                                                                                                        11 ноября 2019, 11:10
                                                                                                                                                                                                        Спасибо, примеры работают. Но начинаются проблемы, когда добавляю индикаторы слайдов. Без индикаторов ссылки работают как положено, а с индикаторами открываются только в новых вкладках.
                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                          12 ноября 2019, 13:19
                                                                                                                                                                                                          Ага, есть такая проблема. Поправил JavaScript код во всех примерах в статье и комментариях. Теперь проблем с ссылками нет.
                                                                                                                                                                                                          Добавил новый пример. Его можно посмотреть здесь.
                                                                                                                                                                                                          1. kadochnikov_k
                                                                                                                                                                                                            13 ноября 2019, 12:58
                                                                                                                                                                                                            Огромное спасибо! А в какой части кода была проблема? Было бы интересно разобрать.
                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                              13 ноября 2019, 15:27
                                                                                                                                                                                                              Здесь можно посмотреть изменения.
                                                                                                                                                                                                              1. kadochnikov_k
                                                                                                                                                                                                                14 ноября 2019, 16:18
                                                                                                                                                                                                                Спасибо!
                                                                                                                                                                                                    2. kadochnikov_k
                                                                                                                                                                                                      07 ноября 2019, 15:30
                                                                                                                                                                                                      Большое спасибо за слайдер! А как добавить возможность свайпа слайдов?
                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                        07 ноября 2019, 15:47
                                                                                                                                                                                                        Как это добавить можно посмотреть в этом комментарии.
                                                                                                                                                                                                      2. Марина
                                                                                                                                                                                                        06 ноября 2019, 15:18
                                                                                                                                                                                                        Здравствуйте, подскажите что изменить в коде чтобы слайдер с зацикливанием и автоматической сменой слайдов стал вертикальным, возможно ли это?
                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                          07 ноября 2019, 15:45
                                                                                                                                                                                                          Привет! Да, можно это выполнить. Пример расположен здесь.
                                                                                                                                                                                                        2. NADEZHDA TABANKOVA
                                                                                                                                                                                                          05 ноября 2019, 21:52
                                                                                                                                                                                                          Александр, добрый вечер.
                                                                                                                                                                                                          Решила использовать Ваш плагин. Очень понравился.
                                                                                                                                                                                                          Есть ли возможность в нем листать при помощи swipe при использовании в мобильных версиях?
                                                                                                                                                                                                          Спасибо
                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                            06 ноября 2019, 13:42
                                                                                                                                                                                                            Привет! В этом комментарии есть пример с использованием touch событий.
                                                                                                                                                                                                          2. Денис
                                                                                                                                                                                                            02 ноября 2019, 12:53
                                                                                                                                                                                                            Александр, здравствуйте. Подскажите пожалуйста, как сделать так, чтобы изображение сохраняло своё соотношение сторон, а не соотношение слайдера?
                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                              03 ноября 2019, 11:14
                                                                                                                                                                                                              Привет! Если нужно что-то убрать, то делайте это. Вот пример слайдера с изображениями, в котором не установлены какие-то фиксированные размеры.
                                                                                                                                                                                                            2. NADEZHDA TABANKOVA
                                                                                                                                                                                                              23 октября 2019, 00:27
                                                                                                                                                                                                              Александр, спасибо большое за карусель. Все отлично работает.
                                                                                                                                                                                                              Но столкнулась с небольшой проблемой: кнопки для перелистывания у меня должны выступать за блок .slider. Если переношу их в другое место или меняю overflow, то карусель перестает работать нужным образом. Подскажите, пожалуйста, в чем моя ошибка? Что я упускаю?
                                                                                                                                                                                                              Заранее большое спасибо
                                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                                23 октября 2019, 15:16
                                                                                                                                                                                                                Спасибо за отзыв.
                                                                                                                                                                                                                Для того чтобы кнопки можно было вынести за пределы основной области карусели в неё необходимо просто добавить ещё одну обёртку. В этом примере показано как это можно сделать.
                                                                                                                                                                                                                1. NADEZHDA TABANKOVA
                                                                                                                                                                                                                  27 октября 2019, 20:01
                                                                                                                                                                                                                  Александр, добрый день.
                                                                                                                                                                                                                  Спасибо большое. Все работает :)
                                                                                                                                                                                                              2. Ivan
                                                                                                                                                                                                                18 октября 2019, 14:51
                                                                                                                                                                                                                Здравствуйте, Александр. Большое спасибо за Ваш скрипт — мне он очень понравился, но я никак не могу сделать так, чтобы он нормально работал в случае вывода ранее скрытого блока. Вы уже приводили пример с подобным случаем, когда слайдер изначально скрыт и открывается с помощью popup на CSS без применения скриптов, но я не смог разобраться в нем по аналогии. Буду очень благодарен, если вы поможете мне.

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

                                                                                                                                                                                                                <div class="popup-wrapper">
                                                                                                                                                                                                                <input type="checkbox" class="popup-checkbox" id="popupCheckboxTwo">
                                                                                                                                                                                                                <div class="popup">
                                                                                                                                                                                                                <div class="popup-content">
                                                                                                                                                                                                                 <label for="popupCheckboxTwo" class="popup-closer">×</label>
                                                                                                                                                                                                                 <img src="popup-video.jpg" style="margin-left:20px">
                                                                                                                                                                                                                <DIV style="margin-left:20px;font-size:4vh; font-family:monospace">
                                                                                                                                                                                                                Тут идет стандартный код слайдера + скрипт вызова (та версия, которая у Вас идет как дефолтная в тексте данной статьи)
                                                                                                                                                                                                                </div></div></div> 
                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                
                                                                                                                                                                                                                отображается эта конструкция по нажатию на
                                                                                                                                                                                                                <label for="popupCheckboxTwo" class="popup-shower">Тут DIV с картинкой в фоне</label>
                                                                                                                                                                                                                CSS самого Popup такая:
                                                                                                                                                                                                                .popup-checkbox,.popup{display:none;}
                                                                                                                                                                                                                .popup{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;opacity:0;}
                                                                                                                                                                                                                .popup:before{display:block;content:'';position:absolute;z-index:1;width:100%;height:100%;top:0;left:0;background-color:#000;opacity:.5;}
                                                                                                                                                                                                                .popup-content{width:100%;max-width:1458px;height:1400px;position:absolute;z-index:2;top:30px;left:30px;margin:auto;background-color:#fff;border-radius:15px;padding:0px;-moz-box-sizing:border-box;box-sizing:border-box;background-image:url(popup-bg.jpg);}
                                                                                                                                                                                                                .popup-shower{color:#00f;cursor:pointer;text-decoration:underline;}
                                                                                                                                                                                                                .popup-shower:hover{color:#00a;text-decoration:underline;}
                                                                                                                                                                                                                .popup-closer{position: fixed;top: 50px;right: 5%;color: #410a0a;font-size: 60px;display: block;width: 45px;height: 45px;line-height: 43px;text-align: center;border-radius: 50%;cursor: pointer;background-image: url(button-bg.jpg);font-weight: bold;box-shadow: 0 0 10px rgba(0,0,0,0.5);}
                                                                                                                                                                                                                .popup-closer:hover{color: #9c1b1b;}
                                                                                                                                                                                                                .popup-checkbox:checked+.popup{opacity:1;display:block;}

                                                                                                                                                                                                                Что интересно, если открыть popup, а затем перезагрузить страницу, то слайдер работает нормально.
                                                                                                                                                                                                                1. Ivan
                                                                                                                                                                                                                  18 октября 2019, 15:09
                                                                                                                                                                                                                  Вот тут код страницы целиком: jsfiddle.net/a6zcq594/
                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                    19 октября 2019, 11:39
                                                                                                                                                                                                                    Добавьте это:
                                                                                                                                                                                                                    // var slider = multiItemSlider('.slider');
                                                                                                                                                                                                                    document.querySelector('#popupCheckboxTwo').addEventListener('change', function () {
                                                                                                                                                                                                                      if (this.checked) {
                                                                                                                                                                                                                        if (slider === undefined) {
                                                                                                                                                                                                                          slider = multiItemSlider('.slider', {
                                                                                                                                                                                                                            isCycling: true
                                                                                                                                                                                                                          });
                                                                                                                                                                                                                        } else {
                                                                                                                                                                                                                          slider.cycle();
                                                                                                                                                                                                                        }
                                                                                                                                                                                                                      }
                                                                                                                                                                                                                    });
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    1. Ivan
                                                                                                                                                                                                                      19 октября 2019, 21:50
                                                                                                                                                                                                                      Вы имеете в виду заменить стандартный код вызова var slider = multiItemSlider('.slider') на указанный вами?
                                                                                                                                                                                                                      Символы комментирования, как я понимаю, надо убрать было, но у меня как в исходном варианте, так и с убранными все равно та же проблема остается, т.е. работать начинает только после перезагрузки страницы с активированным блоком :(

                                                                                                                                                                                                                      Может быть нюансы с тем, где именно код нужно размещать?
                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                        20 октября 2019, 02:59
                                                                                                                                                                                                                        Нужно заменить. Значит не правильно вставили. Ссылка на пример, размещённый на JSFiddle.
                                                                                                                                                                                                                        1. Ivan
                                                                                                                                                                                                                          20 октября 2019, 13:02
                                                                                                                                                                                                                          Спасибо большое. Теперь работает.
                                                                                                                                                                                                                2. Андрей
                                                                                                                                                                                                                  11 октября 2019, 13:38
                                                                                                                                                                                                                  Не получается сделать автоматическую смену слайдов как в первом примере слайда
                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                    11 октября 2019, 14:02
                                                                                                                                                                                                                    Это можно решить простым скриптиком:
                                                                                                                                                                                                                    var currentIndexSlider = 1;
                                                                                                                                                                                                                    var timerId = setInterval(function(){
                                                                                                                                                                                                                      if (currentIndexSlider >= 4) {
                                                                                                                                                                                                                        clearTimeout(timerId);
                                                                                                                                                                                                                        return;
                                                                                                                                                                                                                      }
                                                                                                                                                                                                                      slider.right();
                                                                                                                                                                                                                      currentIndexSlider++;
                                                                                                                                                                                                                    }, 5000);
                                                                                                                                                                                                                    
                                                                                                                                                                                                                    Ссылка на пример.
                                                                                                                                                                                                                    1. Андрей
                                                                                                                                                                                                                      11 октября 2019, 14:08
                                                                                                                                                                                                                      а цикличность как добавить?
                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                        11 октября 2019, 14:18
                                                                                                                                                                                                                        Вот пример слайдера с цикличностью.
                                                                                                                                                                                                                        1. Андрей
                                                                                                                                                                                                                          11 октября 2019, 18:36
                                                                                                                                                                                                                          Спасибо большое)
                                                                                                                                                                                                                  2. Елена Савченко
                                                                                                                                                                                                                    30 сентября 2019, 12:01
                                                                                                                                                                                                                    Александр, доброго дня. Я новичок в веб верстке, по вашему коду для слайдера с изображениями, не получается добавить фото. Создала папки examples\images, но они так и не отображаются.
                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                      30 сентября 2019, 13:48
                                                                                                                                                                                                                      Привет! В этом комментарии есть пример слайдера с изображениями. Или нужен какой-то другой?
                                                                                                                                                                                                                    2. Анастасия
                                                                                                                                                                                                                      28 августа 2019, 22:58
                                                                                                                                                                                                                      Александр, подскажите, пожалуйста, как сделать нижние кружки для слайдера, нужно чтобы в мобильной версии были кружки, а в десктопе стрелки.
                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                        04 сентября 2019, 15:15
                                                                                                                                                                                                                        Ну, тут нужно просто CSS подредактировать.
                                                                                                                                                                                                                        Как это выполнить можно посмотреть здесь.
                                                                                                                                                                                                                      2. Святослав
                                                                                                                                                                                                                        02 августа 2019, 19:16
                                                                                                                                                                                                                        Здраствуйте, использую ваш слайдер для картинок, но не знаю как сделать так, чтобы при изменении области видимости экрана все равно можно было нажимать на кнопки(т.е слайдер работает только тогда, когда он находится в области видимости на экране, а мне необходимо убрать данную фичу). Буду очень благодарен за ответ
                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                          05 августа 2019, 12:48
                                                                                                                                                                                                                          Здравствуйте.
                                                                                                                                                                                                                          Удалил эту фичу, вот ссылка на пример.
                                                                                                                                                                                                                        2. владислав Ковалев
                                                                                                                                                                                                                          30 июля 2019, 12:52
                                                                                                                                                                                                                          Здравствуйте, очень простой хороший слайдер, только можно ли кастомизировать его и сделать прокрутку вертикальной?
                                                                                                                                                                                                                          1. владислав Ковалев
                                                                                                                                                                                                                            30 июля 2019, 13:28
                                                                                                                                                                                                                            я уже сделал, но было неплохо сделать пометку в статье, мне кажется может пригодится и еще раз спасибо за слайдер.
                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                              30 июля 2019, 14:36
                                                                                                                                                                                                                              Здравствуйте. Если есть желание поделиться этим рецептом, то будем рады этому.
                                                                                                                                                                                                                          2. Сергей
                                                                                                                                                                                                                            10 июля 2019, 15:49
                                                                                                                                                                                                                            Здравствуйте. Спасибо за слайдер. Есть проблема с ссылками. В последних двух примерах ссылки не работают. Например если сделать изображение ссылкой, то она не будет работать.
                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                              20 июля 2019, 15:30
                                                                                                                                                                                                                              Здравствуйте.
                                                                                                                                                                                                                              Спасибо! Поправил этот момент в этих примерах.
                                                                                                                                                                                                                              Вот пример слайдера с изображениями.
                                                                                                                                                                                                                            2. joseph
                                                                                                                                                                                                                              19 июня 2019, 22:22
                                                                                                                                                                                                                              Добрый день, Александр. Несколько дней не могу победить перемещение кнопок «влево» и «вправо» при использовании данного слайдера. Если в качестве элемента вставить ссылку на изображение, открываемое в галерее Fancybox (из вашей статьи про фотогалерею), и пролистать несколько слайдов, а потом выйти из режима просмотра, то кнопка навигации уплывает и оказывается совсем не на своём месте. Подскажите, где копать?
                                                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                                                20 июня 2019, 14:01
                                                                                                                                                                                                                                Добрый день. Покажите реальный пример, например, на JSFiddle.
                                                                                                                                                                                                                                1. joseph
                                                                                                                                                                                                                                  20 июня 2019, 19:24
                                                                                                                                                                                                                                  С моим отсутствием опыта я не смогу в JSFiddle подключить 8 файлов с JS:
                                                                                                                                                                                                                                  jquery.min.js
                                                                                                                                                                                                                                  popper.min.js
                                                                                                                                                                                                                                  bootstrap.min.js
                                                                                                                                                                                                                                  jquery.fancybox.min.js
                                                                                                                                                                                                                                  browser.min.js
                                                                                                                                                                                                                                  breakpoints.min.js
                                                                                                                                                                                                                                  и так далее… + 3 файла с CSS
                                                                                                                                                                                                                                  Как это правильно сделать?
                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                    26 июня 2019, 15:14
                                                                                                                                                                                                                                    Там есть поле для ввода текста со значком "+". Вставляете в это поле URL и нажимаете на этот значок. Всё ваш файл подключен. Можно подключить скрипт и стили со своего сайта. Если его нет, то найти эти файлы можно на cdnjs.com. Очень хороший сервис, стоит разобраться…
                                                                                                                                                                                                                              2. Роман Поверенный
                                                                                                                                                                                                                                05 июня 2019, 22:11
                                                                                                                                                                                                                                Добрый день, Александр. Использовал ваш последний пример со статьями (https://itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-3), не пойму, что нужно делать чтобы добавить к нему пагинацию, т.к. код скрипта отличается от того, что на гитхаб. Мне было очень важно отображать с разной шириной разное количество слайдов, поэтому взял из-за:
                                                                                                                                                                                                                                _states = [
                                                                                                                                                                                                                                            { active: false, minWidth: 0, count: 1 },
                                                                                                                                                                                                                                            { active: false, minWidth: 576, count: 2 },
                                                                                                                                                                                                                                            { active: false, minWidth: 992, count: 3 },
                                                                                                                                                                                                                                            { active: false, minWidth: 1200, count: 4 },
                                                                                                                                                                                                                                          ]
                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                  10 июня 2019, 02:21
                                                                                                                                                                                                                                  Добрый. На Github расположен базовый код, а различные примеры его использования здесь. В каком виде вы хотите добавить к нему пагинацию?
                                                                                                                                                                                                                                  1. Роман Поверенный
                                                                                                                                                                                                                                    10 июня 2019, 07:39
                                                                                                                                                                                                                                    Добрый день. Пагинация нужна кликабельная именно тогда когда разрешение экрана становится маленьким и показ идет одного слайда. Тач события есть для перелистывания пальцем, а вот доп навигатор в виде пагинации нет, но нужен в виде точек под слайдером. На сайте есть и другие более тяжелые слайдеры с подобной пагинацией, но ваш слайдер заинтересовал более всего для дальнейшего использования, из-за его «легковесия».
                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                      11 июня 2019, 07:38
                                                                                                                                                                                                                                      Добрый день. Добавил в статью пример, как это мож