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

Александр Мальцев
153K
7
Слайдер для сайта на CSS и JavaScript

В этой статье мы рассмотрим, как добавить на сайт адаптивный слайдер chiefSlider и настроить его для показа различного контента. Его исходные коды расположены на GitHub, создан он на основе Flexbox и CSS трансформаций.

О слайдере chiefSlider

chiefSlider – это простой, адаптивный и легко настраиваемый слайдер для сайта, в элементах которого можно использовать различный контент. Реализован он с применением CSS Flexbox и трансформаций. Его логика написана на чистом JavaScript без использования каких-либо сторонних библиотек.

chiefSlider является очень гибким. Одна часть его настроек выполняется в HTML, другая - в CSS, и третья - в JavaScript.

В HTML мы можем определить будет ли у слайдера навигация (кнопки для перехода к предыдущему и следующему слайду) и пагинация.

В CSS настраивается количество одновременно отображаемых слайдов. При этом, на разных viewport при необходимости мы можем задать показ разного количества слайдов. Это осуществляется посредством медиа запросов. Это особенность слайдера позволяет сформировать ему вид уже на этапе CSS без использования JavaScript

В JavaScript выполняется настройка зацикливания, свайпинга, автовоспроизведения, необходимости обновления при изменении ширины viewport, времени задержки между автоматической сменой слайдов и многое другое.

Кстати, этот слайдер отличается от большего количества других очень популярных слайдеров и каруселей (например, slick, splide, swiper и owlCarousel) тем, что он для организации зацикленности слайдов вообще не создаёт клоны элементов (например, не дублирует последний слайд перед первым и первый после последнего).

Кроме этого, он написан на чистом JavaScript, и, следовательно не зависит от jQuery, как например, OwlCarousel и slick.

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

Ссылка на проект слайдера на GitHub:

Установка слайдера

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

  • добавления HTML разметки на страницу;
  • загрузки CSS и JavaScript файлов chiefSlider в папку своего проекта и подключение их к странице;
  • инициализация слайдера.

Пример:

<!-- chiefSlider CSS -->
<link rel="stylesheet" href="/assets/libs/chiefslider/chiefslider.css">
<!-- chiefSlider JavaScript -->
<script src="/assets/libs/chiefslider/chiefslider.js"></script>
<script>
// после готовности DOM
document.addEventListener('DOMContentLoaded', function() {
  // получаем корневой элемент слайдера
  const $slider = document.querySelector('[data-slider="chiefslider"]');
  // выполняем инициализацию
  new ChiefSlider($slider);
});
</script>

Настройка слайдера

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

Пример 1. Инициализация chiefSlider с одним активным слайдом (без зацикливания):

new ChiefSlider($slider, {
  loop: false // без зацикливания
});
Слайдер с одним активным слайдом без зацикливания

Посмотреть

Пример 2. Слайдер с одновременным отображением 3 слайдов на всех устройствах (без зацикливания):

<!-- Настройка в CSS -->
<style>
.slider__item {
  flex: 0 0 33.3333333333%; /* ширина слайда */
  max-width: 33.3333333333%;
}
</style>

<!-- JavaScript -->
<script>
  const $slider = document.querySelector('[data-slider="chiefslider"]');
  new ChiefSlider($slider, {
    loop: false // без зацикливания
  });
</script>
Слайдер с одновременным отображением 3 слайдов без зацикливания

Посмотреть

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

new ChiefSlider($slider, {
  loop: true // с зацикливанием (по умолчанию)
});
Адаптивный слайдер с зацикливанием

Посмотреть

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

<div class="slider" data-slider="chiefslider">
  ...
  <!-- индикаторы -->
  <ol class="slider__indicators">
    <li 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>
  </ol>
</div>
...

<script>
document.addEventListener('DOMContentLoaded', function() {
  // получаем корневой элемент слайдера
  const $slider = document.querySelector('[data-slider="chiefslider"]');
  new ChiefSlider($slider, {
    loop: true,
    autoplay: true, // включение автоматической смены слайдов
    interval: 5000, // интервал в мс
  });
});
</script>
Слайдер с автоматической сменой слайдов и индикаторами

Посмотреть

Пример 5. Использование слайдера для статей или постов (обновляющий своё состояние при изменении размеров окна браузера):

<style>
  /* ... */
  .slider__item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  @media (min-width: 768px) {
    .slider__item {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
  @media (min-width: 1200px) {
    .slider__item {
      flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
</style>

...

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ...
  const slider = new ChiefSlider($slider, {
    loop: true,
    autoplay: true,
    interval: 5000,
    refresh: true, // обновление состояния при изменении размеров окна браузера
  });
});
</script>
Слайдер для ротации статей или постов, который может изменять своё состояние при изменении размеров окна браузера

Посмотреть

Как разработать простой слайдер для сайта (без зацикливания) - 1 версия

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

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

<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__item">
      <!-- SLIDE #1 -->
    </div>
    <div class="slider__item">
      <!-- SLIDE #2 -->
    </div>
    <div class="slider__item">
      <!-- SLIDE #3 -->
    </div>
    <div class="slider__item">
      <!-- SLIDE #4 -->
    </div>
  </div>
  <!-- КНОПКИ "НАЗАД" И "ВПЕРЁД" -->
  <a class="slider__control slider__control_left" href="#" role="button"></a>
  <a class="slider__control slider__control_right slider__control_show" href="#" role="button"></a>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

'use strict';
var multiItemSlider = (function () {
  return function (selector) {
    var
      _mainElement = document.querySelector(selector), // основный элемент блока
      _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
      _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
      _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
      _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
      _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
      _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
      _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
      _positionLeftItem = 0, // позиция левого активного элемента
      _transform = 0, // значение трансформации .slider_wrapper
      _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
      _items = []; // массив элементов

    // наполнение массива _items
    _sliderItems.forEach(function (item, index) {
      _items.push({ item: item, position: index, transform: 0 });
    });

    var position = {
      getMin: 0,
      getMax: _items.length - 1,
    }

    var _transformItem = function (direction) {
      if (direction === 'right') {
        if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
          return;
        }
        if (!_sliderControlLeft.classList.contains('slider__control_show')) {
          _sliderControlLeft.classList.add('slider__control_show');
        }
        if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
          _sliderControlRight.classList.remove('slider__control_show');
        }
        _positionLeftItem++;
        _transform -= _step;
      }
      if (direction === 'left') {
        if (_positionLeftItem <= position.getMin) {
          return;
        }
        if (!_sliderControlRight.classList.contains('slider__control_show')) {
          _sliderControlRight.classList.add('slider__control_show');
        }
        if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
          _sliderControlLeft.classList.remove('slider__control_show');
        }
        _positionLeftItem--;
        _transform += _step;
      }
      _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
    }

    // обработчик события click для кнопок "назад" и "вперед"
    var _controlClick = function (e) {
      if (e.target.classList.contains('slider__control')) {
        e.preventDefault();
        var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
        _transformItem(direction);
      }
    };

    var _setUpListeners = function () {
      // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click
      _sliderControls.forEach(function (item) {
        item.addEventListener('click', _controlClick);
      });
    }

    // инициализация
    _setUpListeners();

    return {
      right: function () { // метод right
        _transformItem('right');
      },
      left: function () { // метод left
        _transformItem('left');
      }
    }

  }
}());

Основное действие в коде JavaScript выполняет функция _transformItem. Эта функция в зависимости от переданного ей направления выполняет трансформирование элемента .slider__wrapper.

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

var slider = multiItemSlider('.slider')
Демо слайдера

Как создать слайдер с зацикливанием? - 1 версия

Зацикливание слайдов можно выполнить посредством трансформирования элементов .slider__item.

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

Наиболее оптимально эти действия можно выполнить с помощью массива _items:

var _items = [];

// наполнение массива элементами .slider__item
_sliderItems.forEach(function (item, index) {
  _items.push({ item: item, position: index, transform: 0 });
});

Но связать данные с элементами можно выполнить не только посредством массива, а например, с помощью data-атрибутов. Но операции с DOM самые медленные и ресурсоёмкие, их не рекомендуется использовать, когда это можно выполнить как-то по-другому.

Следующий шаг - это создать функции для вычисления элементов .slider__item с минимальной и максимальной позицией.

var position = {
  getItemMin: function () {
    var indexItem = 0;
    _items.forEach(function (item, index) {
      if (item.position < _items[indexItem].position) {
        indexItem = index;`
      }
    });
    return indexItem;
  },
  getItemMax: function () {
    var indexItem = 0;
      _items.forEach(function (item, index) {
        if (item.position > _items[indexItem].position) {
          indexItem = index;
        }
      });
    return indexItem;
  },
  getMin: function () {
    return _items[position.getItemMin()].position;
  },
  getMax: function () {
    return _items[position.getItemMax()].position;
  }
}
</pre>
<p><span class="font-weight-bold">Последний основной шаг</span>, который предстоит выполнить - это доработать функцию <code class="code">_transformItem</code>. А именно добавить к ней код, который будет изменять позицию элемента <code class="code">.slider__item</code> и выполнять его трансформацию.</p>
<pre class="prettyprint">
var _transformItem = function (direction) {
  var nextItem;
  if (direction === 'right') {
    _positionLeftItem++;
    if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) {
      nextItem = position.getItemMin();
      _items[nextItem].position = position.getMax() + 1;
      _items[nextItem].transform += _items.length * 100;
      _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
    }
    _transform -= _step;
  }
  if (direction === 'left') {
    _positionLeftItem--;
    if (_positionLeftItem < position.getMin()) {
      nextItem = position.getItemMax();
      _items[nextItem].position = position.getMin() - 1;
      _items[nextItem].transform -= _items.length * 100;
      _items[nextItem].item.style.transform = 'translateX(' + _items[nextItem].transform + '%)';
    }
    _transform += _step;
  }
  _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
}

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

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

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

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

Слайдер с зацикливанием - Как выполняется переход к следующему слайду

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

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

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

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

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

Как создать слайдер с зацикливанием и автоматической сменой слайдов? - 1 версия

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

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

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

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

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

if (_config.pause && _config.isCycling) {
  _mainElement.addEventListener('mouseenter', function () {
    clearInterval(_interval);
  });
  _mainElement.addEventListener('mouseleave', function () {
    clearInterval(_interval);
    _cycle(_config.direction);
  });
}
Посмотреть

Как остановить автоматическую смену слайдов, если элемент не виден пользователю?

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

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

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

document.addEventListener('visibilitychange', _handleVisibilityChange, false);

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

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

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

function _isElementVisible(element) {
  var
    rect = element.getBoundingClientRect(),
    vWidth = window.innerWidth || doc.documentElement.clientWidth,
    vHeight = window.innerHeight || doc.documentElement.clientHeight,
    elemFromPoint = function (x, y) {
      return document.elementFromPoint(x, y);
    };

  if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
    return false;
  }

  return (
    element.contains(elemFromPoint(rect.left, rect.top))
    || element.contains(elemFromPoint(rect.right, rect.top))
    || element.contains(elemFromPoint(rect.right, rect.bottom))
    || element.contains(elemFromPoint(rect.left, rect.bottom))
  );
}

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

var _transformItem = function (direction) {
  var nextItem;

  if (!_isElementVisible(_mainElement)) {
    return;
  }

  //...
Посмотреть

Слайдер, реагирующий на изменение размеров окна браузера - 1 версия

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

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

Ознакомиться с кодом слайдера и его демкой можно в лаборатории:

Посмотреть

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

  1. damir
    7 минут назад
    Почему кнопки управления не работают? 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
                                                                                                                                                                                                                Добрый день. Добавил в статью пример, как это можно выполнить.
                                                                                                                                                                                                                1. Роман Поверенный
                                                                                                                                                                                                                  10 июня 2019, 13:33
                                                                                                                                                                                                                  Вот скриншот:
                                                                                                                                                                                                                  Пагинация для слайдера
                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                    10 июня 2019, 13:54
                                                                                                                                                                                                                    Понятно, что вы хотите. Подумаю, как это лучше реализовать…
                                                                                                                                                                                                                    1. Роман Поверенный
                                                                                                                                                                                                                      11 июня 2019, 11:35
                                                                                                                                                                                                                      Спасибо огромное, всё получилось как нужно.
                                                                                                                                                                                                                      И маленький, но не обязательный вопрос, который может пригодиться в будущем:
                                                                                                                                                                                                                      Возможно ли в конфиг вывести количество слайдов которое меняется за раз, к примеру отображается 3 слайда на экране, и я хочу листать тоже по 3. Было бы замечательно сделать это аналогично:
                                                                                                                                                                                                                      _states = [
                                                                                                                                                                                                                      { active: false, minWidth: 0, count: 1 },
                                                                                                                                                                                                                      { active: false, minWidth: 576, count: 2 },
                                                                                                                                                                                                                      { active: false, minWidth: 992, count: 3 },
                                                                                                                                                                                                                      { active: false, minWidth: 1200, count: 4 },
                                                                                                                                                                                                                      ]
                                                                                                                                                                                                                      Т.е. в зависимости от экрана, но отдельной настройкой, т.к. может понадобиться листать по 2 когда видно 3.

                                                                                                                                                                                                                      P.S. Еще раз огромное спасибо за ваш труд!
                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                        26 июня 2019, 15:00
                                                                                                                                                                                                                        Добавлю эту возможность к слайдеру.
                                                                                                                                                                                                            2. joseph
                                                                                                                                                                                                              04 июня 2019, 22:55
                                                                                                                                                                                                              Доброго времени суток. Спасибо, Александр, за Ваши труды и за то, что делитесь ими. Слайдер очень симпатичный, но у меня, как и у товарища Alek (31 мая 2019, 19:52) не получается добиться от него корректного открытия ссылок. Если я вставляю между тегами … ссылку в виде картинки или текста или другого контейнера div, то курсор при наведении меняется, но при нажатии ЛКМ ничего не происходит (могу перейти по ссылке только через ПКМ). Подскажите, что я делаю не правильно? Код целиком беру из примеров. С уважением.
                                                                                                                                                                                                              1. joseph
                                                                                                                                                                                                                04 июня 2019, 23:48
                                                                                                                                                                                                                Использовал код из Вашей ссылки от 19 марта 2019, 14:57 — с ним всё открывается. Благодарю.
                                                                                                                                                                                                              2. Alex
                                                                                                                                                                                                                03 июня 2019, 14:33
                                                                                                                                                                                                                Как можно сделать, чтобы слайдер по клику на кнопки вперед-назад «пролистывал» два или три слайда?
                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                  05 июня 2019, 12:41
                                                                                                                                                                                                                  Это можно выполнить так:
                                                                                                                                                                                                                  ...
                                                                                                                                                                                                                  // обработчик события click для кнопок "назад" и "вперед"
                                                                                                                                                                                                                  var _controlClick = function (e) {
                                                                                                                                                                                                                    var direction = this.classList.contains('slider__control_right') ? 'right' : 'left';
                                                                                                                                                                                                                    e.preventDefault();
                                                                                                                                                                                                                    _transformItem(direction);
                                                                                                                                                                                                                    _transformItem(direction);
                                                                                                                                                                                                                    _transformItem(direction);
                                                                                                                                                                                                                  };
                                                                                                                                                                                                                  
                                                                                                                                                                                                                  Просто вызовите функцию _transformItem(direction); столько раз сколько нужно.
                                                                                                                                                                                                                  1. Alex
                                                                                                                                                                                                                    06 июня 2019, 16:13
                                                                                                                                                                                                                    Спасибо)
                                                                                                                                                                                                                2. Максим
                                                                                                                                                                                                                  25 марта 2019, 16:37
                                                                                                                                                                                                                  Александр, подскажите пожалуйста, в теме есть описание инициализации слайдера, а как сделать так, чтобы функция перестала работать? Я делаю инит при открытии модального окна, а по закрытию хочу чтобы функция останавливалась и элементы возвращались на начальные положения.
                                                                                                                                                                                                                  1. Dmytro Bazaluk
                                                                                                                                                                                                                    16 марта 2019, 22:30
                                                                                                                                                                                                                    Добрый вечер. Нашёл ваш замечательный слайдер, все доступно и понятно. Но нужна функция пролистывания слайдов ‘пальцем’, как на слайдерах бутстрап, все не могу найти именно эту функцию. Подскажите направление поиска или какое-то решение.
                                                                                                                                                                                                                    Спасибо огромное)
                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                      19 марта 2019, 14:57
                                                                                                                                                                                                                      Добрый! Для этого на страницу нужно добавить обработку для событий touchstart и toachend. Как это сделать можно посмотреть в этом примере.
                                                                                                                                                                                                                      1. Dmytro Bazaluk
                                                                                                                                                                                                                        29 апреля 2019, 09:16
                                                                                                                                                                                                                        Добрый день еще раз, появилась задача с интеграцией индикатора (пагинации слайдера). Подскажите пожалуйста направление внедрения данного индикатора, стрелки работают как плюс/минус ширина слайда, а вот индикатор должен переносить на указанное изображение, либо экран с изображениями. Тут я не знаю, как проще это сделать. Вот скриншот.
                                                                                                                                                                                                                        Спасибо большое!
                                                                                                                                                                                                                        1. Dmytro Bazaluk
                                                                                                                                                                                                                          01 мая 2019, 20:45
                                                                                                                                                                                                                          Вопрос решен, кому еще нужны индикаторы, ищите на gitHub
                                                                                                                                                                                                                          Огромное вас спасибо
                                                                                                                                                                                                                    2. Алибек
                                                                                                                                                                                                                      10 марта 2019, 01:46
                                                                                                                                                                                                                      Здравствуйте, можете подсказать как сделать так чтобы после каждой прокрутке сайта страница не отматывалась к верху?
                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                        11 марта 2019, 14:18
                                                                                                                                                                                                                        Здравствуйте! Это ошибка исправлена. Код слайдера и примеры обновлены.
                                                                                                                                                                                                                      2. nik
                                                                                                                                                                                                                        06 марта 2019, 11:41
                                                                                                                                                                                                                        Здравствуйте Александр
                                                                                                                                                                                                                        Классные слайдеры
                                                                                                                                                                                                                        Что бы отобразить два слайдера нужно по вашему добавить id=«slider-1» id=«slider-2»
                                                                                                                                                                                                                        и так же указать в скрипте
                                                                                                                                                                                                                        var slider1 = multiItemSlider('#slider-1');
                                                                                                                                                                                                                        var slider2 = multiItemSlider('#slider-2');
                                                                                                                                                                                                                        Но мне нужно что бы слайдер работал и менялся в зависимость от категории, что нужно изменить в скрипте или добавить?.. Работает только первый слайдер, а остальные нет.
                                                                                                                                                                                                                        То есть id=«slider-1» где 1 это рубрика, а как это сделать что бы указать в скрипте.
                                                                                                                                                                                                                        Спасибо
                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                          06 марта 2019, 11:56
                                                                                                                                                                                                                          Здравствуйте! В комментариях уже приводил такой пример. Вот ссылка на него.
                                                                                                                                                                                                                          1. nik
                                                                                                                                                                                                                            06 марта 2019, 12:18
                                                                                                                                                                                                                            там не посредственно указывается ид, а я говорю о переменной ид категории которая выводиться. что бы скрипт автоматом понимал что ид другой и обрабатывал слайдер.
                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                              06 марта 2019, 14:59
                                                                                                                                                                                                                              Без изменения кода слайдера инициализировать все слайдеры на странице можно так:
                                                                                                                                                                                                                              document.querySelectorAll('.slider').forEach(function(item, index){ 
                                                                                                                                                                                                                                item.setAttribute('slider-id', index);
                                                                                                                                                                                                                                multiItemSlider('[slider-id="'+ index +'"]');
                                                                                                                                                                                                                              });
                                                                                                                                                                                                                              
                                                                                                                                                                                                                              1. nik
                                                                                                                                                                                                                                06 марта 2019, 15:19