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

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

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

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

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

О слайдере ChiefSlider

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML-макет ChiefSlider

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Aleks
    Aleks
    25.11.2021, 01:25
    Добрый день, Александр. Возможно ли вынести счётчик слайдов за пределы слайдера (.container) и чтобы он оставался фиксированным?
    1. Александр Мальцев
      Александр Мальцев
      25.11.2021, 14:43
      Привет! Можно создать элемент (.slider-counter) и написать простенький JavaScript для этого (пример):
      <div class="slider-counter" style="font-size: 20px; text-align: center; padding: 15px;"></div>
      ...
      <script>document.addEventListener('DOMContentLoaded', function () {
          const slider = new ChiefSlider('.slider', {
            loop: true
          });
          const sliderItems = document.querySelector('.slider__items');
          const sliderCounter = document.querySelector('.slider-counter');
          const updateCounter = () => {
            const index = parseInt(sliderItems.querySelector('.slider__item_active').dataset.index) + 1;
            const count = sliderItems.querySelectorAll('.slider__item').length;
            sliderCounter.textContent = `${index}/${count}`;
          }
          updateCounter();
          sliderItems.addEventListener('transitionend', updateCounter);
        });
      </script>

      1. Aleks
        Aleks
        26.11.2021, 00:07
        Ага, спасибо.
        Подскажи ещё такой момент: как навесить эффект появления FadeInDown на появление цифры при клике на prev или next. В данном варианте сделать это средствами css вряд ли получится. Я не смог разобраться. Подскажи, буду очень признателен.
    2. Web
      Web
      02.11.2021, 17:22
      Здравствуйте. Отличный слайдер, единственное, что интересует это как по клике на dots перелистывать больше одного слайдера?

      Допустим, что у меня есть 14 слайдов. Вывожу на страницу 7. Должно появиться два дотса. При клике на второй прокручивает слайдер к следующим 7 слайдеров
      1. Александр Мальцев
        Александр Мальцев
        08.11.2021, 13:09
        Здравствуйте! Данный слайдер листает по одному слайду. Для того чтобы листать по 7 нужно изменить JavaScript код. Без изменения кода можно создать 2 слайда и каждый из них разметить еще на 7, тогда будет прокручиваться сразу по 7.
      2. Kirill
        Kirill
        02.11.2021, 12:26
        Добрый день, Александр.
        Спасибо вам за труд. Очень здорово, когда вы подробно всё объясняете.

        У меня задача:
        использовать слайдер только в мобильной версии, начиная с планшетной версии он не используется, но переиспользуется его html-код(DOM-узлы).

        При ресайзе окна браузера и при ресайзе в режиме разработчика DevTools, слайдер оставляет после себя transform: translate(300px)(который прописывается через script) для каждого item списка. В итоге на планшетной версии элементы item списка смещены за границы экрана. Проблема мною решается через изменение transform через script при увеличении ширины окна начиная с tablet-width.

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

        Вопрос:
        1. Как с самого начала при ресайзе с мобильной версии на планшетную, отключить все изменения внесенные скриптом слайдера на его элементы(имеется ввиду transform)?
        2. Если же развивать дальнейший путь моего решения, то как перезапустить слайдер при ресайзе с планшетной версии на мобильную один раз?
        1. Narek
          Narek
          27.10.2021, 12:29
          Здравствуйте, спасибо огромное за скрипт, на WP поставил без проблем и боли
          Но заметил что на ios не работает анимация смены слайдов, может и вообще на всех телефонах
          1. Aleks
            Aleks
            20.10.2021, 03:49
            Привет, Александр. Взял табы на чистом CSS из Вашего примера на сайте и пытаюсь реализовать Ваш слайдер в каждом отдельном табе. При попытке инициализации всех элементов с классом .slider из примера, во «Вкладке 1» два слайдера работают отлично, но при переключении на «Вкладку 2», в которой тоже вроде должен был инициализироваться третий слайдер, этого не происходит — не работает слайдер. Я пытался через id-шники получить инициализацию слайдера во второй вкладке, но тоже ничего не вышло. Что я делаю не так? Код прилагаю.
            
            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
              <!-- Подключаем CSS слайдера -->
              <link rel="stylesheet" href="/wp-content/themes/hello-elementor-child/ChiefSlider/chief-slider.min.css">
              <!-- Подключаем JS слайдера -->
              <script defer src="/wp-content/themes/hello-elementor-child/ChiefSlider/chief-slider.min.js"></script>
              <script>
                    
              </script>
            
              <style>
                *,
                *::before,
                *::after {
                  box-sizing: border-box;
                }
            
                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';
                }
            
                .container {
                  max-width: 700px;
                  margin: 0 auto;
                }
            
                .slider__wrapper {
                  overflow: hidden;
                }
            
                .slider__item {
                  flex: 0 0 33.3333333333%;
                  max-width: 33.3333333333%;
                  height: 250px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: rgba(255,255,255, 0.8);
                  font-size: 7rem;
                }
            
                .slider__item:nth-child(1) {
                  background-color: #f44336;
                }
            
                .slider__item:nth-child(2) {
                  background-color: #9c27b0;
                }
            
                .slider__item:nth-child(3) {
                  background-color: #3f51b5;
                }
            
                .slider__item:nth-child(4) {
                  background-color: #03a9f4;
                }
            
                .slider__item:nth-child(5) {
                  background-color: #4caf50;
                }
                
                
            
                .tabs {
                  font-size: 0;
                  /*max-width: 350px;*/
                  margin-left: auto;
                  margin-right: auto;
                }
            
                .tabs>input[type="radio"] {
                  display: none;
                }
            
                .tabs>div {
                  /* скрыть контент по умолчанию */
                  display: none;
                  border: 1px solid #e0e0e0;
                  padding: 10px 15px;
                  font-size: 16px;
                }
            
                /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
                #tab-btn-1:checked~#content-1,
                #tab-btn-2:checked~#content-2,
                #tab-btn-3:checked~#content-3 {
                  display: block;
                }
            
                .tabs>label {
                  display: inline-block;
                  text-align: center;
                  vertical-align: middle;
                  user-select: none;
                  background-color: #f5f5f5;
                  border: 1px solid #e0e0e0;
                  padding: 2px 8px;
                  font-size: 16px;
                  line-height: 1.5;
                  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
                  cursor: pointer;
                  position: relative;
                  top: 1px;
                }
            
                .tabs>label:not(:first-of-type) {
                  border-left: none;
                }
            
                .tabs>input[type="radio"]:checked+label {
                  background-color: #fff;
                  border-bottom: 1px solid #fff;
                }
              </style>
            
            </head>
            
            <body>
            
              <div class="tabs">
                <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
                <label for="tab-btn-1">Вкладка 1</label>
                <input type="radio" name="tab-btn" id="tab-btn-2" value="">
                <label for="tab-btn-2">Вкладка 2</label>
                <input type="radio" name="tab-btn" id="tab-btn-3" value="">
                <label for="tab-btn-3">Вкладка 3</label>
            
                <div id="content-1">
                  Содержимое 1...
                  <div class="container">
                
                    <div class="slider">
                      <div class="slider__wrapper">
                        <div class="slider__items">
                          <div class="slider__item">
                            <!-- Контент 1 слайда -->
                            1
                          </div>
                          <div class="slider__item">
                            <!-- Контент 2 слайда -->
                            2
                          </div>
                          <div class="slider__item">
                            <!-- Контент 3 слайда -->
                            3
                          </div>
                          <div class="slider__item">
                            <!-- Контент 4 слайда -->
                            4
                          </div>
                          <div class="slider__item">
                            <!-- Контент 5 слайда -->
                            5
                          </div>
                        </div>
                      </div>
                      <a href="#" class="slider__control" data-slide="prev"></a>
                      <a href="#" class="slider__control" data-slide="next"></a>
                    </div>
                
                  </div>
                                    <div class="container">
                
                    <div class="slider">
                      <div class="slider__wrapper">
                        <div class="slider__items">
                          <div class="slider__item">
                            <!-- Контент 1 слайда -->
                            1
                          </div>
                          <div class="slider__item">
                            <!-- Контент 2 слайда -->
                            2
                          </div>
                          <div class="slider__item">
                            <!-- Контент 3 слайда -->
                            3
                          </div>
                          <div class="slider__item">
                            <!-- Контент 4 слайда -->
                            4
                          </div>
                          <div class="slider__item">
                            <!-- Контент 5 слайда -->
                            5
                          </div>
                        </div>
                      </div>
                      <a href="#" class="slider__control" data-slide="prev"></a>
                      <a href="#" class="slider__control" data-slide="next"></a>
                    </div>
                
                  </div>
                </div>
                <div id="content-2">
                  Содержимое 2...
                    <div class="container">
                
                <div class="slider">
                  <div class="slider__wrapper">
                    <div class="slider__items">
                      <div class="slider__item">
                        <!-- Контент 1 слайда -->
                        1
                      </div>
                      <div class="slider__item">
                        <!-- Контент 2 слайда -->
                        2
                      </div>
                      <div class="slider__item">
                        <!-- Контент 3 слайда -->
                        3
                      </div>
                      <div class="slider__item">
                        <!-- Контент 4 слайда -->
                        4
                      </div>
                      <div class="slider__item">
                        <!-- Контент 5 слайда -->
                        5
                      </div>
                    </div>
                  </div>
                  <a href="#" class="slider__control" data-slide="prev"></a>
                  <a href="#" class="slider__control" data-slide="next"></a>
                </div>
                
                </div>
                </div>
                <div id="content-3">
                  Содержимое 3...
                </div>
              </div>
            <script>
                // после готовности DOM
                document.addEventListener('DOMContentLoaded', function() {
                    var elms = document.querySelectorAll('.slider');
                    for (var i = 0, len = elms.length; i < len; i++) {
                     // инициализация elms[i] в качестве слайдера
                    new ChiefSlider(elms[i]);
              }
            });
            </script>
            
            </body>
            
            </html>
            						
            1. Александр Мальцев
              Александр Мальцев
              20.10.2021, 12:43
              Привет!
              Слайдер необходимо инициализировать, когда он виден. Т.е. после того, как вы переключаете вкладку. Пример: https://codepen.io/itchief/pen/QWMKLbv.
              1. chokolad
                chokolad
                28.10.2021, 19:07
                Шалом, можете помочь с кодом? Нужно сделать из обычного слайдера, плиточный при изменении разрешения, чтоб перелистывать 4-мя блоками
                github.com/CHOKOLADis/TW_PGM
                1. Aleks
                  Aleks
                  20.10.2021, 14:14
                  Спасибо.
                  Здесь бы я точно сам не выкрутился.
                  Странно, что у Вас не реализовано в настройках слайдера center mode и класс для стилизации активного окна по центру. Популярная вещь. Или может есть такая возможность? Вас уже спрашивали в комментариях к первому слайдеру и кто- то предлагал использовать класс slider__item_active. Я пытался через него задать border стили, но принялись они у всех окон в слайдере.
                  Есть закомментированный участок кода в начале файла chief-slider.dev.js — это не та настройка?
                  1. Александр Мальцев
                    Александр Мальцев
                    22.10.2021, 14:45
                    Так класс slider__item_active добавляется к активным слайдам.
                    1. Aleks
                      Aleks
                      22.10.2021, 15:02
                      Как отцентрировать к примеру первый слайд, если мы выводим сразу три? Т.е. первый по центру, второй справа и последний слева.
              2. vikaharkov
                vikaharkov
                17.09.2021, 22:18
                Как сделать так, чтобы эти статьи и фотки прямо со страниц сайта вытягивались в слайдер? Ведь статьи и фотки на сайте в блоге постоянно обновляются и хотелось бы, чтобы они сразу появлялись не только на странице сайта, но и в слайдере. Это возможно?
                1. vikaharkov
                  vikaharkov
                  18.09.2021, 00:23
                  Имеется ввиду — автоматически, без дополнительного вмешательства. Статья или фотка появились на странице сайта и автоматом это же появилось в слайдере. Потому что статьи могут быть на странице, которая в глубине сайта. А слайдер на главной
                  1. Александр Мальцев
                    Александр Мальцев
                    18.09.2021, 11:04
                    Конечно возможно, но этот код пишется на сервере. Задача здесь заключается в выборе данных и формировании на их основе нужного HTML кода слайдера. Если данные поменяются, то у вас просто сформируется новый код.
                    1. EscaG
                      EscaG
                      18.10.2021, 04:06
                      Вы немного вводите в заблуждение, когда говорите, что этот код пишется на сервере.
                      Все что делается на сервере это обрабатывается запрос.
                      Чтобы отрисовать рандомное количество слайдов нужно сделать запрос на сервер и полученный ответ уже со стороны клиента отрисовать.
                      то есть с помощью цикла заполнить контейнер для слайдов
                      1. Александр Мальцев
                        Александр Мальцев
                        20.10.2021, 12:47
                        Можете и на JavaScript создать нужный HTML. Тут каждый выбирает как ему удобнее, мне – на сервере.
                      2. vikaharkov
                        vikaharkov
                        19.09.2021, 03:18
                        Я не поняла, что значит «код пишется на сервере»? Вот конкретная задача — вам на сайт поступают каждый день 100 новых фотографий, но они поступают в разные разделы сайта — какие-то в Спорт, какие-то в Аварии и т.д. Обычно это всё вместе выводится в ленте новостей сайта. А слайдер может выполнять эту функцию? Чтобы через него проходили все эти фотки? Все подряд, а не только те, которые туда вставлены ручками. Как такое реализовать можно? Есть ли подобные примеры? Чтобы слайдер висел вверху страницы, например, и в нём появлялись новые фотки по мере их поступления на сайт. Как, например, из Инстаграма есть такая реализация. Но то со стороннего Инстаграма фотки, а хотелось бы со своего сайта чтобы были и выводились в слайдере на главной сайта. Как такое сделать?
                        1. Александр Мальцев
                          Александр Мальцев
                          20.09.2021, 16:39
                          Пример PHP скрипта, который создаёт слайдер из всех jpg, находящихся в папке «/examples/images/slider-images/».
                          <?php
                          
                          $template = <<<HTML
                          <div class="slider">
                            <div class="slider__container">
                              <div class="slider__wrapper">
                                <div class="slider__items">{{items}}</div>
                              </div>
                            </div>
                            <a href="#" class="slider__control" data-slide="prev"></a>
                            <a href="#" class="slider__control" data-slide="next"></a>
                          </div>
                          HTML;
                          
                          $items = [];
                          $path = '/examples/images/slider-images/';
                          $path = $_SERVER['DOCUMENT_ROOT'] . '/examples/images/slider-images/';
                          $images = glob($path . '*.jpg');
                          foreach($images as $image) {
                            $image = str_replace($_SERVER['DOCUMENT_ROOT'], '', $image);
                            $items[] = '<div class="slider__item"><img src="' . $image .'"></div>';
                          }
                          $html = str_replace('{{items}}', implode('', $items), $template);
                          
                          echo $html;
                          gist.github.com/itchief/4236557238e5b5f67bc868afe10bd4ad
                  2. vikaharkov
                    vikaharkov
                    17.09.2021, 17:20
                    Здравствуйте! Вопрос имею — откуда в этих слайдерах беруться фотки или статьи? Неужели их туда спецом нужно каждый раз вставлять? Просветите пожалуйста. А то этот момент мною упущен. Если шо, то для Опенкарт 2.3 мне интересно
                    1. Александр Мальцев
                      Александр Мальцев
                      18.09.2021, 10:58
                      Здравствуйте! Обычно это делается на сервере. Например, получаете массив картинок из базы данных и далее с помощью foreach перебираете их и формируете нужный HTML. Как это написать зависит от того, что у вас на сервере и где это хранится.
                      1. vikaharkov
                        vikaharkov
                        19.09.2021, 03:04
                        Я извиняюсь за свою блондинистость, но шо поделаешь, не всем дано с лету всё понимать… Можно ещё раз, только помедленее? Что означает «получаете массив картинок из БД»? Уточните, каким конкретным образом картинки сайта попадают в слайдер? В примерах я вижу, что эти картинки везде вставлены буквально вручную. А есть ли примеры, где слайдер работает автоматом, без ручного вмешательства показывает новые картинки или новости?
                        1. Narek
                          Narek
                          27.10.2021, 12:26
                          Сядьте и почитайте о том как работает интернет и где хранятся данные, а потом подумайте как реализовать такую архитектуру, сложного совсем ничего нету
                          У вас не хватает знаний в основах веб технологий и сколько бы вы не спрашивали — вы ничего сейчас не поймете
                    2. Pipus
                      Pipus
                      11.09.2021, 17:02
                      Подскажите, пожалуйста, для тех, кто ещё не настолько шарит в JS:
                      где прописать querySelectorAll и перебор коллекции, чтобы при добавлении двух и более идентичных слайдеров работали все, а ещё круче, если бы можно было либо отключать интервал для некоторых, либо изменять его?

                      Будет ну очень полезно )
                      1. Александр Мальцев
                        Александр Мальцев
                        12.09.2021, 15:02
                        Для активирования всех элементов с классом slider можно использовать такой скрипт:
                        document.addEventListener('DOMContentLoaded', () => {
                          document.querySelectorAll('.slider').forEach(element => {
                            new ChiefSlider(element, {
                              loop: element.dataset.loop || 'true' === 'true',
                              autoplay: element.dataset.autoplay || 'false' === 'true',
                              interval: +element.dataset.interval || 5000,
                              swipe: element.dataset.swipe || 'true' === 'true',
                              refresh: element.dataset.refresh || 'false' === 'true'
                            });
                          });
                        });
                        В этом случае для управления настройками можно использовать data-атрибуты:
                        <!-- Слайдер 1 -->
                        <div class="slider" data-autoplay="true" data-interval="7000" data-swipe="false">...</div>
                        <!-- Слайдер 2 -->
                        <div class="slider" data-loop="false" data-interval="10000" data-refresh="true">...</div>
                        Если какой-то атрибут не устанавливаем, то используется значение по умолчанию.
                        1. Pipus
                          Pipus
                          12.09.2021, 16:38
                          Крууто
                          Ну как тут не сказать спасибо на Юмани еще раз )
                      2. Татьяна
                        Татьяна
                        04.08.2021, 19:34
                        Подскажите пожалуйста как сделать больше 3 слайда одновременно, 4 нужно одновременно?

                        Напримере вот этого:

                        .slider__item {
                        flex: 0 0 33.3333333333%;
                        max-width: 33.3333333333%;
                        }
                        1. Александр Мальцев
                          Александр Мальцев
                          05.08.2021, 15:15
                          100% — это вся ширина, если нужно 4, то нужно 100 / 4 = 25%:
                          
                          .slider__item {
                            flex: 0 0 25%;
                            max-width: 25%;
                          }
                          
                        2. Татьяна
                          Татьяна
                          04.08.2021, 11:48
                          Здравствуйте, что делать с индикаторами слайдера не понятно почему оня рядом стоят, как исправить?

                          1. Александр Мальцев
                            Александр Мальцев
                            04.08.2021, 12:06
                            Где-то тег не закрыли, нужно разметку проверить.
                          2. Татьяна
                            Татьяна
                            28.07.2021, 17:03
                            Здравствуйте подскажите пожалуйста, как сделать autoplay в двух слайдерах версии 4 с индикаторами и автоматической сменой слайдов через 7 секунд.
                            Я сделала 2 слайдера и они работаю вместе, только нет автоматической смены слайдов.
                            Куда нужно добавить этот JS код?
                            loop: true,
                            autoplay: false,
                            interval: 5000,
                            swipe: true,
                            refresh: false 
                            
                            Вот пример:
                            <!-- Слайдер 1 -->
                            <div class="slider" data-slider="chiefslider">...</div>
                            <!-- Слайдер 2 -->
                            <div class="slider" data-slider="chiefslider">...</div>
                            <script src="assets/js/chiefslider.js"></script>
                            <script>
                              const $sliders = document.querySelectorAll('[data-slider="chiefslider"]');
                              $sliders.forEach(function ($slider) {
                                new ChiefSlider($slider);
                              });
                              document.querySelectorAll('.slider').forEach(function(item, index){ 
                                item.setAttribute('slider-id', index);
                                multiItemSlider('[slider-id="'+ index +'"]');
                              });
                            </script>
                            1. Александр Мальцев
                              Александр Мальцев
                              04.08.2021, 05:20
                              Привет! Для этого нужно написать следующий код (пример):
                              document.querySelectorAll('.slider').forEach(function(element) {
                                new ChiefSlider(element, {
                                  loop: true,
                                  autoplay: true,
                                  interval: 7000,
                                });
                              });
                              
                            2. fet
                              fet
                              26.07.2021, 21:35
                              Здравствуйте, спасибо за ваш труд.
                              Хотел попросить помощи, дайте пжл. направление или идею, как реализовать вот такой слайдер (скриншот в Wordpress, это будут выводиться все статьи блога.
                              я создал в первом слайдер грид сетку из 5 статей, а как дальше во второй слайд выводить 5 статей, и он за экран уходит. ((
                              1. Vadim
                                Vadim
                                01.07.2021, 18:04
                                День добрый. Отличное решение, но есть вопрос как можно подписаться ан событие смены слайда? Заранее спасибо.
                                1. Александр Мальцев
                                  Александр Мальцев
                                  04.07.2021, 07:20
                                  Привет! В скрипте создаётся событие 'transition-start':
                                  document.querySelector('.slider').addEventListener('transition-start', function () {
                                    console.log('transition-start');
                                  });
                                  
                                  Такое событие подойдёт?
                                  1. Vadim
                                    Vadim
                                    05.07.2021, 08:56
                                    Подойдет, спасибо.
                                    Еще замечен момент что не происходит _updateIndicators при _refresh joxi.ru/BA095OKHMEB4jr в chrome и firefox.
                                    1. Vadim
                                      Vadim
                                      05.07.2021, 09:53
                                      Полечил переносом вызова _updateIndicators выше в коде joxi.ru/ZrJQz4Zhw41vLA
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        05.07.2021, 14:16
                                        Спасибо, на Github эти изменения тоже внёс.
                                2. Дмитрий
                                  Дмитрий
                                  05.06.2021, 13:56
                                  Александр, спасибо за легкое и простое решение!
                                  Подскажите пожалуйста, как я могу назначить уникальный стиль слайду, который в данный момент находится по центру? (скриншот)
                                  1. Vadim
                                    Vadim
                                    01.07.2021, 18:06
                                    Через class .slider__item_active.
                                  2. Евгений
                                    Евгений
                                    24.05.2021, 11:04
                                    пытаюсь подключить 2 слайдера — один на странице, другой в модальном окне. на странице работает, в модельном нет( как это сделать правильно?
                                    сейчас так сделал
                                    <script>
                                                document.addEventListener('DOMContentLoaded', function () {
                                                    var elms = document.querySelectorAll('#slider-1');
                                                    for (var i = 0, len = elms.length; i < len; i++) {
                                                        // инициализация elms[i] в качестве слайдера
                                                        new ChiefSlider(elms[i]);
                                                    }
                                                });
                                            </script>
                                            <script>
                                                // после готовности DOM
                                                document.addEventListener('DOMContentLoaded', function () {
                                                    var elms = document.querySelectorAll('#slider-2');
                                                    for (var i = 0, len = elms.length; i < len; i++) {
                                                        // инициализация elms[i] в качестве слайдера
                                                        new ChiefSlider(elms[i]);
                                                    }
                                                });
                                            </script>
                                    
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      26.05.2021, 15:16
                                      При инициализации слайдера выполняется определение его размеров. Но, это сделать не получится, если слайдер не отображается. Инициализацию слайдера в модальном окне следует делать при его открытии.
                                      Пример как это можно реализовать добавил в статью.
                                    2. Артур Владимирович Панфилов
                                      Артур Владимирович Панфилов
                                      14.05.2021, 16:46
                                      Здравствуйте, почему если в слайдер с одновременным показом 3 слайдов добавить например 12 слайдов, а не 5, то при прокрутке назад с конца он не возвращается к 1 слайду, а остается на 2
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        15.05.2021, 14:32
                                        Привет!
                                        Поправил. Файлы на GitHub обновил.
                                      2. Alexey
                                        Alexey
                                        14.05.2021, 14:37
                                        Здравствуйте Александр!
                                        Огромное спасибо за этот прекрасный слайдер и отличную документацию!
                                        #1: Могли бы вы исправить или подсказать как исправить то, что этот слайдер совершенно не отображается на моем мобильном телефоне? В чем может быть причина? Safari, iPhone 6 Plus.
                                        #2: Со временем, после 10-20 автоматических слайдов, слайдер почему то начинает листать, скажем не на 100% влево, а уже на 99% и потом 1% резко дергается, до конца. Было бы здорово если бы это можно было бы как-то исправить.
                                        Но в целом, я безмерно Вам благодарен. Вы мне очень помогли этим слайдером. Большое спасибо.
                                        1. Alexey
                                          Alexey
                                          15.05.2021, 10:32
                                          С проблемой #2 я справился. Дело в том, что если поместить слайдер в DIV у которого ширина будет равняться цифре с VW, например 65vw — появится вот такой вот баг. Слайдер со временем начинает дергаться все больше и больше. Стоит сделать этот DIV = 100% баг исчезает.

                                          Проблема #1 до сих пор актуальна :( Этот слайдер почему то не отображается на моем iPhone 6+ Safari. :(
                                          1. Александр Мальцев
                                            Александр Мальцев
                                            15.05.2021, 13:59
                                            Привет!
                                            Спасибо, второй баг посмотрю.
                                            Первый баг скорее всего из-за стилей. Добавил префиксы в CSS. Файл с префиксами: chief-slider-with-prefixes.css. Попробуй использовать их. Также добавил их в первый пример: chief-slider-01. Можешь потестировать используя его.
                                            1. Alexey
                                              Alexey
                                              15.05.2021, 14:21
                                              Привет! Спасибо большое за твой ответ!
                                              К сожалению по прежнему не работает, но я понял как именно проблема проявляется. Слайдер все таки появляется. И автоматический листает первый, второй, третий, четвертый слайд, а последнего слайда уже нет и затем слайды просто исчезают. 2ой цикл не появляется. Я проверил твои слайдеры (в том числе и первый), на этом вебсайте, с мобильного safari. Проблема, к сожалению, присутствует.
                                              Заранее большое спасибо.
                                              1. Александр Мальцев
                                                Александр Мальцев
                                                15.05.2021, 14:53
                                                Значит что-то в JS не поддерживается. А версия Safari какая?
                                                1. Alexey
                                                  Alexey
                                                  15.05.2021, 15:32
                                                  В google chrome такая же проблема на мобильном телефоне.
                                                  Баг появляется если включить loop:true. Без разницы, autoplay это или нет.
                                                  Последний и последующие слайды отсутствуют, в не зависимости от количества слайдов.
                                                  1. Alexey
                                                    Alexey
                                                    15.05.2021, 15:16
                                                    Большое спасибо за поддержку!
                                                    12.5.3 Если версия safari совпадает с версией iOS. (В google пишут, что версия safari == версия iOS)
                                                    PS: Баг присутствует когда loop: true.
                                                    1. Александр Мальцев
                                                      Александр Мальцев
                                                      16.05.2021, 08:47
                                                      Событие transitionstart не поддерживается в iOS 12.x. Немного изменил, попробуй подключить файл chief-slider.dev.js вместо «chief-slider.js».
                                                      1. Master
                                                        Master
                                                        23.10.2021, 20:11
                                                        Это работает. Но есть новая проблема. Если присутствует всего один слайд, то при первичной загрузке слайдера его не видно, отображается белое пространство. И да, 2 слайда также работают некорректно.
                                                        Если 3 и больше слайдов — все работает как надо.

                                                        Как возможно это поправить? Спасибо.
                                                        1. Александр Мальцев
                                                          Александр Мальцев
                                                          26.10.2021, 12:48
                                                          Какая ОС? Какой браузер и версия?
                                                          1. Master
                                                            Master
                                                            29.10.2021, 14:16
                                                            Проверял на ios 13 мобильный safari и chrome. На десктопе chrome и FireFox та же проблема.

                                                            3 и более слайда работают везде на всех платформах.
                                                            2 слайда некорректно в ios13 chrome и Safari Мобильном.
                                                            1 слайд некорректно везде на всех устройствах.
                                                        2. Alexey
                                                          Alexey
                                                          16.05.2021, 08:58
                                                          О да! :) Большое спасибо. Теперь слайдер работает, в том числе на ios 12. Большое спасибо за слайдер и тех поддержку, ты — талант :)
                                            2. Василий
                                              Василий
                                              02.05.2021, 13:34
                                              Здравствуйте, Александр!
                                              Спасибо за отличный слайдер!
                                              Есть необходимость добавить следующую функциональность: навигация по слайдам с помощью ползунка… или стандартного input type=«range», или(и даже лучше в плане стилизации), кастомного.
                                              На подобие как здесь — https://darsa.in/sly/examples/horizontal.html
                                              В комментариях такого примера не нашел(может плохо искал;)))
                                              Подскажите, пожалуйста, в каком направлении лучше копать? Может хотя бы алгоритм или псевдокод…
                                              Заранее огромное спасибо!!!
                                              1. sankavankina
                                                sankavankina
                                                27.04.2021, 18:31
                                                Доброго времени суток! Очень понравился ваш слайдер, прекрасно подошёл для моей задачи, единственное, что вообще никак не могу сделать, так это счётчик слайдов (1/3). Подскажите, пожалуйста, как это реализовать. Очень нужно… Спасибо!
                                                1. Александр Мальцев
                                                  Александр Мальцев
                                                  03.05.2021, 14:14
                                                  Привет! Спасибо за отзыв.
                                                  Это можно выполнить разными способами. Например, с помощью CSS счётчиков (первый пример в статье):
                                                  .slider__items {
                                                    counter-reset: slide;
                                                  }
                                                  .slider__item {
                                                    position: relative;
                                                    counter-increment: slide;
                                                  }
                                                  .slider__item::before {
                                                    content: counter(slide) "/5";
                                                    position: absolute;
                                                    top: 10px;
                                                    right: 20px;
                                                    color: #fff;
                                                    font-style: italic;
                                                    font-size: 32px;
                                                    font-weight: bold;
                                                    display: block;
                                                  }
                                                  
                                                2. Master
                                                  Master
                                                  26.04.2021, 20:55
                                                  Спасибо, Александр, за столь ценный IT продукт. Использовал его в адаптивном сайте. Только заметил проблему: слайдер с зацикливанием работает не корректно в мобильных браузерах (проверял на Safari и Google Chrome). После пролистывания всех слайдов с изображениями, бесконечно идут пустые окна и слайдер не возвращается к первому изображению. В чем может быть проблема?
                                                  1. snakeTLN
                                                    snakeTLN
                                                    22.04.2021, 13:42
                                                    Александр, спасибо вам за труд. Не сильна в JS, но ваш слайдер v2 легко использовать, даже не особо разбираясь в JS. Но заметили такой минус. Слайдер со свайпом не работает в IE11, т е не только свайп не работает, но и сам слайдер полностью. Как их подружить?
                                                    1. Александр Мальцев
                                                      Александр Мальцев
                                                      26.04.2021, 14:32
                                                      Пожалуйста! В Internet Explorer, работающим под управлением Windows 10 работает. А какая ошибка в консоли выводится?
                                                    2. kadochnikov_k
                                                      kadochnikov_k
                                                      17.03.2021, 15:14
                                                      Александр, хочу еще раз поблагодарить за слайдер! Перехожу сейчас с первой версии на вторую, не могу разобраться в некоторых моментах:
                                                      1. Есть ли возможность добавлять индикаторы автоматически по количеству слайдов в слайдере?
                                                      2. Есть ли возможность не листать слайды и не выводить кнопки управления слайдером если все слайды умещаются на странице?
                                                      1. Александр Мальцев
                                                        Александр Мальцев
                                                        18.03.2021, 16:00
                                                        Пожалуйста! Конечно можно.
                                                        Пример решения (открыть):
                                                        const $sliders = document.querySelectorAll('[data-slider="chiefslider"]');
                                                        $sliders.forEach(function ($item) {
                                                          if ($item.querySelector('.slider__item').getBoundingClientRect().width * $item.querySelectorAll('.slider__item').length > $item.querySelector('.slider__wrapper').getBoundingClientRect().width) {
                                                            // добавим индикаторы
                                                            const $indicators = document.createElement('ol');
                                                            $indicators.className = 'slider__indicators';
                                                            let inner = '';
                                                            $item.querySelectorAll('.slider__item').forEach(function ($sliderItem, index) {
                                                              inner += `<li data-slide-to="${index}"></li>`;
                                                            });
                                                            $indicators.innerHTML = inner;
                                                            $item.appendChild($indicators);
                                                            // инициализируем слайдер
                                                            new ChiefSlider($item);
                                                          } else {
                                                            $item.querySelectorAll('.slider__control').forEach(function ($control) {
                                                              $control.style.display = 'none';
                                                            })
                                                          }
                                                        });
                                                        
                                                        1. kadochnikov_k
                                                          kadochnikov_k
                                                          18.03.2021, 18:11
                                                          Круто! Огромное спасибо еще раз
                                                      2. kadochnikov_k
                                                        kadochnikov_k
                                                        16.03.2021, 11:44
                                                        Добрый день! Подскажите, как во второй версии инициализировать слайдер, если их несколько на странице?
                                                        1. Александр Мальцев
                                                          Александр Мальцев
                                                          16.03.2021, 14:16
                                                          Привет!
                                                          Можно назначить каждому id, а затем их инициализировать следующим образом:
                                                          // инициализируем слайдер с id="slider-1"
                                                          new ChiefSlider(document.querySelector('#slider-1'));
                                                          // инициализируем слайдер с id="slider-2"
                                                          new ChiefSlider(document.querySelector('#slider-2'));
                                                          
                                                          Можно, например, посредством forEach (открыть):
                                                          const $sliders = document.querySelectorAll('[data-slider="chiefslider"]');
                                                          $sliders.forEach(function ($slider) {
                                                            new ChiefSlider($slider);
                                                          });
                                                          
                                                          1. kadochnikov_k
                                                            kadochnikov_k
                                                            17.03.2021, 12:41
                                                            Огромное спасибо! И еще: есть ли возможность во второй версии добавлять индикаторы автоматически в зависимости от количества слайдов?
                                                        2. damir
                                                          damir
                                                          27.02.2021, 01:09
                                                          Почему кнопки управления не работают? js и css подключены, использую предложенный вами пример
                                                          1. Вячеслав
                                                            Вячеслав
                                                            08.02.2021, 09:11
                                                            Александр, огромное спасибо за слайдер! Не могли бы Вы подсказать, как поменять стиль анимации? Сейчас у Вас только перелистование, а мне надо, чтобы на некоторых слайдерах было плавное исчезновение. Может имеет смысл дополнить скрипт слайдера функцией выбора анимации?
                                                            1. Serega
                                                              Serega
                                                              28.01.2021, 09:30
                                                              Здравствуйте у вас классные слайдеры. Я пока только учусь создавать сайты HTML. Я разместил фотографии в слайдере у вас на примере это Адаптивный слайдер с зацикливанием. Скажите а можно как то раелизовать что бы при клике на фото они увеличивались и их могли пролистывать люди как на пк так и на мобильном. Заранее благодарю.
                                                              1. Михаил
                                                                Михаил
                                                                26.01.2021, 09:56
                                                                Можно ли реализовать навигацию в виде превьюшек?
                                                                1. Александр Мальцев
                                                                  Александр Мальцев
                                                                  27.01.2021, 15:40
                                                                  Можно, включу в список задач. После релиза новой версии этого скрипта добавлю такой пример в статью.
                                                                2. Дмитрий Покормяхо
                                                                  Дмитрий Покормяхо
                                                                  18.01.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.01.2021, 18:51
                                                                    Извиняюсь. Сам разобрался. Не там подключал js. :)
                                                                  2. kadochnikov_k
                                                                    kadochnikov_k
                                                                    13.01.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.01.2021, 16:21
                                                                      Пожалуйста! В ближайшее время обновлю скрипт слайдера. Он будет включать возможность включения свайпа из коробки.
                                                                      1. Виталий
                                                                        Виталий
                                                                        25.01.2021, 17:55
                                                                        День добрый. А вы не добавили еще свайп в слайдер?
                                                                        1. Александр Мальцев
                                                                          Александр Мальцев
                                                                          27.01.2021, 15:33
                                                                          Новая версия в процессе разработки, свайп туда уже добавил. Находиться она на Github: github.com/itchief/chiefSlider
                                                                        2. kadochnikov_k
                                                                          kadochnikov_k
                                                                          15.01.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
                                                                            kadochnikov_k
                                                                            14.01.2021, 16:43
                                                                            Спасибо большое!
                                                                        3. SinGlEBW
                                                                          SinGlEBW
                                                                          08.01.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
                                                                            SinGlEBW
                                                                            08.01.2021, 01:37
                                                                            До конца не проверил. Если обычная строка попадает в метод querySelector
                                                                            то она зацикликся.
                                                                            Методы всё же лучше назвать по другому. Например
                                                                            Element.prototype.с_querySelector
                                                                            Element.prototype.с_querySelectorAll
                                                                            
                                                                          2. Тимофей
                                                                            Тимофей
                                                                            21.12.2020, 13:07
                                                                            Привет, вопрос не по теме. У вас не нашел ответа. Подскажите по input type=range. Сам код выложил по адресу range.cmstext.ru Вроде всё работает.
                                                                            1. Проблема в том, что не всегда срабатывает onmouseover адекватно. т.е. при нажитии мышкой на левый срабатывает правый так как они в абсолюте лежат в одном z-index как победить это проблему? помогите
                                                                            2. Как заставить javascript обрабатывать значения ползунков чтобы они не пересекались. Пробовал проверять значение не получается. Помогите
                                                                            Заранее спасибо. Вы бог
                                                                            1. Тимофей
                                                                              Тимофей
                                                                              13.12.2020, 06:00
                                                                              Александр здравствуйте, спасибо за ваш труд. Очень интересно и полезно. Хочу использовать Ваш слайдер, посмотрел все примеры но не нашел как изменить количество активных (отображаемых) блоков при использовании нескольких слайдеров на странице по ID. Например у слайдера #slider1 по 5 блоков, у #slider2 3 блока. Спасибо Вам заранее. Очень рад, что нашел эту страницу.
                                                                              1. Александр Мальцев
                                                                                Александр Мальцев
                                                                                13.12.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.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.12.2020, 14:28
                                                                                  Здравствуйте. Версия слайдера с возможностью его настройки посредством параметров сейчас находится в разработке.
                                                                                  В данный момент пока планирую реализовать следующие параметры:
                                                                                  {
                                                                                    infinite: infinite, // будет определять с зацикливанием или без зацикливания
                                                                                    autoplay: autoplay, // будет включать автоматическую смену слайдов
                                                                                    autoplaySpeed: autoplaySpeed, // устанавливает время между автоматической сменой слайдов
                                                                                  }
                                                                                  
                                                                                  Если нужны ещё какие-то параметры для настройки, то напишите.
                                                                                2. Александр
                                                                                  Александр
                                                                                  04.12.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.12.2020, 13:52
                                                                                    Привет! Сделайте пример на «codepen.io» или в другой песочнице, по картинкам трудновато что-то дельное подсказать.
                                                                                    1. Александр
                                                                                      Александр
                                                                                      07.12.2020, 02:03
                                                                                      Думаю так будет даже лучше и проще: trifle22.github.io/slider-test/
                                                                                      Если открывать с мобильного устройства, так слайдер вообще не работает, и начинает работать только после перезагрузки страницы =((
                                                                                  2. Kolya
                                                                                    Kolya
                                                                                    28.11.2020, 12:37
                                                                                    Здравстуйте, огромное спасибо за слайдер, а можно как-то переключать сразу 3-4 слайда?
                                                                                    1. Александр Мальцев
                                                                                      Александр Мальцев
                                                                                      05.12.2020, 14:33
                                                                                      Здравствуйте! Посмотрите ответ в этом комментарии.
                                                                                      1. Александр
                                                                                        Александр
                                                                                        04.12.2020, 20:55
                                                                                        Думаю да, надо бы только скрипт подправить, где функции переключения прописаны, но чего-то конкретного сказать не могу ((
                                                                                      2. Фёдор Васькин
                                                                                        Фёдор Васькин
                                                                                        23.11.2020, 12:37
                                                                                        Здравствуйте, Александр! Использую Ваш слайдер в учебных целях. Если я добавляю скрипт и стили в htm файле, то слайдер работает отлично. Если стили подключаю отдельным файлом, то тоже отлично. А если переношу код js в отдельный файл и подключаю скрипт, то при на нажатии на стрелку прокрутки меня почему-то перебрасывает на начало странице, и картинка не прокручивается. Подскажите, пожалуйста, в чём может быть причина и как её можно исправить?
                                                                                        1. Фёдор Васькин
                                                                                          Фёдор Васькин
                                                                                          25.11.2020, 10:18
                                                                                          Разобрался, всё получилось.
                                                                                          1. Анна Бондаренко
                                                                                            Анна Бондаренко
                                                                                            11.12.2020, 15:51
                                                                                            Добрый день. Подскажите, каким было решение…
                                                                                            1. Александр Мальцев
                                                                                              Александр Мальцев
                                                                                              25.11.2020, 15:08
                                                                                              Отлично!
                                                                                          2. Isa
                                                                                            Isa
                                                                                            19.11.2020, 17:16
                                                                                            У меня с этим слайдером проблемы, при подключении css меняется отображение сайта полностью, и плюс слайдер не работает, при нажатии на стрелки картинки не листает
                                                                                            1. Александр Мальцев
                                                                                              Александр Мальцев
                                                                                              21.11.2020, 12:50
                                                                                              Скорее всего у вас конфликт со стилями и скриптами вашего сайта.
                                                                                            2. Isa
                                                                                              Isa
                                                                                              19.11.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.11.2020, 16:45
                                                                                                Здравствуйте! Такое в php обычно выводят циклом (через foreach).
                                                                                              2. Алексей Валерьевич Алексеев
                                                                                                Алексей Валерьевич Алексеев
                                                                                                08.11.2020, 14:39
                                                                                                Спасибо Вам за Вашу работу очень хорошее решение!
                                                                                                Хотел бы спросить есть ли возможность у слайдера перемещаться к конкретному слайду отдельно. Я хочу немного доработать его под свои задачи и сделать мини превью каждого слайда при нажатии на которые происходит переход к нужной картинке по принципу работы индикаторов.

                                                                                                Заранее благодарен!
                                                                                                1. Александр Мальцев
                                                                                                  Александр Мальцев
                                                                                                  12.11.2020, 15:30
                                                                                                  Пожалуйста!
                                                                                                  Такой стандартной возможности нет, но это просто решается (пример).
                                                                                                2. Kitsu-NeshKaa
                                                                                                  Kitsu-NeshKaa
                                                                                                  04.11.2020, 16:53
                                                                                                  Александр, доброго времени суток! Начал использовать ваш слайдер — полет отличный! Вопрос встал когда решил сам его допиливать. Дал всем блокам в слайдере ID и хочу их скрывать в зависимости от того на какой странице находится пользователь. Например блок 5.
                                                                                                  window.onload = function() {
                                                                                                  document.getElementById('5').style.display = «none»;
                                                                                                  }
                                                                                                  Скрытие происходит, но сами слайды не схлопываются и остается пустое место от скрытого слайда. Как их схлопнуть?
                                                                                                  1. Александр Мальцев
                                                                                                    Александр Мальцев
                                                                                                    05.11.2020, 14:51
                                                                                                    Привет!
                                                                                                    Для этого нужно в скрипте изменить одну строчку:
                                                                                                    // замените эту
                                                                                                    _sliderItems = _mainElement.querySelectorAll('.slider__item'),
                                                                                                    // на следующую
                                                                                                    _sliderItems = _mainElement.querySelectorAll('.slider__item:not([style*="display: none;"])'),
                                                                                                    
                                                                                                    1. Kitsu-NeshKaa
                                                                                                      Kitsu-NeshKaa
                                                                                                      05.11.2020, 15:05
                                                                                                      Спасибо за ответ. Блок исчезает но теперь остается пустое место в конце слайдера =(
                                                                                                      1. Kitsu-NeshKaa
                                                                                                        Kitsu-NeshKaa
                                                                                                        05.11.2020, 15:28
                                                                                                        Причем если засунуть в not и в блок класс — то срабатывает
                                                                                                        1. Kitsu-NeshKaa
                                                                                                          Kitsu-NeshKaa
                                                                                                          05.11.2020, 17:19
                                                                                                          Нашел ответ — window.onload слишком поздно срабатывает. Делайте инициализацию слайдера после того как дали класс или скрыли блок слайдера. Александр спасибо!
                                                                                                          1. Александр Мальцев
                                                                                                            Александр Мальцев
                                                                                                            06.11.2020, 11:14
                                                                                                            Пожалуйста!
                                                                                                            1. Kitsu-NeshKaa
                                                                                                              Kitsu-NeshKaa
                                                                                                              06.11.2020, 15:58
                                                                                                              Еще вопрос появился: что нужно добавить при тач-скролинге что бы не листалась вверх-вниз страница?
                                                                                                              1. Александр Мальцев
                                                                                                                Александр Мальцев
                                                                                                                12.11.2020, 15:42
                                                                                                                Для этого нужно просто отменить стандартное поведение браузера в обработчике этого события (пример):
                                                                                                                _mainElement.addEventListener('touchstart', function (e) {
                                                                                                                  e.preventDefault();
                                                                                                                  //...
                                                                                                                });
                                                                                                                _mainElement.addEventListener('touchend', function (e) {
                                                                                                                  e.preventDefault();
                                                                                                                  //...
                                                                                                                });
                                                                                                                
                                                                                                                1. Kitsu-NeshKaa
                                                                                                                  Kitsu-NeshKaa
                                                                                                                  12.11.2020, 17:00
                                                                                                                  не совсем то. Свайпы должны работать по вертикали а по горизонтали страница не должна прокручиваться =)
                                                                                                                  1. Александр Мальцев
                                                                                                                    Александр Мальцев
                                                                                                                    13.11.2020, 14:46
                                                                                                                    Пример со свайпом по вертикали (открыть).
                                                                                                  2. Andrey
                                                                                                    Andrey
                                                                                                    16.10.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.10.2020, 16:03
                                                                                                      Здравствуйте! Можно проверять количество блоков, и формировать вызов функции slick уже в зависимости от их количества.
                                                                                                    2. kadochnikov_k
                                                                                                      kadochnikov_k
                                                                                                      15.10.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.10.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
                                                                                                        SinGlEBW
                                                                                                        14.10.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
                                                                                                          SinGlEBW
                                                                                                          14.10.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.10.2020, 13:46
                                                                                                            Код JavaScript изначально создавался так, чтобы обеспечить работу слайдера именно в режиме зацикливания, а также чтобы он функционировал в устаревших браузерах. После этого он уже дорабатывался для слайдера без зацикливания. Поэтому он, конечно, не оптимизирован конкретно для этой ситуации, да и не вижу в этом смысл. Цель сделать код более универсальным для различных сценариев работы слайдера.

                                                                                                            А так ваше стремление сделать код более оптимальным (особенно с использованием новых возможностей языка) — это конечно хорошо. Но пока дальше двигать этот слайдер нет времени. Только комментариев под этой темой 290. Если у кого-то есть желание в этом развиваться, то я только буду рад этому. Можно создать для этой темы отдельный проект на Github (вынести его из how-to). Тем более это очень хорошая практика для изучения JavaScript. Можно будет делать всем вместе. Первая задача – это конечно объединить различные коды JavaScript слайдера в один и сделать его настройку для различных сценариев через параметры. Потом уже переходить к следующим этапам. Если будут желающие улучшать и оптимизировать, то напишите об этом. А если нет, то буду это делать сам, но позже.
                                                                                                          2. Anvar
                                                                                                            Anvar
                                                                                                            06.10.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.10.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
                                                                                                              Ola
                                                                                                              04.10.2020, 19:23
                                                                                                              Спасибо Вам Огромное Александр что Вы нам помогаете и делитесь с нами своими знаниями!
                                                                                                              Вы наш добрый Ангел!***))) Все работает! Как всегда полезный и обьяснен до мелочей чудо-урок!
                                                                                                              кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
                                                                                                              1. Александр Мальцев
                                                                                                                Александр Мальцев
                                                                                                                05.10.2020, 07:38
                                                                                                                Спасибо за отзыв! Рад, что полезен.
                                                                                                              2. Ola
                                                                                                                Ola
                                                                                                                04.10.2020, 19:19
                                                                                                                Спасибо Вам Огромное Александр что Вы нам помогаете и делитесь с нами своими знаниями!
                                                                                                                Вы наш добрый Ангел!***))) Все работает!!! Как всегда полезный и обьяснен до мелочей чудо-урок!
                                                                                                                кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
                                                                                                                1. Artur Zavaziev
                                                                                                                  Artur Zavaziev
                                                                                                                  26.09.2020, 03:51
                                                                                                                  Здравствуйте! Спасибо большое за слайдер!

                                                                                                                  Я вывел его в шапке и в цикле для постов wordpress (как галерею каждого проекта), в итоге на странице получился основной слайдер в шапке, и слайдеры у каждого поста. Есть проблема в том, что не работает прокрутка слайдов при нажатии ctrl + F5 у слайдеров постов (работает только у слайдера в шапке), или иногда, когда заходишь на страницу впервые. Но стоит просто обновить и все работает, пока снова не завершишь сеанс надолго. В чем может быть проблема? Что-то с кэшем связано? Пробовал вставлять все коды, которые вы тут приводили на проверку наличия слайдов, не помогло. Помогите пожалуйста, заранее благодарю!!!
                                                                                                                  1. Александр Мальцев
                                                                                                                    Александр Мальцев
                                                                                                                    26.09.2020, 14:22
                                                                                                                    Здравствуйте! Спасибо!
                                                                                                                    Попробуйте их инициализировать как показано в этом примере.
                                                                                                                    1. Artur Zavaziev
                                                                                                                      Artur Zavaziev
                                                                                                                      26.09.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.09.2020, 04:52
                                                                                                                        Тут однозначно сложно подсказать, может какие-то другие JavaScript плагины, подключенные к странице, на это влияют. Так в коде, который вы привели, всё чётко.

                                                                                                                        Попробуйте убрать все другие js-скрипты и стили, подключенные к странице, и проверить будут ли работать слайдеры. Если будет всё работать отлично, то тогда нужно искать стили и скрипты, которые мешают работе слайдеров. Если это подтвердится, то тогда (если необходимы стили и скрипты, с которыми идёт конфликт) нужно менять название классов у элементов, а затем внести соответствующие изменения в CSS и JavaScript файлы слайдера (т.е. изменить одни имена классов на другие).
                                                                                                                  2. Алексей
                                                                                                                    Алексей
                                                                                                                    24.09.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.09.2020, 14:17
                                                                                                                      Здравствуйте! Как добавить слайдеру управление тапом можно посмотреть в примерах, которые приведены в комментариях. Оттуда нужно взять соответствующий код и добавить его в свой.
                                                                                                                      Также в статье и комментариях имеются примеры, в которых показана возможность обновления состояния слайдера при изменении экрана. Из них тоже можно извлечь нужный код и добавить его в свой.

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

                                                                                                                      В планах имеется, конечно, сделать единый JavaScript код слайдера с возможностью его настройкой для разных ситуаций с помощью аргументов. Но пока такого кода нет. В данный момент единственным решением будет — это самостоятельно собрать код, который вы хотите из различных примеров.
                                                                                                                    2. Sheldon
                                                                                                                      Sheldon
                                                                                                                      11.09.2020, 13:08
                                                                                                                      Здравствуйте. Как сделать чтобы при ресайзе шаг у слайдера не ломался? Когда меняю размер браузера без обновления страницы у меня срабатывает медиа запрос, при котором количество слайдов в видимой области меняется. Шаг слайдера становится не правильным.
                                                                                                                      1. Sheldon
                                                                                                                        Sheldon
                                                                                                                        11.09.2020, 15:13
                                                                                                                        1. Александр Мальцев
                                                                                                                          Александр Мальцев
                                                                                                                          12.09.2020, 06:30
                                                                                                                          Здравствуйте. Добавил такую возможность в скрипт. Слайдер: itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-32
                                                                                                                          1. Sheldon
                                                                                                                            Sheldon
                                                                                                                            12.09.2020, 11:51
                                                                                                                            Еще одна проблемка только уже с другим слайдером itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-12. Если уменьши количество item'ов в слайдере, например до 4-х, то у слайдера при ресайзе тоже ломается адаптивность. При быстром листании слайдера не успевают подгрузится новые слайды и видно как они появляются. Для того чтобы это увидеть нужно уменьшить высоту .slider__control до 50px.
                                                                                                                            1. Александр Мальцев
                                                                                                                              Александр Мальцев
                                                                                                                              20.09.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
                                                                                                                                Sheldon
                                                                                                                                20.09.2020, 17:17
                                                                                                                                Не знаю как сделать скриншот первой проблемы, вы же ее уже решили. Шаг у слайдера (https://itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-2) при ресайзе больше не ломается. Спасибо за ответ.
                                                                                                                            2. Sheldon
                                                                                                                              Sheldon
                                                                                                                              12.09.2020, 10:50
                                                                                                                              Еще раз спасибо.
                                                                                                                              1. Sheldon
                                                                                                                                Sheldon
                                                                                                                                12.09.2020, 10:38
                                                                                                                                Спасибо. Не ожидал что так быстро ответите. Есть ли у вас канал на ютубе? Или другой ресурс, на который можно подписаться?
                                                                                                                                1. Александр Мальцев
                                                                                                                                  Александр Мальцев
                                                                                                                                  14.09.2020, 15:21
                                                                                                                                  Пожалуйста! Ссылки на социальные сети и другие ресурсы приведены в футере сайта.
                                                                                                                          2. Дмитрий
                                                                                                                            Дмитрий
                                                                                                                            21.08.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
                                                                                                                              AriYeS
                                                                                                                              11.08.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.08.2020, 02:24
                                                                                                                                Здравствуйте! Так там же есть методы left и right. Используйте их для управления слайдами, а код, связанный с этими кнопками, тогда в принципе вообще можно удалить. Например, можно сделать так.
                                                                                                                                1. AriYeS
                                                                                                                                  AriYeS
                                                                                                                                  13.08.2020, 15:05
                                                                                                                                  О, об этом я почему то не подумал, спасибо)
                                                                                                                              2. Володя
                                                                                                                                Володя
                                                                                                                                10.08.2020, 16:58
                                                                                                                                Здраствуйте) возникла проблема слайдер работает тольлько если он на влазит на весь екран… если прокрутить к приверу чуть ниже — чтобы была половина слайдера видна — перестают работать кнопки и сам слайдер не показывает слайды в цикле…
                                                                                                                                1. Александр Мальцев
                                                                                                                                  Александр Мальцев
                                                                                                                                  13.08.2020, 02:31
                                                                                                                                  Добрый день! Посмотрите ответ в этом комментарии.
                                                                                                                                2. Александр
                                                                                                                                  Александр
                                                                                                                                  07.08.2020, 22:51
                                                                                                                                  Здравствуйте! Спасибо за слайдер, это реально чудо, поставил уже на нескольких своих проектах. Сейчас возникла такая проблемка — есть скрипт LazyLoad для картинок, и он грузится чуть позже скрипта слайдера, в итоге как я понял — слайдер изначально определяет свою высоту по содержимому и высоте картинок, и с включенным lazyload он не успевает понять высоту картинки и в итоге под слайдером и картинкой получается большой оступ. Как это можно решить без изменения порядка подгрузки скриптов? Пробовал в стилях задавать контейнеру высоту в px, тогда это спасает от части, но все равно кривовато, т.к картинки бывают разные по высоте. Надеюсь внятно объяснил)
                                                                                                                                  1. Александр Мальцев
                                                                                                                                    Александр Мальцев
                                                                                                                                    10.08.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
                                                                                                                                    kadochnikov_k
                                                                                                                                    30.07.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.07.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
                                                                                                                                        kadochnikov_k
                                                                                                                                        19.08.2020, 16:45
                                                                                                                                        Добрый день! В процессе использования слайдера столкнулся с такой проблемой: если на странице несколько слайдеров и в одном из них по каким то причинам нет слайдов, то слайдеры ниже перестают работать (им не присваиваются id, но даже если их присвоить то слайдеры не инициализируются). Никак не могу понять в чем дело, может быть вы подскажите?
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          Александр Мальцев
                                                                                                                                          20.08.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
                                                                                                                                          kadochnikov_k
                                                                                                                                          30.07.2020, 16:02
                                                                                                                                          Спасибо огромное, все заработало!
                                                                                                                                      2. РУСЛАН
                                                                                                                                        РУСЛАН
                                                                                                                                        30.07.2020, 00:08
                                                                                                                                        Добрый вечер, а как реализовать, чтоб реагировал пролистование через сенсорные экраны, а то не могу найти решение а у вас сделоно отлично. Спасибо за рание за совет.
                                                                                                                                        1. Александр Мальцев
                                                                                                                                          Александр Мальцев
                                                                                                                                          30.07.2020, 15:20
                                                                                                                                          Здравствуйте! В этом комментарии есть решение как это выполнить.
                                                                                                                                          1. РУСЛАН
                                                                                                                                            РУСЛАН
                                                                                                                                            30.07.2020, 15:33
                                                                                                                                            Спасибо огромное))
                                                                                                                                        2. Mihail
                                                                                                                                          Mihail
                                                                                                                                          24.07.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
                                                                                                                                            Mihail
                                                                                                                                            30.07.2020, 01:14
                                                                                                                                            Добрый день! Вопрос снимаю. Прошу прощения, что отвлек. Тупанул. Просто не добавил зацикливание.
                                                                                                                                          2. VLADIMIR BULANOV
                                                                                                                                            VLADIMIR BULANOV
                                                                                                                                            16.07.2020, 10:10
                                                                                                                                            Здравствуйте! Наконец, нашел нормальное руководство по слайдерам без «скачайте наш плагин или ничего не получится!»)) Отличные примеры, все гуд, но столкнулся с проблемой:
                                                                                                                                            В моем слайдере возможно динамическое изменение HTML кода в слайдах, из-за этого обычный метод _refresh не совсем подходит… (в частности, я «налопатил» уже каким то образом до того, что при изменении хтмл у меня трансформации слайдов «улетают» в рандомных направлениях, делая слайдер неюзабельным пока не обновишь страницу).

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

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

                                                                                                                                                  Ничего не выходило(
                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                    Александр Мальцев
                                                                                                                                                    20.07.2020, 15:29
                                                                                                                                                    Добрый день! Вам необходимо инициализировать слайдер после открытия popup окна. Если вы будете делать это до открытия popup, то слайдер не будет работать, т.к. он не может рассчитать размеры элементов, т.к. они ещё не известны.
                                                                                                                                                    1. stas452
                                                                                                                                                      stas452
                                                                                                                                                      20.07.2020, 15:33
                                                                                                                                                      Всё отлично, а как мне его инициализировать? (СЛАЙДЕР)
                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                        Александр Мальцев
                                                                                                                                                        20.07.2020, 15:43
                                                                                                                                                        Вам необходимо в обработчик события после того как окно будет показано добавить код:
                                                                                                                                                        const slider = multiItemSlider('.slider');
                                                                                                                                                        
                                                                                                                                                        1. stas452
                                                                                                                                                          stas452
                                                                                                                                                          20.07.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.07.2020, 15:58
                                                                                                                                                            Не знаю, это зависит от того, как у вас реализовано popup окно. Сделайте пример на jsFiddle или посмотрите вот эту реализацию слайдера в popup окне. Кроме этого, в комментариях ещё много других примеров, может там уже есть то, что вы ищите.
                                                                                                                                                            1. stas452
                                                                                                                                                              stas452
                                                                                                                                                              20.07.2020, 18:22
                                                                                                                                                              Я могу вам предоставить код? Можете мне как-то помочь в этом? Сам popup адаптивный под моб.устройста, а вот слайдер внутри него нет, и пример который вы прикрепили тоже не то, уже больше недели не могу найти решение проблемы, всё бы ничего а заказчик ждёт, буду очень признателен вам! Заранее спасибо большое!
                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                Александр Мальцев
                                                                                                                                                                22.07.2020, 15:07
                                                                                                                                                                Предоставьте на jsFiddle эту часть страницы.
                                                                                                                                                                1. stas452
                                                                                                                                                                  stas452
                                                                                                                                                                  22.07.2020, 15:27
                                                                                                                                                                  jsfiddle.net/yf9n530t/

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

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

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

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

                                                                                                                                                        <img
                                                                                                                                                        src=«https://itchief.ru/assets/uploadify/0/8/d/08d470c30f423a4db8b64001b89e967bs.jpg» class=«fancybox thumbnail center»>
                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                          Александр Мальцев
                                                                                                                                                          21.06.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.06.2020, 19:27
                                                                                                                                                          Здравствуйте, помогите пожалуйста разобраться, как мне изменить расположение индикаторов, так как оно находится в скрипте не понимаю как им поменять расположение в блоке слайдера.
                                                                                                                                                          1. Денис
                                                                                                                                                            Денис
                                                                                                                                                            02.06.2020, 20:08
                                                                                                                                                            Попробуйте добавить в стили что-то из серии
                                                                                                                                                            .slider__indicators {
                                                                                                                                                            position: absolute;
                                                                                                                                                            top: 0px;
                                                                                                                                                            }
                                                                                                                                                            1. Святослав
                                                                                                                                                              Святослав
                                                                                                                                                              08.06.2020, 13:47
                                                                                                                                                              Денис спасибо за ответ. уже разобрался.
                                                                                                                                                            2. Святослав
                                                                                                                                                              Святослав
                                                                                                                                                              02.06.2020, 20:02
                                                                                                                                                              Спасибо вам Александр, разобрался. Вопрос снят.
                                                                                                                                                            3. Денис
                                                                                                                                                              Денис
                                                                                                                                                              01.06.2020, 01:49
                                                                                                                                                              Доброго времени суток! Огромное спасибо Вам за сайт в целом и слайдер в частности!
                                                                                                                                                              К сожалению, моей квалификации не хватает, чтобы по достоинству оценить всю его прелесть, но, надеюсь, что это временно…
                                                                                                                                                              Подскажите, пожалуйста, каким образом можно модифицировать код, что бы он работал следующим образом:
                                                                                                                                                              — на странице находится произвольное количество слайдеров (например, 10). Между слайдерами размещен произвольный контент.
                                                                                                                                                              — количество элементов в каждом слайдере — одинаковое.
                                                                                                                                                              — элементы управления есть только на одном (первом слайдере).
                                                                                                                                                              — использование элементов управления на этом слайдере влияет на содержание всех остальных слайдеров — содержание меняется на всех слайдерах сразу.
                                                                                                                                                              Спасибо большое заранее!
                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                Александр Мальцев
                                                                                                                                                                02.06.2020, 13:39
                                                                                                                                                                Здравствуйте! Вам просто нужно по-другому инициализировать слайдеры, чтобы всё работало. Пример кода имеется в этом комментарии.
                                                                                                                                                                1. Денис
                                                                                                                                                                  Денис
                                                                                                                                                                  03.06.2020, 00:15
                                                                                                                                                                  Либо лыжи не едут… ткните, глупому, пальцем, пожалуйста, куда вставлять код из этого комментария? и да… если я правильно все понимаю, то код на гите отличается от того, который вы приводите в качестве примеров… может быть в этом проблема?
                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                    03.06.2020, 14:17
                                                                                                                                                                    Да, не то подсказал.
                                                                                                                                                                    Вот пример.
                                                                                                                                                                    1. Денис
                                                                                                                                                                      Денис
                                                                                                                                                                      13.06.2020, 18:52
                                                                                                                                                                      Огонь! Все прям как нужно! Спасибо за решение! Скажите, а как теперь их запихать в разные вкладки (бутстраповские). Пробовал сюда приделать решение из этого поста, но оно никак не хочет работать… все-таки магия js для меня непостижима(((
                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                        22.06.2020, 14:52
                                                                                                                                                                        Пример, в котором показано как слайдеры можно поместить в разные бутстраповские вкладки.
                                                                                                                                                                        1. Денис
                                                                                                                                                                          Денис
                                                                                                                                                                          07.07.2020, 17:35
                                                                                                                                                                          Спасибо огромное! Все работоет как нужно. Почему сам не догадался — непонятн((( Но зато, немного переделал, что бы оно динамически определяло количество вкладок и вызывало функцию инициализации для каждой. Еще раз огромное спасибо!
                                                                                                                                                                      2. Владимир
                                                                                                                                                                        Владимир
                                                                                                                                                                        11.06.2020, 17:18
                                                                                                                                                                        Здравствуйте, я новичок и не понимаю как сделать к этому примеру еще и чтобы при наведении на основной слайдер с навигацией другие слайдеры тоже переставали листаться, подскажите пожалуйста.
                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                          13.06.2020, 14:57
                                                                                                                                                                          Здравствуйте! Код для реализации этого функционала добавил в конец скрипта. Пример расположен здесь.
                                                                                                                                                                          1. Владимир
                                                                                                                                                                            Владимир
                                                                                                                                                                            14.06.2020, 10:08
                                                                                                                                                                            Спасибо, все работает
                                                                                                                                                                2. Егор
                                                                                                                                                                  Егор
                                                                                                                                                                  14.05.2020, 13:28
                                                                                                                                                                  Александр, спасибо за прекрасный ресурс и невероятно функциональные примеры кодов. Данный слайдер отлично работает в современных браузерах (Chrome), но встал вопрос по пользователям IE 11… В этом старом браузере не работает листание (ни авто, ни кликом). Буду очень признателен за любые советы в данном направлении!

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

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

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

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

                                                                                                                                                                                  вот фото itchief.ru/assets/uploadify/9/2/7/92706e8dfd4c1fc8630b317ace8783d9.png
                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                    02.05.2020, 15:26
                                                                                                                                                                                    Понятно. Скрипт поправил: jsfiddle.net/itchief/rvdjmybx/
                                                                                                                                                                                    1. adfadsfadsfsad
                                                                                                                                                                                      adfadsfadsfsad
                                                                                                                                                                                      02.05.2020, 19:11
                                                                                                                                                                                      БОЛЬШОЕ СПАСИБО!!!
                                                                                                                                                                          2. Mihail
                                                                                                                                                                            Mihail
                                                                                                                                                                            18.04.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.04.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
                                                                                                                                                                                Mihail
                                                                                                                                                                                20.04.2020, 17:17
                                                                                                                                                                                Александр добрый день! Все заработало!!! Спасибо Вам огромное!!! Первый и второй пункт заработал. Скажите пожалуйста этот скрипт никак не конфликтует с 1С Битриксом!? Изначально не сразу срабатывает. Спустя время как будто скрипт адаптируется… Я когда его в первый раз поставил без дополнительных возможностей он отказывался работать и кнопки погинации не работали. Отработали чуть позже. Сейчас в этом посте Ваш ответ на пункт 1 и 2 тоже исправил не сразу отработал скрипт, а спустя время. При чем КЭШ чистил. Скрипт подключен после библиотеки JQUERY в самом низу. Понимаю что этот скрипт никак не задействован с jquery, но все же может кто то писал до меня Вам про аналогичные проблемы с 1 С Битрикс!??? СПАСИБО ЕЩЕ РАЗ!!!
                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                  Александр Мальцев
                                                                                                                                                                                  22.04.2020, 16:37
                                                                                                                                                                                  Здравствуйте!
                                                                                                                                                                                  Оберните весь код, включаю функцию в следующую конструкцию:
                                                                                                                                                                                  (function(){
                                                                                                                                                                                    ...
                                                                                                                                                                                  })();
                                                                                                                                                                                  
                                                                                                                                                                                  Это исключит создание переменных в глобальной области видимости. Если есть какие-то конфликты, то это должно их убрать.
                                                                                                                                                                                  Также попробуйте перезагрузить страницу с помощью Ctrl+F5. Это позволит сделать это с очисткой её кэша в браузере.
                                                                                                                                                                                  1. Mihail
                                                                                                                                                                                    Mihail
                                                                                                                                                                                    24.04.2020, 18:39
                                                                                                                                                                                    Огромное Вам Спасибо!!! Это действительно помогло
                                                                                                                                                                            2. Артём Валерьевич
                                                                                                                                                                              Артём Валерьевич
                                                                                                                                                                              10.04.2020, 13:49
                                                                                                                                                                              Здравствуйте! Спасибо за статью! В веб-разработке не силен, поэтому прошу помощи.
                                                                                                                                                                              Интересует два вопроса:
                                                                                                                                                                              1. Возможно ли добавить подписи под изображениями?
                                                                                                                                                                              2. При подключении слайдера появляется куча пустого места под футером. Скрины прилагаю
                                                                                                                                                                              2.1. проблемная страница
                                                                                                                                                                              2.2. нормальная страница
                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                Александр Мальцев
                                                                                                                                                                                12.04.2020, 14:25
                                                                                                                                                                                Здравствуйте!
                                                                                                                                                                                Конечно, можно. Вот пример.
                                                                                                                                                                                Если под слайдером появляется пустое место, то нужно посмотреть стили. Может у вас какие-нибудь элементы имеют такое же названия классов как используются в этом слайдере. Тут нужно открыть инспектор элементов в браузере и посмотреть, из-за чего это.
                                                                                                                                                                              2. Данияр
                                                                                                                                                                                Данияр
                                                                                                                                                                                03.04.2020, 21:58
                                                                                                                                                                                Здравствуйте!

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

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

                                                                                                                                                                                Можете посоветовать пожалуйста как это можно выполнить и можно ли вообще это сделать с текущим слайдером?
                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                  Александр Мальцев
                                                                                                                                                                                  12.04.2020, 14:30
                                                                                                                                                                                  Здравствуйте!
                                                                                                                                                                                  Слайдер имеет исходные коды, вам никто не запрещает их изменять. Конечно всё это можно выполнить, но это потребует значительного изменения кода.
                                                                                                                                                                                2. Roman Bizikin
                                                                                                                                                                                  Roman Bizikin
                                                                                                                                                                                  01.04.2020, 00:29
                                                                                                                                                                                  Прекрасный слайдер, ввожу в работу и есть задача с которой никак не могу разобраться в виду слабого понимания JS, а именно привести слайдер к такому виду: скриншот.
                                                                                                                                                                                  я модифицировал код, чтобы получать активный объект по центру при перелистывании, но теперь мне нужно изменить ширину активного элемента, вот эта задача и не выходит
                                                                                                                                                                                  есть параметры ширины, которые определяют кол-во отображаемых элементов:
                                                                                                                                                                                  flex: 0 0 33.33%;
                                                                                                                                                                                   max-width: 33.33%;
                                                                                                                                                                                  пробовал дать активному элементу 50%, а остальным 25% соответственно, получается брак, т.к. свойство transition при вычислении выбрасывает элементы за пределы экрана, подскажите пожалуйста какое может быть решение
                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                    12.04.2020, 14:41
                                                                                                                                                                                    Спасибо! Изменить ширину слайдов не сложно осуществить. Но, на сколько в этом случае должен выполняться сдвиг слайдов? Здесь уже не получиться это выполнять на фиксированную величину. Может вместо сдвига, использовать эффект появления слайдов или какой-то другой?
                                                                                                                                                                                  2. Alex
                                                                                                                                                                                    Alex
                                                                                                                                                                                    30.03.2020, 23:10
                                                                                                                                                                                    Александр, вечер добрый. Вопрос такого плана, как можно сделать слайдер от маленькой до большой картинки. Допустим у нас есть 3 картинки одна: 150x150, вторая 300x300, третья 500x500. Слайдер начинает движение и картинку 150x150 помещает в в див где была 300x300 картинка, при этом сохраняя размеры дива увеличивая 150x150. ну и т.д. Прикладываю пример, ну и да, они не должны быть в одной линии должны находится диагонально.
                                                                                                                                                                                    скриншот
                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                      03.04.2020, 07:48
                                                                                                                                                                                      Добрый день!
                                                                                                                                                                                      Это можно выполнить, например, через CSS анимацию и абсолютное позиционирование. На каждой ключевой точке определяете соответственно размеры и положение слайда.
                                                                                                                                                                                      Пример, в котором показано, как можно сделать такую анимацию: slider-example-1
                                                                                                                                                                                      1. Alex
                                                                                                                                                                                        Alex
                                                                                                                                                                                        03.04.2020, 12:35
                                                                                                                                                                                        Спасибо!
                                                                                                                                                                                    2. Дмитрий
                                                                                                                                                                                      Дмитрий
                                                                                                                                                                                      22.03.2020, 12:47
                                                                                                                                                                                      Александр, добрый день, после установки слайдера видимо возник конфликт скриптов, поможете разобраться?
                                                                                                                                                                                      Куда можно отправить ссылку на страницу с проблемой?
                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                        22.03.2020, 13:33
                                                                                                                                                                                        Добрый день! Email есть в футере сайта.
                                                                                                                                                                                      2. Алишер Пигалев
                                                                                                                                                                                        Алишер Пигалев
                                                                                                                                                                                        27.02.2020, 11:24
                                                                                                                                                                                        Доброго времени суток. Наткнулся недавно на ваш сайт и он мне уже во многом помог. Большое спасибо.
                                                                                                                                                                                        Хотелось бы получить вашего совета.
                                                                                                                                                                                        Столкнулся с ситуацией что на странице нужно 3 слайдера. Слайдеры работают исправно, с зацикливанием и автозаменой слайдов. Но в одном слайдере нужно чтобы выводился только один элемент, а в остальных двух уже установленное количество. Пытался сделать через ID и через дублирование класса slider__item в slider__item1, но все равно сбиваются все элементы слайдеров (через ID просто улетает навигация и слегка меняются размеры элементов, через дублирование (для лучшего понимания продублировал все функции и смежные классы для slider_item) ломается полностью автозамена слайдов и навигация).
                                                                                                                                                                                        Подскажите пожалуйста, как лучше это можно реализовать?
                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                          29.02.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.03.2020, 05:36
                                                                                                                                                                                            Огромное спасибо) Пробовал делать через ИД, но видимо где-то допускал ошибку и плыла вся страница. Теперь все работает) Процветания вам и вашему сайту)
                                                                                                                                                                                        2. Dannik
                                                                                                                                                                                          Dannik
                                                                                                                                                                                          20.02.2020, 15:46
                                                                                                                                                                                          Здравствуйте! В комментариях был ответ по поводу свайпа слайдера (пример itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-touch), к сожалению свайп работает только в мобильниках, возможно ли это сделать дэсктопах? Было бы здорово, т.к пользователи уже привыкли тянуть каждый слайд
                                                                                                                                                                                          1. Dannik
                                                                                                                                                                                            Dannik
                                                                                                                                                                                            20.02.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
                                                                                                                                                                                              Dannik
                                                                                                                                                                                              20.02.2020, 15:54
                                                                                                                                                                                              Вот только не понятно как включить тач на десктопе
                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                Александр Мальцев
                                                                                                                                                                                                22.02.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
                                                                                                                                                                                            Dannik
                                                                                                                                                                                            18.02.2020, 12:06
                                                                                                                                                                                            Спасибо огромное за слайдер! Подскажите пожалуйста, как сделать так что бы пользователь всегда видел половинки картинок предыдущих и следующих слайдов. Хотел сделать слайдер товаров как на www.toyota.com/
                                                                                                                                                                                            Менял, подкручивал css, но что то не выходит. Пока не особо силен в верстке.
                                                                                                                                                                                            Заранее благодарен!
                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                              18.02.2020, 15:27
                                                                                                                                                                                              Можно сделать дополнительную обёртку для слайдов и установить ей padding-left и padding-right.
                                                                                                                                                                                              Пример слайда с частичным отображением предыдущего и следующего слайдов.
                                                                                                                                                                                              1. Dannik
                                                                                                                                                                                                Dannik
                                                                                                                                                                                                18.02.2020, 16:16
                                                                                                                                                                                                Спасибо Вам IT шеф! Желаю здравия Вам и Вашим близким!
                                                                                                                                                                                            2. Данияр
                                                                                                                                                                                              Данияр
                                                                                                                                                                                              15.02.2020, 07:03
                                                                                                                                                                                              Александр здравствуйте!
                                                                                                                                                                                              Во-первых, хочу сказать Вам огромное спасибо за такой грамотный подход к реализации слайдера. Это действительно очень круто реализовано и самое главное просто и содержит всё необходимое, спасибо!
                                                                                                                                                                                              Во-вторых, у меня есть вопрос, который я не знаю как решить. В общем, я на одной странице использую два слайдера, они полностью работают. Но там есть проблема с индикаторами, почему-то у первого слайдера отображаются два индикатора (можно увидеть это в коде) и визуально при перелистывании слайдов индикатор меняется, но первый продолжает гореть. В коде отображается так, что один индикатор стоит поверх другого и если его удалить, то всё норм, но вопрос как это реализовать и почему такое происходит?

                                                                                                                                                                                              Ссылка на полный код: https://codepen.io/asdasdasdasd111/pen/oNXbKxQ
                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                Александр Мальцев
                                                                                                                                                                                                16.02.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.02.2020, 21:27
                                                                                                                                                                                                  Спасибо огромное! Всё получилось, спасибо Вам! Успехов в развитии!)
                                                                                                                                                                                              2. Ольга
                                                                                                                                                                                                Ольга
                                                                                                                                                                                                12.02.2020, 20:10
                                                                                                                                                                                                Добрый вечер!
                                                                                                                                                                                                Не совсем понятно как добавить дополнительный слайд. К примеру мне необходимо не 4, а 5 слайдов.
                                                                                                                                                                                                1. Ольга
                                                                                                                                                                                                  Ольга
                                                                                                                                                                                                  12.02.2020, 21:58
                                                                                                                                                                                                  Разобралась сама=)
                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                    13.02.2020, 06:38
                                                                                                                                                                                                    Привет! Отлично!
                                                                                                                                                                                                2. ILIA LITVINOV
                                                                                                                                                                                                  ILIA LITVINOV
                                                                                                                                                                                                  12.02.2020, 00:07
                                                                                                                                                                                                  Александр, здравствуйте.

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

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

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

                                                                                                                                                                                                  Есть какой-то вариант заставить скрипт видеть margin между слайдами?:)
                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                    14.02.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
                                                                                                                                                                                                    kaduk yevheniy
                                                                                                                                                                                                    10.02.2020, 22:28
                                                                                                                                                                                                    Добрый вечер Александр. Изначально хотел поблагодарить вас и сказать вам огромное спасибо за всю проделанную вами работу! очень много интересных статей. и у меня вопрос если можно ?!
                                                                                                                                                                                                    а возможно ли сделать так чтобы под вашим слайдером были видны минимизированные фото, и средняя показывалась на слайдере.
                                                                                                                                                                                                    спасибо за раннее в любом случае.
                                                                                                                                                                                                    визуальный пример приведен ниже.
                                                                                                                                                                                                    Евгений
                                                                                                                                                                                                    src=«itchief.ru/assets/uploadify/b/f/6/bf6dc956cb54483da64e55d544a26d69.jpg» />
                                                                                                                                                                                                    1. Vlad
                                                                                                                                                                                                      Vlad
                                                                                                                                                                                                      29.01.2020, 19:27
                                                                                                                                                                                                      извините за глупый вопрос, а что за отдельный код инициализации скрипта, например
                                                                                                                                                                                                      var slider = multiItemSlider('.slider')
                                                                                                                                                                                                      ?
                                                                                                                                                                                                      Его обязательно размещать? Если да, то где?
                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                        30.01.2020, 04:36
                                                                                                                                                                                                        Очень много компонентов на веб-страницах построены с использованием JavaScript. JavaScript – это код, который добавляет к компоненту определённую логику. В большинстве случаев эта логика организована в виде определённой функции, в данном случае, с помощью multiItemSlider.

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

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

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

                                                                                                                                                                                                        Инициализацию слайдера выполнять конечно нужно, если хотите чтобы он работал.
                                                                                                                                                                                                        Обычно все скрипты подключают к странице перед закрывающим тегом body. Данный код необходимо разместить после подключения js-скрипта слайдера.
                                                                                                                                                                                                        1. Vlad
                                                                                                                                                                                                          Vlad
                                                                                                                                                                                                          30.01.2020, 08:53
                                                                                                                                                                                                          спасибо за развернутый ответ, теперь понятно.
                                                                                                                                                                                                          П.С. у вас шикарный навороченный сайт, сразу видна рука айтишника ) Особенно мне понравилось меню в мобильном с прокруткой. Было бы здорово, если бы вы написали статью, как это сделать, я думаю многим было бы интересно.
                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                            Александр Мальцев
                                                                                                                                                                                                            30.01.2020, 14:49
                                                                                                                                                                                                            Спасибо! Как сделать такое меню напишу.
                                                                                                                                                                                                      2. Vlad
                                                                                                                                                                                                        Vlad
                                                                                                                                                                                                        28.01.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.01.2020, 16:58
                                                                                                                                                                                                          Чтобы табы выполнить с прокруткой, их (сами вкладки) необходимо поместить в контейнер и добавить к нему следующее CSS-свойство:
                                                                                                                                                                                                          overflow-x: auto;
                                                                                                                                                                                                          
                                                                                                                                                                                                          Это основной принцип, детальная реализация зависит от разметки.

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

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

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

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

                                                                                                                                                                                                                  Слайдер работает прекрасно. Но в параллельном блоке есть статичная информацию с меню, кнопками и текстом (два блока в родителе: слайдер и статичный блок с текстом поверх и кнопками). И у меня никак не получается подогнать грамотно высоту статичного блока под высоту слайдера. Пробовал через min-height: ...vw, но на ipad все уплывает. Подскажите, пожалуйста, как в таком случае указать высоту блока равную высоте параллельного блока от одного родителя с учетом того, что этот параллельный блок (слайдер) размещен через absolut…
                                                                                                                                                                                                                  1. Kasper
                                                                                                                                                                                                                    Kasper
                                                                                                                                                                                                                    27.12.2019, 16:11
                                                                                                                                                                                                                    Александр, я вам безумно благодарен! Уже настроил дизайн под слайдер slick, но все равно буду переделывать под вашу реализацию. Спасибо большое!
                                                                                                                                                                                                                2. AV
                                                                                                                                                                                                                  AV
                                                                                                                                                                                                                  24.12.2019, 17:35
                                                                                                                                                                                                                  Александр добрый день! Давно использую ваш слайдер — все прекрасно работает! Но вот возникла потребность в импользовании пагинации. Посмотрел отдельную тему с таковым сладером — понял, что для меня он не очень удобен. Хотелось бы иметь один полностью универсальный слайдер — как в этом примере, но с вожможностью подключения пагинации в html, также как стрелки для прокрутки влево-вправо. Как можно это реализовать?
                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                                    26.12.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
                                                                                                                                                                                                                      AV
                                                                                                                                                                                                                      26.12.2019, 22:54
                                                                                                                                                                                                                      Да, действительно просто! Спасибо!
                                                                                                                                                                                                                  2. kadochnikov_k
                                                                                                                                                                                                                    kadochnikov_k
                                                                                                                                                                                                                    10.12.2019, 16:29
                                                                                                                                                                                                                    Добрый день! Огромное спасибо за слайдер! Подскажите, как обнулять таймер листания при перелистывании слайдов пальцем? Сейчас из-за того, что таймер не обнуляется, происходят двойные перелистывания.
                                                                                                                                                                                                                    1. kadochnikov_k
                                                                                                                                                                                                                      kadochnikov_k
                                                                                                                                                                                                                      10.12.2019, 17:40
                                                                                                                                                                                                                      Уже разобрался) Еще вопрос: можно ли сделать так, чтобы слайды не перелистывались, если все слайды сейчас на экране?
                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                                        11.12.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
                                                                                                                                                                                                                          kadochnikov_k
                                                                                                                                                                                                                          12.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.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
                                                                                                                                                                                                                              kadochnikov_k
                                                                                                                                                                                                                              13.12.2019, 13:43
                                                                                                                                                                                                                              Огромное спасибо! Все работает)
                                                                                                                                                                                                                    2. Дмитрий
                                                                                                                                                                                                                      Дмитрий
                                                                                                                                                                                                                      05.12.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.12.2019, 09:38
                                                                                                                                                                                                                        Проблему решил, дело было в ранней инициализации js скрипта.
                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                          06.12.2019, 13:24
                                                                                                                                                                                                                          Отлично!
                                                                                                                                                                                                                      2. Тимур Хабибуллин
                                                                                                                                                                                                                        Тимур Хабибуллин
                                                                                                                                                                                                                        28.11.2019, 08:44
                                                                                                                                                                                                                        Доброго времени суток. Не могу понять, как реализовать слайдер с вкладками. Примеры видел реализации от простых для сложных, который уже тут есть. Но все равно не хочет работать.
                                                                                                                                                                                                                        Ссылка
                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                          29.11.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
                                                                                                                                                                                                                          Igor
                                                                                                                                                                                                                          25.11.2019, 11:30
                                                                                                                                                                                                                          доброго времени суток! спасибо за Ваши труды)
                                                                                                                                                                                                                          Есть вопрос:
                                                                                                                                                                                                                          как отключить зацикливание в данном слайдере?
                                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                                            Александр Мальцев
                                                                                                                                                                                                                            25.11.2019, 15:24
                                                                                                                                                                                                                            Привет! Спасибо за отзыв!
                                                                                                                                                                                                                            Ссылка на пример в котором нет зацикливания.
                                                                                                                                                                                                                            1. Igor
                                                                                                                                                                                                                              Igor
                                                                                                                                                                                                                              25.11.2019, 18:57
                                                                                                                                                                                                                              Спасибо, всё работает как часы :)
                                                                                                                                                                                                                          2. alyon
                                                                                                                                                                                                                            alyon
                                                                                                                                                                                                                            21.11.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.11.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
                                                                                                                                                                                                                                alyon
                                                                                                                                                                                                                                21.11.2019, 12:55
                                                                                                                                                                                                                                спасибо!
                                                                                                                                                                                                                            2. kadochnikov_k
                                                                                                                                                                                                                              kadochnikov_k
                                                                                                                                                                                                                              18.11.2019, 12:08
                                                                                                                                                                                                                              Здравствуйте! Подскажите, почему в этом примере не работает автоматическая смена слайдов?
                                                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                                                Александр Мальцев
                                                                                                                                                                                                                                18.11.2019, 14:39
                                                                                                                                                                                                                                Привет!
                                                                                                                                                                                                                                В этом примере она отключена:
                                                                                                                                                                                                                                var slider = multiItemSlider('.slider', {
                                                                                                                                                                                                                                  isCycling: false
                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                
                                                                                                                                                                                                                                Если нужно её включить, то установите параметру isCycling значение true:
                                                                                                                                                                                                                                var slider = multiItemSlider('.slider', {
                                                                                                                                                                                                                                  isCycling: true
                                                                                                                                                                                                                                });
                                                                                                                                                                                                                                
                                                                                                                                                                                                                                1. kadochnikov_k
                                                                                                                                                                                                                                  kadochnikov_k
                                                                                                                                                                                                                                  19.11.2019, 10:22
                                                                                                                                                                                                                                  Спасибо! Еще заметил проблему — на мобильном, если слайдер находится не по центру экрана (чуть выше или чуть ниже), то перестают срабатывать кнопки, индикаторы и слайды перестают перелистываться
                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                                                    19.11.2019, 14:11
                                                                                                                                                                                                                                    Спасибо, есть такое. Поправил этот момент.
                                                                                                                                                                                                                              2. Roman
                                                                                                                                                                                                                                Roman
                                                                                                                                                                                                                                10.11.2019, 16:24
                                                                                                                                                                                                                                Здравствуйте. Очень простой, а поэтому крутой, слайдер.
                                                                                                                                                                                                                                Столкнулся с такой проблемой: мне надо что бы на одной странице друг за другом шло несколько слайдеров, но когда сделал один и раскопировал его ниже, то работает только первый, а остальные (точная копия!) не хотят.
                                                                                                                                                                                                                                Подскажите, пожалуйста, в чём может быть дело и как это исправить?(
                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                  Александр Мальцев
                                                                                                                                                                                                                                  10.11.2019, 17:12
                                                                                                                                                                                                                                  Привет! Спасибо за отзыв. На странице можно поместить какое угодно количество слайдов.
                                                                                                                                                                                                                                  После этого их нужно инициализировать. Как это выполнить есть в этом комментарии.
                                                                                                                                                                                                                                  Если через цикл, то показано как это выполнить в этом комментарии.
                                                                                                                                                                                                                                  1. Roman
                                                                                                                                                                                                                                    Roman
                                                                                                                                                                                                                                    11.11.2019, 19:25
                                                                                                                                                                                                                                    спасибо огромное!
                                                                                                                                                                                                                                  2. Roman
                                                                                                                                                                                                                                    Roman
                                                                                                                                                                                                                                    10.11.2019, 16:36
                                                                                                                                                                                                                                    даже в примерах если вставить два раза блок contаiner, то работать будет только первый
                                                                                                                                                                                                                                  3. kadochnikov_k
                                                                                                                                                                                                                                    kadochnikov_k
                                                                                                                                                                                                                                    08.11.2019, 12:36
                                                                                                                                                                                                                                    Добрый день! Не могу разобраться со ссылками. Комментариях уже задавали вопрос, вы привели в качестве примера эту ссылку, но в этом примере проблема такая же — ссылки не открываются при нажатии по ним левой кнопкой мыши. Подскажете, что за это отвечает?
                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                      08.11.2019, 13:47
                                                                                                                                                                                                                                      Привет! А в каком браузере не работает? Обновил этот пример для наглядности. Попробовал в нескольких браузерах, всё отлично. Вот ещё один пример, здесь есть изображение и ссылка.
                                                                                                                                                                                                                                      1. kadochnikov_k
                                                                                                                                                                                                                                        kadochnikov_k
                                                                                                                                                                                                                                        11.11.2019, 11:10
                                                                                                                                                                                                                                        Спасибо, примеры работают. Но начинаются проблемы, когда добавляю индикаторы слайдов. Без индикаторов ссылки работают как положено, а с индикаторами открываются только в новых вкладках.
                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                          12.11.2019, 13:19
                                                                                                                                                                                                                                          Ага, есть такая проблема. Поправил JavaScript код во всех примерах в статье и комментариях. Теперь проблем с ссылками нет.
                                                                                                                                                                                                                                          Добавил новый пример. Его можно посмотреть здесь.
                                                                                                                                                                                                                                          1. kadochnikov_k
                                                                                                                                                                                                                                            kadochnikov_k
                                                                                                                                                                                                                                            13.11.2019, 12:58
                                                                                                                                                                                                                                            Огромное спасибо! А в какой части кода была проблема? Было бы интересно разобрать.
                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                                                                              13.11.2019, 15:27
                                                                                                                                                                                                                                              Здесь можно посмотреть изменения.
                                                                                                                                                                                                                                              1. kadochnikov_k
                                                                                                                                                                                                                                                kadochnikov_k
                                                                                                                                                                                                                                                14.11.2019, 16:18
                                                                                                                                                                                                                                                Спасибо!
                                                                                                                                                                                                                                    2. kadochnikov_k
                                                                                                                                                                                                                                      kadochnikov_k
                                                                                                                                                                                                                                      07.11.2019, 15:30
                                                                                                                                                                                                                                      Большое спасибо за слайдер! А как добавить возможность свайпа слайдов?
                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                                                        07.11.2019, 15:47
                                                                                                                                                                                                                                        Как это добавить можно посмотреть в этом комментарии.
                                                                                                                                                                                                                                      2. Марина
                                                                                                                                                                                                                                        Марина
                                                                                                                                                                                                                                        06.11.2019, 15:18
                                                                                                                                                                                                                                        Здравствуйте, подскажите что изменить в коде чтобы слайдер с зацикливанием и автоматической сменой слайдов стал вертикальным, возможно ли это?
                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                          07.11.2019, 15:45
                                                                                                                                                                                                                                          Привет! Да, можно это выполнить. Пример расположен здесь.
                                                                                                                                                                                                                                        2. NADEZHDA TABANKOVA
                                                                                                                                                                                                                                          NADEZHDA TABANKOVA
                                                                                                                                                                                                                                          05.11.2019, 21:52
                                                                                                                                                                                                                                          Александр, добрый вечер.
                                                                                                                                                                                                                                          Решила использовать Ваш плагин. Очень понравился.
                                                                                                                                                                                                                                          Есть ли возможность в нем листать при помощи swipe при использовании в мобильных версиях?
                                                                                                                                                                                                                                          Спасибо
                                                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                                                            Александр Мальцев
                                                                                                                                                                                                                                            06.11.2019, 13:42
                                                                                                                                                                                                                                            Привет! В этом комментарии есть пример с использованием touch событий.
                                                                                                                                                                                                                                          2. Денис
                                                                                                                                                                                                                                            Денис
                                                                                                                                                                                                                                            02.11.2019, 12:53
                                                                                                                                                                                                                                            Александр, здравствуйте. Подскажите пожалуйста, как сделать так, чтобы изображение сохраняло своё соотношение сторон, а не соотношение слайдера?
                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                                                                              03.11.2019, 11:14
                                                                                                                                                                                                                                              Привет! Если нужно что-то убрать, то делайте это. Вот пример слайдера с изображениями, в котором не установлены какие-то фиксированные размеры.
                                                                                                                                                                                                                                            2. NADEZHDA TABANKOVA
                                                                                                                                                                                                                                              NADEZHDA TABANKOVA
                                                                                                                                                                                                                                              23.10.2019, 00:27
                                                                                                                                                                                                                                              Александр, спасибо большое за карусель. Все отлично работает.
                                                                                                                                                                                                                                              Но столкнулась с небольшой проблемой: кнопки для перелистывания у меня должны выступать за блок .slider. Если переношу их в другое место или меняю overflow, то карусель перестает работать нужным образом. Подскажите, пожалуйста, в чем моя ошибка? Что я упускаю?
                                                                                                                                                                                                                                              Заранее большое спасибо
                                                                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                                                                Александр Мальцев
                                                                                                                                                                                                                                                23.10.2019, 15:16
                                                                                                                                                                                                                                                Спасибо за отзыв.
                                                                                                                                                                                                                                                Для того чтобы кнопки можно было вынести за пределы основной области карусели в неё необходимо просто добавить ещё одну обёртку. В этом примере показано как это можно сделать.
                                                                                                                                                                                                                                                1. NADEZHDA TABANKOVA
                                                                                                                                                                                                                                                  NADEZHDA TABANKOVA
                                                                                                                                                                                                                                                  27.10.2019, 20:01
                                                                                                                                                                                                                                                  Александр, добрый день.
                                                                                                                                                                                                                                                  Спасибо большое. Все работает :)
                                                                                                                                                                                                                                              2. Ivan
                                                                                                                                                                                                                                                Ivan
                                                                                                                                                                                                                                                18.10.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
                                                                                                                                                                                                                                                  Ivan
                                                                                                                                                                                                                                                  18.10.2019, 15:09
                                                                                                                                                                                                                                                  Вот тут код страницы целиком: jsfiddle.net/a6zcq594/
                                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                                                                    19.10.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
                                                                                                                                                                                                                                                      Ivan
                                                                                                                                                                                                                                                      19.10.2019, 21:50
                                                                                                                                                                                                                                                      Вы имеете в виду заменить стандартный код вызова var slider = multiItemSlider('.slider') на указанный вами?
                                                                                                                                                                                                                                                      Символы комментирования, как я понимаю, надо убрать было, но у меня как в исходном варианте, так и с убранными все равно та же проблема остается, т.е. работать начинает только после перезагрузки страницы с активированным блоком :(

                                                                                                                                                                                                                                                      Может быть нюансы с тем, где именно код нужно размещать?
                                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                                                                        20.10.2019, 02:59
                                                                                                                                                                                                                                                        Нужно заменить. Значит не правильно вставили. Ссылка на пример, размещённый на JSFiddle.
                                                                                                                                                                                                                                                        1. Ivan
                                                                                                                                                                                                                                                          Ivan
                                                                                                                                                                                                                                                          20.10.2019, 13:02
                                                                                                                                                                                                                                                          Спасибо большое. Теперь работает.
                                                                                                                                                                                                                                                2. Андрей
                                                                                                                                                                                                                                                  Андрей
                                                                                                                                                                                                                                                  11.10.2019, 13:38
                                                                                                                                                                                                                                                  Не получается сделать автоматическую смену слайдов как в первом примере слайда
                                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                                                                    11.10.2019, 14:02
                                                                                                                                                                                                                                                    Это можно решить простым скриптиком:
                                                                                                                                                                                                                                                    var currentIndexSlider = 1;
                                                                                                                                                                                                                                                    var timerId = setInterval(function(){
                                                                                                                                                                                                                                                      if (currentIndexSlider >= 4) {
                                                                                                                                                                                                                                                        clearTimeout(timerId);
                                                                                                                                                                                                                                                        return;
                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                      slider.right();
                                                                                                                                                                                                                                                      currentIndexSlider++;
                                                                                                                                                                                                                                                    }, 5000);
                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                    Ссылка на пример.
                                                                                                                                                                                                                                                    1. Андрей
                                                                                                                                                                                                                                                      Андрей
                                                                                                                                                                                                                                                      11.10.2019, 14:08
                                                                                                                                                                                                                                                      а цикличность как добавить?
                                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                                                                        11.10.2019, 14:18
                                                                                                                                                                                                                                                        Вот пример слайдера с цикличностью.
                                                                                                                                                                                                                                                        1. Андрей
                                                                                                                                                                                                                                                          Андрей
                                                                                                                                                                                                                                                          11.10.2019, 18:36
                                                                                                                                                                                                                                                          Спасибо большое)
                                                                                                                                                                                                                                                  2. Елена Савченко
                                                                                                                                                                                                                                                    Елена Савченко
                                                                                                                                                                                                                                                    30.09.2019, 12:01
                                                                                                                                                                                                                                                    Александр, доброго дня. Я новичок в веб верстке, по вашему коду для слайдера с изображениями, не получается добавить фото. Создала папки examples\images, но они так и не отображаются.
                                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                                      30.09.2019, 13:48
                                                                                                                                                                                                                                                      Привет! В этом комментарии есть пример слайдера с изображениями. Или нужен какой-то другой?
                                                                                                                                                                                                                                                    2. Анастасия
                                                                                                                                                                                                                                                      Анастасия
                                                                                                                                                                                                                                                      28.08.2019, 22:58
                                                                                                                                                                                                                                                      Александр, подскажите, пожалуйста, как сделать нижние кружки для слайдера, нужно чтобы в мобильной версии были кружки, а в десктопе стрелки.
                                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                                                                        04.09.2019, 15:15
                                                                                                                                                                                                                                                        Ну, тут нужно просто CSS подредактировать.
                                                                                                                                                                                                                                                        Как это выполнить можно посмотреть здесь.
                                                                                                                                                                                                                                                      2. Святослав
                                                                                                                                                                                                                                                        Святослав
                                                                                                                                                                                                                                                        02.08.2019, 19:16
                                                                                                                                                                                                                                                        Здраствуйте, использую ваш слайдер для картинок, но не знаю как сделать так, чтобы при изменении области видимости экрана все равно можно было нажимать на кнопки(т.е слайдер работает только тогда, когда он находится в области видимости на экране, а мне необходимо убрать данную фичу). Буду очень благодарен за ответ
                                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                                          05.08.2019, 12:48
                                                                                                                                                                                                                                                          Здравствуйте.
                                                                                                                                                                                                                                                          Удалил эту фичу, вот ссылка на пример.
                                                                                                                                                                                                                                                        2. владислав Ковалев
                                                                                                                                                                                                                                                          владислав Ковалев
                                                                                                                                                                                                                                                          30.07.2019, 12:52
                                                                                                                                                                                                                                                          Здравствуйте, очень простой хороший слайдер, только можно ли кастомизировать его и сделать прокрутку вертикальной?
                                                                                                                                                                                                                                                          1. владислав Ковалев
                                                                                                                                                                                                                                                            владислав Ковалев
                                                                                                                                                                                                                                                            30.07.2019, 13:28
                                                                                                                                                                                                                                                            я уже сделал, но было неплохо сделать пометку в статье, мне кажется может пригодится и еще раз спасибо за слайдер.
                                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                                                                                              30.07.2019, 14:36
                                                                                                                                                                                                                                                              Здравствуйте. Если есть желание поделиться этим рецептом, то будем рады этому.
                                                                                                                                                                                                                                                          2. Сергей
                                                                                                                                                                                                                                                            Сергей
                                                                                                                                                                                                                                                            10.07.2019, 15:49
                                                                                                                                                                                                                                                            Здравствуйте. Спасибо за слайдер. Есть проблема с ссылками. В последних двух примерах ссылки не работают. Например если сделать изображение ссылкой, то она не будет работать.
                                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                                                                                              20.07.2019, 15:30
                                                                                                                                                                                                                                                              Здравствуйте.
                                                                                                                                                                                                                                                              Спасибо! Поправил этот момент в этих примерах.
                                                                                                                                                                                                                                                              Вот пример слайдера с изображениями.
                                                                                                                                                                                                                                                            2. joseph
                                                                                                                                                                                                                                                              joseph
                                                                                                                                                                                                                                                              19.06.2019, 22:22
                                                                                                                                                                                                                                                              Добрый день, Александр. Несколько дней не могу победить перемещение кнопок «влево» и «вправо» при использовании данного слайдера. Если в качестве элемента вставить ссылку на изображение, открываемое в галерее Fancybox (из вашей статьи про фотогалерею), и пролистать несколько слайдов, а потом выйти из режима просмотра, то кнопка навигации уплывает и оказывается совсем не на своём месте. Подскажите, где копать?
                                                                                                                                                                                                                                                              1. Александр Мальцев
                                                                                                                                                                                                                                                                Александр Мальцев
                                                                                                                                                                                                                                                                20.06.2019, 14:01
                                                                                                                                                                                                                                                                Добрый день. Покажите реальный пример, например, на JSFiddle.
                                                                                                                                                                                                                                                                1. joseph
                                                                                                                                                                                                                                                                  joseph
                                                                                                                                                                                                                                                                  20.06.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.06.2019, 15:14
                                                                                                                                                                                                                                                                    Там есть поле для ввода текста со значком "+". Вставляете в это поле URL и нажимаете на этот значок. Всё ваш файл подключен. Можно подключить скрипт и стили со своего сайта. Если его нет, то найти эти файлы можно на cdnjs.com. Очень хороший сервис, стоит разобраться…
                                                                                                                                                                                                                                                              2. Роман Поверенный
                                                                                                                                                                                                                                                                Роман Поверенный
                                                                                                                                                                                                                                                                05.06.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.06.2019, 02:21
                                                                                                                                                                                                                                                                  Добрый. На Github расположен базовый код, а различные примеры его использования здесь. В каком виде вы хотите добавить к нему пагинацию?
                                                                                                                                                                                                                                                                  1. Роман Поверенный
                                                                                                                                                                                                                                                                    Роман Поверенный
                                                                                                                                                                                                                                                                    10.06.2019, 07:39
                                                                                                                                                                                                                                                                    Добрый день. Пагинация нужна кликабельная именно тогда когда разрешение экрана становится маленьким и показ идет одного слайда. Тач события есть для перелистывания пальцем, а вот доп навигатор в виде пагинации нет, но нужен в виде точек под слайдером. На сайте есть и другие более тяжелые слайдеры с подобной пагинацией, но ваш слайдер заинтересовал более всего для дальнейшего использования, из-за его «легковесия».
                                                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                                                      11.06.2019, 07:38
                                                                                                                                                                                                                                                                      Добрый день. Добавил в статью пример, как это можно выполнить.
                                                                                                                                                                                                                                                                      1. Роман Поверенный
                                                                                                                                                                                                                                                                        Роман Поверенный
                                                                                                                                                                                                                                                                        10.06.2019, 13:33
                                                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                                                          10.06.2019, 13:54
                                                                                                                                                                                                                                                                          Понятно, что вы хотите. Подумаю, как это лучше реализовать…
                                                                                                                                                                                                                                                                          1. Роман Поверенный
                                                                                                                                                                                                                                                                            Роман Поверенный
                                                                                                                                                                                                                                                                            11.06.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.06.2019, 15:00
                                                                                                                                                                                                                                                                              Добавлю эту возможность к слайдеру.
                                                                                                                                                                                                                                                                  2. joseph
                                                                                                                                                                                                                                                                    joseph
                                                                                                                                                                                                                                                                    04.06.2019, 22:55
                                                                                                                                                                                                                                                                    Доброго времени суток. Спасибо, Александр, за Ваши труды и за то, что делитесь ими. Слайдер очень симпатичный, но у меня, как и у товарища Alek (31 мая 2019, 19:52) не получается добиться от него корректного открытия ссылок. Если я вставляю между тегами … ссылку в виде картинки или текста или другого контейнера div, то курсор при наведении меняется, но при нажатии ЛКМ ничего не происходит (могу перейти по ссылке только через ПКМ). Подскажите, что я делаю не правильно? Код целиком беру из примеров. С уважением.
                                                                                                                                                                                                                                                                    1. joseph
                                                                                                                                                                                                                                                                      joseph
                                                                                                                                                                                                                                                                      04.06.2019, 23:48
                                                                                                                                                                                                                                                                      Использовал код из Вашей ссылки от 19 марта 2019, 14:57 — с ним всё открывается. Благодарю.
                                                                                                                                                                                                                                                                    2. Alex
                                                                                                                                                                                                                                                                      Alex
                                                                                                                                                                                                                                                                      03.06.2019, 14:33
                                                                                                                                                                                                                                                                      Как можно сделать, чтобы слайдер по клику на кнопки вперед-назад «пролистывал» два или три слайда?
                                                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                                                                                        05.06.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
                                                                                                                                                                                                                                                                          Alex
                                                                                                                                                                                                                                                                          06.06.2019, 16:13
                                                                                                                                                                                                                                                                          Спасибо)
                                                                                                                                                                                                                                                                      2. Максим
                                                                                                                                                                                                                                                                        Максим
                                                                                                                                                                                                                                                                        25.03.2019, 16:37
                                                                                                                                                                                                                                                                        Александр, подскажите пожалуйста, в теме есть описание инициализации слайдера, а как сделать так, чтобы функция перестала работать? Я делаю инит при открытии модального окна, а по закрытию хочу чтобы функция останавливалась и элементы возвращались на начальные положения.
                                                                                                                                                                                                                                                                        1. Dmytro Bazaluk
                                                                                                                                                                                                                                                                          Dmytro Bazaluk
                                                                                                                                                                                                                                                                          16.03.2019, 22:30
                                                                                                                                                                                                                                                                          Добрый вечер. Нашёл ваш замечательный слайдер, все доступно и понятно. Но нужна функция пролистывания слайдов ‘пальцем’, как на слайдерах бутстрап, все не могу найти именно эту функцию. Подскажите направление поиска или какое-то решение.
                                                                                                                                                                                                                                                                          Спасибо огромное)
                                                                                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                                                                                            Александр Мальцев
                                                                                                                                                                                                                                                                            19.03.2019, 14:57
                                                                                                                                                                                                                                                                            Добрый! Для этого на страницу нужно добавить обработку для событий touchstart и toachend. Как это сделать можно посмотреть в этом примере.
                                                                                                                                                                                                                                                                            1. Dmytro Bazaluk
                                                                                                                                                                                                                                                                              Dmytro Bazaluk
                                                                                                                                                                                                                                                                              29.04.2019, 09:16
                                                                                                                                                                                                                                                                              Добрый день еще раз, появилась задача с интеграцией индикатора (пагинации слайдера). Подскажите пожалуйста направление внедрения данного индикатора, стрелки работают как плюс/минус ширина слайда, а вот индикатор должен переносить на указанное изображение, либо экран с изображениями. Тут я не знаю, как проще это сделать. Вот скриншот.
                                                                                                                                                                                                                                                                              Спасибо большое!
                                                                                                                                                                                                                                                                              1. Dmytro Bazaluk
                                                                                                                                                                                                                                                                                Dmytro Bazaluk
                                                                                                                                                                                                                                                                                01.05.2019, 20:45
                                                                                                                                                                                                                                                                                Вопрос решен, кому еще нужны индикаторы, ищите на gitHub
                                                                                                                                                                                                                                                                                Огромное вас спасибо
                                                                                                                                                                                                                                                                          2. Алибек
                                                                                                                                                                                                                                                                            Алибек
                                                                                                                                                                                                                                                                            10.03.2019, 01:46
                                                                                                                                                                                                                                                                            Здравствуйте, можете подсказать как сделать так чтобы после каждой прокрутке сайта страница не отматывалась к верху?
                                                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                                                                                                              11.03.2019, 14:18
                                                                                                                                                                                                                                                                              Здравствуйте! Это ошибка исправлена. Код слайдера и примеры обновлены.
                                                                                                                                                                                                                                                                            2. nik
                                                                                                                                                                                                                                                                              nik
                                                                                                                                                                                                                                                                              06.03.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.03.2019, 11:56
                                                                                                                                                                                                                                                                                Здравствуйте! В комментариях уже приводил такой пример. Вот ссылка на него.
                                                                                                                                                                                                                                                                                1. nik
                                                                                                                                                                                                                                                                                  nik
                                                                                                                                                                                                                                                                                  06.03.2019, 12:18
                                                                                                                                                                                                                                                                                  там не посредственно указывается ид, а я говорю о переменной ид категории которая выводиться. что бы скрипт автоматом понимал что ид другой и обрабатывал слайдер.
                                                                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                                                                                                    06.03.2019, 14:59
                                                                                                                                                                                                                                                                                    Без изменения кода слайдера инициализировать все слайдеры на странице можно так:
                                                                                                                                                                                                                                                                                    document.querySelectorAll('.slider').forEach(function(item, index){ 
                                                                                                                                                                                                                                                                                      item.setAttribute('slider-id', index);
                                                                                                                                                                                                                                                                                      multiItemSlider('[slider-id="'+ index +'"]');
                                                                                                                                                                                                                                                                                    });
                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                    1. nik
                                                                                                                                                                                                                                                                                      nik
                                                                                                                                                                                                                                                                                      06.03.2019, 15:19
                                                                                                                                                                                                                                                                                      Александр вот то что нужно. Спасибо, Вам вот теперь можно пользоваться в переменных.
                                                                                                                                                                                                                                                                              2. Дмитрий
                                                                                                                                                                                                                                                                                Дмитрий
                                                                                                                                                                                                                                                                                15.02.2019, 17:03
                                                                                                                                                                                                                                                                                а как сдеалать что бы окно появлялось с помощью кода javascript, типа как в примере который вы показали с бутстрапом?
                                                                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                                                                  Александр Мальцев
                                                                                                                                                                                                                                                                                  17.02.2019, 15:51
                                                                                                                                                                                                                                                                                  Набросок этого решения можно посмотреть здесь.
                                                                                                                                                                                                                                                                                  1. Дмитрий
                                                                                                                                                                                                                                                                                    Дмитрий
                                                                                                                                                                                                                                                                                    17.02.2019, 16:01
                                                                                                                                                                                                                                                                                    Очень круто!!! Спасибо большое!!! У вас хороший ресурс, жду больше уроков!!!
                                                                                                                                                                                                                                                                                2. Дмитрий
                                                                                                                                                                                                                                                                                  Дмитрий
                                                                                                                                                                                                                                                                                  05.02.2019, 21:32
                                                                                                                                                                                                                                                                                  Спасибо большое, все очень хорошо все показано.Подскажите пожалуйста(похожий вопрос уже тут был, но мне не понятно), как сделать это в динамическом модальном окне, только что бы без бутстрапа и jquery, заранее спасибо
                                                                                                                                                                                                                                                                                  1. Дмитрий
                                                                                                                                                                                                                                                                                    Дмитрий
                                                                                                                                                                                                                                                                                    07.02.2019, 15:15
                                                                                                                                                                                                                                                                                    Спасибо!!! Очень понятно все!!! У вас хорошие материал!!!
                                                                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                                                                      07.02.2019, 14:45
                                                                                                                                                                                                                                                                                      Пожалуйста. Пример слайдера в модальном окне на чистом JavaScript:
                                                                                                                                                                                                                                                                                      itchief.ru/examples/lab.php?topic=javascript&file=chiefslider-example-10
                                                                                                                                                                                                                                                                                      1. Дмитрий
                                                                                                                                                                                                                                                                                        Дмитрий
                                                                                                                                                                                                                                                                                        07.02.2019, 16:37
                                                                                                                                                                                                                                                                                        а как сдеалать что бы окно появлялось с помощью кода javascript, типа как в примере который вы показали с бутстрапом
                                                                                                                                                                                                                                                                                    2. Сергей
                                                                                                                                                                                                                                                                                      Сергей
                                                                                                                                                                                                                                                                                      20.12.2018, 20:48
                                                                                                                                                                                                                                                                                      Не работает на моём сайте:
                                                                                                                                                                                                                                                                                      Uncaught TypeError: Cannot read property 'querySelectorAll' of null

                                                                                                                                                                                                                                                                                      хотел отзывы в слайды засунуть, а работать отказывается:
                                                                                                                                                                                                                                                                                      vk.cc/8PIbRa

                                                                                                                                                                                                                                                                                      Можно как-то решить?
                                                                                                                                                                                                                                                                                      1. Александр Мальцев
                                                                                                                                                                                                                                                                                        Александр Мальцев
                                                                                                                                                                                                                                                                                        21.12.2018, 14:05
                                                                                                                                                                                                                                                                                        Если вы хотите поместить его в head (что не желательно), то код, находящийся в slider.js необходимо поместить внутри функции:
                                                                                                                                                                                                                                                                                        document.addEventListener('DOMContentLoaded', function(){ 
                                                                                                                                                                                                                                                                                          // весь код помещаем сюда
                                                                                                                                                                                                                                                                                        }, false);
                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                        Это обеспечит выполнение кода только после загрузки DOM.
                                                                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                                                                          21.12.2018, 14:00
                                                                                                                                                                                                                                                                                          Вы подключаете скрипт в head, а необходимо перед закрывающим тегом body.
                                                                                                                                                                                                                                                                                          1. Сергей
                                                                                                                                                                                                                                                                                            Сергей
                                                                                                                                                                                                                                                                                            21.12.2018, 16:29
                                                                                                                                                                                                                                                                                            Заработало, спасибо!
                                                                                                                                                                                                                                                                                        2. Дарья
                                                                                                                                                                                                                                                                                          Дарья
                                                                                                                                                                                                                                                                                          31.10.2018, 12:46
                                                                                                                                                                                                                                                                                          Александр, добрые день! Помогите разобраться, почему при дублировании слайдера, не работает второй и последующие слайдеры? В качестве примера, я взяла первый слайдер, представленный на этой странице. Спасибо.
                                                                                                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                                                                                                            Александр Мальцев
                                                                                                                                                                                                                                                                                            31.10.2018, 14:55
                                                                                                                                                                                                                                                                                            Добрый! Не знаю, наверно что-то не правильно делаете! Вот пример страницы, на которой используются 2 слайдера.
                                                                                                                                                                                                                                                                                            1. Дарья
                                                                                                                                                                                                                                                                                              Дарья
                                                                                                                                                                                                                                                                                              31.10.2018, 15:01
                                                                                                                                                                                                                                                                                              Спасибо большое!!! увидела свою ошибку
                                                                                                                                                                                                                                                                                              1. Дарья
                                                                                                                                                                                                                                                                                                Дарья
                                                                                                                                                                                                                                                                                                31.10.2018, 15:17
                                                                                                                                                                                                                                                                                                хотя, Александр, не подскажите еще вот какой вопрос, дело в том, что слайдеры заключены во вкладки, сами по себе без вкладок работают. Во вкладках работает только первый(
                                                                                                                                                                                                                                                                                                <!DOCTYPE html>
                                                                                                                                                                                                                                                                                                <html lang="ru">
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                <head>
                                                                                                                                                                                                                                                                                                  <meta charset="utf-8">
                                                                                                                                                                                                                                                                                                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                                                                                                                                                                                                                                                                                                  <title>JavaScript - Как сделать слайдер для сайта</title>
                                                                                                                                                                                                                                                                                                  <style>
                                                                                                                                                                                                                                                                                                    /*!
                                                                                                                                                                                                                                                                                                     * chiefSlider (https://itchief.ru/lessons/php/feedback-form-for-website)
                                                                                                                                                                                                                                                                                                     * Copyright 2018 Alexander Maltsev
                                                                                                                                                                                                                                                                                                     * Licensed under MIT (https://github.com/itchief/feedback-form/blob/master/LICENSE)
                                                                                                                                                                                                                                                                                                     */
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    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";
                                                                                                                                                                                                                                                                                                      height: 3000px;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    .slider {
                                                                                                                                                                                                                                                                                                      position: relative;
                                                                                                                                                                                                                                                                                                      overflow: hidden;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    .slider__wrapper {
                                                                                                                                                                                                                                                                                                      display: flex;
                                                                                                                                                                                                                                                                                                      transition: transform 0.6s ease;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    .slider__item {
                                                                                                                                                                                                                                                                                                      flex: 0 0 100%;
                                                                                                                                                                                                                                                                                                      max-width: 100%;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    .slider__control {
                                                                                                                                                                                                                                                                                                      position: absolute;
                                                                                                                                                                                                                                                                                                      top: 50%;
                                                                                                                                                                                                                                                                                                      display: none;
                                                                                                                                                                                                                                                                                                      align-items: center;
                                                                                                                                                                                                                                                                                                      justify-content: center;
                                                                                                                                                                                                                                                                                                      width: 40px;
                                                                                                                                                                                                                                                                                                      color: #fff;
                                                                                                                                                                                                                                                                                                      text-align: center;
                                                                                                                                                                                                                                                                                                      opacity: 0.5;
                                                                                                                                                                                                                                                                                                      height: 50px;
                                                                                                                                                                                                                                                                                                      transform: translateY(-50%);
                                                                                                                                                                                                                                                                                                      background: rgba(0, 0, 0, .5);
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    .slider__control_show {
                                                                                                                                                                                                                                                                                                      display: flex;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    .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;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                            .clr:after, .clr:before {
                                                                                                                                                                                                                                                                                                      clear: both;
                                                                                                                                                                                                                                                                                                      content: '';
                                                                                                                                                                                                                                                                                                      display: block;
                                                                                                                                                                                                                                                                                                      line-height: 0;
                                                                                                                                                                                                                                                                                                    } 
                                                                                                                                                                                                                                                                                                    .main-services {
                                                                                                                                                                                                                                                                                                        margin-top: 10px;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                        .tabs { 
                                                                                                                                                                                                                                                                                                          width: 1000px; 
                                                                                                                                                                                                                                                                                                          padding: 0px; 
                                                                                                                                                                                                                                                                                                          margin: 0 auto; 
                                                                                                                                                                                                                                                                                                          position: relative; 
                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        .desc{
                                                                                                                                                                                                                                                                                                            display:none;
                                                                                                                                                                                                                                                                                                            animation: scale 0.7s ease-in-out; 
                                                                                                                                                                                                                                                                                                            width: 180px;
                                                                                                                                                                                                                                                                                                            animation: scale 0.7s ease-in-out;
                                                                                                                                                                                                                                                                                                        width: 180px;
                                                                                                                                                                                                                                                                                                        text-align: justify;
                                                                                                                                                                                                                                                                                                        margin-top: 10px;
                                                                                                                                                                                                                                                                                                        border: 1px solid #DEE8F2;
                                                                                                                                                                                                                                                                                                        padding: 10px;
                                                                                                                                                                                                                                                                                                        height: 200px;
                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                        .section_tab { 
                                                                                                                                                                                                                                                                                                          display: none;  
                                                                                                                                                                                                                                                                                                          padding: 15px; 
                                                                                                                                                                                                                                                                                                          background: white; 
                                                                                                                                                                                                                                                                                                          position: absolute; 
                                                                                                                                                                                                                                                                                                          top: 0; 
                                                                                                                                                                                                                                                                                                          left: 180px;
                                                                                                                                                                                                                                                                                                          border: 1px solid #DEE8F2;
                                                                                                                                                                                                                                                                                                          margin-left: 30px;
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        p { 
                                                                                                                                                                                                                                                                                                          margin: 0; 
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        input { 
                                                                                                                                                                                                                                                                                                          display: none; 
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        label { 
                                                                                                                                                                                                                                                                                                          display: block; 
                                                                                                                                                                                                                                                                                                          width: 180px; 
                                                                                                                                                                                                                                                                                                          padding: 15px;  
                                                                                                                                                                                                                                                                                                          cursor: pointer; 
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        input:checked + label { 
                                                                                                                                                                                                                                                                                                            color: #e95210;
                                                                                                                                                                                                                                                                                                        background: #fff;
                                                                                                                                                                                                                                                                                                        border-bottom: 1px solid #e95210;
                                                                                                                                                                                                                                                                                                        /* text-align: center; */
                                                                                                                                                                                                                                                                                                        padding-bottom: 2px;
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        #tab1:checked ~ .content1, #tab2:checked ~ .content2, #tab3:checked ~ .content3, #tab4:checked ~ .content4 { 
                                                                                                                                                                                                                                                                                                          display: block; 
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        .section_tab { 
                                                                                                                                                                                                                                                                                                          animation: scale 0.7s ease-in-out; 
                                                                                                                                                                                                                                                                                                        } 
                                                                                                                                                                                                                                                                                                        @keyframes scale { 
                                                                                                                                                                                                                                                                                                          0% { 
                                                                                                                                                                                                                                                                                                          transform: scale(0.9); 
                                                                                                                                                                                                                                                                                                          opacity: 0; 
                                                                                                                                                                                                                                                                                                          } 
                                                                                                                                                                                                                                                                                                          50% { 
                                                                                                                                                                                                                                                                                                          transform: scale(1.005); 
                                                                                                                                                                                                                                                                                                          opacity: 0.5; 
                                                                                                                                                                                                                                                                                                          } 
                                                                                                                                                                                                                                                                                                          100% { 
                                                                                                                                                                                                                                                                                                          transform: scale(1); 
                                                                                                                                                                                                                                                                                                          opacity: 1; 
                                                                                                                                                                                                                                                                                                          } 
                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                  </style>
                                                                                                                                                                                                                                                                                                </head>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                <body>
                                                                                                                                                                                                                                                                                                   <div id="services_container"> 
                                                                                                                                                                                                                                                                                                        <div class="tabs"> 
                                                                                                                                                                                                                                                                                                            <input id="tab1" type="radio" name="tabs" checked> 
                                                                                                                                                                                                                                                                                                            <label for="tab1">ТЕКСТ</label> 
                                                                                                                                                                                                                                                                                                            <div class="content1 desc">ТЕКСТ</div>
                                                                                                                                                                                                                                                                                                            <input id="tab2" type="radio" name="tabs"> 
                                                                                                                                                                                                                                                                                                            <label for="tab2">ТЕКСТ</label> 
                                                                                                                                                                                                                                                                                                            <div class="content2 desc">ТЕКСТ</div>
                                                                                                                                                                                                                                                                                                            <section class="section_tab content1">
                                                                                                                                                                                                                                                                                                              <div class="main-services clr">
                                                                                                                                                                                                                                                                                                                <div id="slider-1" 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>                
                                                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                                            </section>
                                                                                                                                                                                                                                                                                                            <section class="section_tab content2"> 
                                                                                                                                                                                                                                                                                                             <div class="main-services clr">
                                                                                                                                                                                                                                                                                                              <div id="slider-2" class="slider" style="margin-top: 20px;">
                                                                                                                                                                                                                                                                                                                <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>  
                                                                                                                                                                                                                                                                                                             </div>
                                                                                                                                                                                                                                                                                                            </section>
                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                  <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 = []; // массив элементов
                                                                                                                                                                                                                                                                                                        // наполнение массива _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 () {
                                                                                                                                                                                                                                                                                                          var direction = this.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 slider1 = multiItemSlider('#slider-1');
                                                                                                                                                                                                                                                                                                    var slider2 = multiItemSlider('#slider-2');
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                  </script>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                </body>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                </html>							
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                							
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                                                                                  Александр Мальцев
                                                                                                                                                                                                                                                                                                  31.10.2018, 16:29
                                                                                                                                                                                                                                                                                                  Так и должно быть! Когда вы активируете слайдер на элементе (в данном случае во 2 контейнере), который не отображается, скрипт не может его рассчитать, т.к. не знает ширину элемента, в которой данный слайдер помещён. А первый контейнер отображается, его ширина известна и для него расчёт выполняется правильно.
                                                                                                                                                                                                                                                                                                  В этом случае, например, можно активировать слайдер при активировании вкладки:
                                                                                                                                                                                                                                                                                                  var slider1, slider2;
                                                                                                                                                                                                                                                                                                  var activateSlider = function (dataSlider) {
                                                                                                                                                                                                                                                                                                    if (dataSlider === '#slider-1' && slider1 === undefined) {
                                                                                                                                                                                                                                                                                                      slider1 = multiItemSlider(dataSlider);
                                                                                                                                                                                                                                                                                                    } else if (dataSlider === '#slider-2' && slider2 === undefined) {
                                                                                                                                                                                                                                                                                                      slider2 = multiItemSlider(dataSlider);
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                  document.addEventListener('change', function (e) {
                                                                                                                                                                                                                                                                                                    var
                                                                                                                                                                                                                                                                                                      element = e.target,
                                                                                                                                                                                                                                                                                                      dataSlider = element.getAttribute('data-slider');
                                                                                                                                                                                                                                                                                                    if (!element.hasAttribute('data-slider')) {
                                                                                                                                                                                                                                                                                                      return;
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                    activateSlider(dataSlider);
                                                                                                                                                                                                                                                                                                  });
                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                  var element = document.querySelector('[data-slider]:checked');
                                                                                                                                                                                                                                                                                                  if (element) {
                                                                                                                                                                                                                                                                                                    activateSlider(element.getAttribute('data-slider'));
                                                                                                                                                                                                                                                                                                  }
                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                  Пример с вкладками можно посмотреть здесь.
                                                                                                                                                                                                                                                                                                  1. Дарья
                                                                                                                                                                                                                                                                                                    Дарья
                                                                                                                                                                                                                                                                                                    31.10.2018, 17:17
                                                                                                                                                                                                                                                                                                    Александр, я попыталась добавить 3 вкладку, отредактировала код, в консоли ошибка синтаксическая, помогите пожалуйста(
                                                                                                                                                                                                                                                                                                    Извините, что задергала вас.
                                                                                                                                                                                                                                                                                                                <input id="tab1" type="radio" name="tabs" checked data-slider="#slider-1">
                                                                                                                                                                                                                                                                                                    		      <label for="tab1">ТЕКСТ</label>
                                                                                                                                                                                                                                                                                                    		      <div class="content1 desc">ТЕКСТ</div>
                                                                                                                                                                                                                                                                                                    		      <input id="tab2" type="radio" name="tabs" data-slider="#slider-2">
                                                                                                                                                                                                                                                                                                    		      <label for="tab2">ТЕКСТ</label>
                                                                                                                                                                                                                                                                                                    		      <div class="content2 desc">ТЕКСТ</div>
                                                                                                                                                                                                                                                                                                    		      <input id="tab3" type="radio" name="tabs" data-slider="#slider-3">
                                                                                                                                                                                                                                                                                                    		      <label for="tab3">ТЕКСТ</label>
                                                                                                                                                                                                                                                                                                    		      <div class="content3 desc">ТЕКСТ</div>
                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                        var slider1, slider2, slider3;
                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                        var activateSlider = function (dataSlider) {
                                                                                                                                                                                                                                                                                                          if (dataSlider === '#slider-1' && slider1 === undefined) {
                                                                                                                                                                                                                                                                                                            slider1 = multiItemSlider(dataSlider);
                                                                                                                                                                                                                                                                                                          } else if (dataSlider === '#slider-2' && slider2 === undefined) {
                                                                                                                                                                                                                                                                                                            slider2 = multiItemSlider(dataSlider);
                                                                                                                                                                                                                                                                                                          } else (dataSlider ===  '#slider-3' && slider3 === undefined) {
                                                                                                                                                                                                                                                                                                          	slider3 = multiItemSlider(dataSlider);
                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                                                                                      01.11.2018, 07:51
                                                                                                                                                                                                                                                                                                      Если вкладок может быть сколько угодно много, тогда код для активации слайдеров лучше сделать универсальным, например:
                                                                                                                                                                                                                                                                                                      var sliders = [], i = 0;
                                                                                                                                                                                                                                                                                                      var elements = document.querySelectorAll('input[data-slider]');
                                                                                                                                                                                                                                                                                                      for (i; i < elements.length; i++) {
                                                                                                                                                                                                                                                                                                        sliders[i] = {
                                                                                                                                                                                                                                                                                                          slider: {},
                                                                                                                                                                                                                                                                                                          selector: elements[i].getAttribute('data-slider'),
                                                                                                                                                                                                                                                                                                          activate: false
                                                                                                                                                                                                                                                                                                        };
                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                      var activateSlider = function (dataSlider) {
                                                                                                                                                                                                                                                                                                        var i = 0;
                                                                                                                                                                                                                                                                                                        for (i; i < elements.length; i++) {
                                                                                                                                                                                                                                                                                                          if (sliders[i].selector === dataSlider && sliders[i].activate === false) {
                                                                                                                                                                                                                                                                                                            sliders[i].activate = true;
                                                                                                                                                                                                                                                                                                            sliders[i].slider = multiItemSlider(dataSlider);
                                                                                                                                                                                                                                                                                                            break;
                                                                                                                                                                                                                                                                                                          }
                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                      document.addEventListener('change', function (e) {
                                                                                                                                                                                                                                                                                                        var element = e.target;
                                                                                                                                                                                                                                                                                                        if (!element.hasAttribute('data-slider')) {
                                                                                                                                                                                                                                                                                                          return;
                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                        activateSlider(element.getAttribute('data-slider'));
                                                                                                                                                                                                                                                                                                      });
                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                      var element = document.querySelector('[data-slider]:checked');
                                                                                                                                                                                                                                                                                                      if (element) {
                                                                                                                                                                                                                                                                                                        activateSlider(element.getAttribute('data-slider'));
                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                      Пример можно посмотреть здесь.
                                                                                                                                                                                                                                                                                                      1. Дарья
                                                                                                                                                                                                                                                                                                        Дарья
                                                                                                                                                                                                                                                                                                        01.11.2018, 17:37
                                                                                                                                                                                                                                                                                                        Александр, спасибо!
                                                                                                                                                                                                                                                                                          2. Constantin
                                                                                                                                                                                                                                                                                            Constantin
                                                                                                                                                                                                                                                                                            25.10.2018, 08:58
                                                                                                                                                                                                                                                                                            Александр, а что и где убрать, что бы получился не слайдер с ротацией статей, а просто статьи? Уж больно симпатично получается :)
                                                                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                                                                                                                              28.10.2018, 13:50
                                                                                                                                                                                                                                                                                              Убрал лишнее, теперь его можно использовать для вывода списка статей.
                                                                                                                                                                                                                                                                                              1. Constantin
                                                                                                                                                                                                                                                                                                Constantin
                                                                                                                                                                                                                                                                                                01.11.2018, 08:39
                                                                                                                                                                                                                                                                                                Александр, здравствуйте! Беда…
                                                                                                                                                                                                                                                                                                <section id="rasp-det">
                                                                                                                                                                                                                                                                                                  <div class="container">
                                                                                                                                                                                                                                                                                                    <div class="slider">
                                                                                                                                                                                                                                                                                                      <div class="slider__wrapper">
                                                                                                                                                                                                                                                                                                        <div class="slider__item">
                                                                                                                                                                                                                                                                                                          <div class="slider__content">
                                                                                                                                                                                                                                                                                                            <div class="slider__content_header">
                                                                                                                                                                                                                                                                                                              <a href="#"> <img class="slider__content_img" src="/image/ban1200.png" alt=""></a>
                                                                                                                                                                                                                                                                                                              <span class="slider__content_section">09-11 ноября 2018</span>
                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                            <a href="#">
                                                                                                                                                                                                                                                                                                              <h2 class="slider__content_title">Тренер Навыковых Программ</h2>
                                                                                                                                                                                                                                                                                                            </a>
                                                                                                                                                                                                                                                                                                            <div class="slider__content_footer">
                                                                                                                                                                                                                                                                                                              <span class="slider__content_author">
                                                                                                                                                                                                                                                                                                                <class="title">Константин Сидоров</title>
                                                                                                                                                                                                                                                                                                              </span>
                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                    <div class="slider">
                                                                                                                                                                                                                                                                                                      <div class="slider__wrapper">
                                                                                                                                                                                                                                                                                                        <div class="slider__item">
                                                                                                                                                                                                                                                                                                          <div class="slider__content">
                                                                                                                                                                                                                                                                                                            <div class="slider__content_header">
                                                                                                                                                                                                                                                                                                              <a href="#"> <img class="slider__content_img" src="/image/ban1200.png" alt=""></a>
                                                                                                                                                                                                                                                                                                              <span class="slider__content_section">09-11 ноября 2018</span>
                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                            <a href="#">
                                                                                                                                                                                                                                                                                                              <h2 class="slider__content_title">НЛП-ПРАКТИК I сессия (Сургут)</h2>
                                                                                                                                                                                                                                                                                                            </a>
                                                                                                                                                                                                                                                                                                            <div class="slider__content_footer">
                                                                                                                                                                                                                                                                                                              <span class="slider__content_author">
                                                                                                                                                                                                                                                                                                                <class="title">Елена Гольдберг</title>
                                                                                                                                                                                                                                                                                                              </span>
                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                                                                </section>
                                                                                                                                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                Почему то они в ряд не располагаются, а отображаются одна под другой в одну колонку???
                                                                                                                                                                                                                                                                                                1. Constantin
                                                                                                                                                                                                                                                                                                  Constantin
                                                                                                                                                                                                                                                                                                  29.10.2018, 05:48
                                                                                                                                                                                                                                                                                                  Просто супер!!! Волшебство :)
                                                                                                                                                                                                                                                                                              2. AV
                                                                                                                                                                                                                                                                                                AV
                                                                                                                                                                                                                                                                                                22.10.2018, 22:33
                                                                                                                                                                                                                                                                                                Добрый день Александр! Спасибо за ваш качественный и доступный контент! Подскажите пожалуйста как инициализировать данный слайдер в модальном окне, созданном при помощи бутстрапа?
                                                                                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                                                                                  Александр Мальцев
                                                                                                                                                                                                                                                                                                  23.10.2018, 09:47
                                                                                                                                                                                                                                                                                                  Добрый! Данный код необходимо просто расположить в теле модального окна, т.е. в элементе с классом modal-body.
                                                                                                                                                                                                                                                                                                  Инициализировать слайдер необходимо после открытия окна:
                                                                                                                                                                                                                                                                                                  var slider;
                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                  $('#exampleModal').on('shown.bs.modal', function (e) {
                                                                                                                                                                                                                                                                                                    if (slider === undefined) {
                                                                                                                                                                                                                                                                                                      slider = multiItemSlider('.slider', {
                                                                                                                                                                                                                                                                                                        isCycling: true
                                                                                                                                                                                                                                                                                                      });
                                                                                                                                                                                                                                                                                                    } else {
                                                                                                                                                                                                                                                                                                      slider.cycle();
                                                                                                                                                                                                                                                                                                    }
                                                                                                                                                                                                                                                                                                  })
                                                                                                                                                                                                                                                                                                  $('#exampleModal').on('hidden.bs.modal', function (e) {
                                                                                                                                                                                                                                                                                                    slider.stop();
                                                                                                                                                                                                                                                                                                  })
                                                                                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                  Вот готовый пример: itchief.ru/examples/lab.php?topic=bootstrap&file=b4-slider-in-modal
                                                                                                                                                                                                                                                                                                  1. AV
                                                                                                                                                                                                                                                                                                    AV
                                                                                                                                                                                                                                                                                                    25.10.2018, 12:39
                                                                                                                                                                                                                                                                                                    Спасибо за ответ! В данном виде все хорошо работает. Но что делать если я использую ваш вариант с динамическим созданием модальных окон itchief.ru/bootstrap/modal-dynamic-creation. В таком варианте данная инициализация не срабатывает видимо из-за конфликта id. Как быть в таком случае?
                                                                                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                                                                                      29.10.2018, 14:27
                                                                                                                                                                                                                                                                                                      Т.к. модальное окно добавляется на страницу с помощью кода JavaScript, то ещё необходимо дополнительно написать код, который будет вставлять слайдер в его тело.
                                                                                                                                                                                                                                                                                                      1. AV
                                                                                                                                                                                                                                                                                                        AV
                                                                                                                                                                                                                                                                                                        29.10.2018, 14:47
                                                                                                                                                                                                                                                                                                        Ну я так и понял, потому что перепробовал кучу вариантов подстановки. Очень хочется запустить именно Ваш вариант, так как по структуре и дизайну предполагается использовать галерею, где по клику на изображения из плитки вызываются модальные окна со слайдером. Преимущества Вашеего варианта с модальными окнами и слайдером по отдельности очевидны. Но объединить их мне не хватает знаний — если не трудно помогите решить проблему, для запуска проекта осталось решить только эту задачу.
                                                                                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                                                                                          01.11.2018, 08:39
                                                                                                                                                                                                                                                                                                          Не знаю, что у вас вызвало трудности. Просто вставляете слайдер в динамическое созданное окно, а потом его активируете. Вот пример.
                                                                                                                                                                                                                                                                                                2. Constantin
                                                                                                                                                                                                                                                                                                  Constantin
                                                                                                                                                                                                                                                                                                  10.10.2018, 10:55
                                                                                                                                                                                                                                                                                                  И еще — как сделать так, чтобы влазило побольше текста?
                                                                                                                                                                                                                                                                                                  1. Александр Мальцев
                                                                                                                                                                                                                                                                                                    Александр Мальцев
                                                                                                                                                                                                                                                                                                    10.10.2018, 14:56
                                                                                                                                                                                                                                                                                                    Если высота задана строго, то найти в CSS свойство height и установить необходимый размер.
                                                                                                                                                                                                                                                                                                  2. Constantin
                                                                                                                                                                                                                                                                                                    Constantin
                                                                                                                                                                                                                                                                                                    08.10.2018, 07:34
                                                                                                                                                                                                                                                                                                    Александр, здравствуйте! А как сделать так, чтобы при щелчке мышью на любой области слайдера был переход на нужную страницу?
                                                                                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                                                                                      10.10.2018, 14:54
                                                                                                                                                                                                                                                                                                      Просто сделать разметку так, как нужно.
                                                                                                                                                                                                                                                                                                      Например, вместо div, можно использовать элемент a:
                                                                                                                                                                                                                                                                                                      <div class="slider">
                                                                                                                                                                                                                                                                                                        <div class="slider__wrapper">
                                                                                                                                                                                                                                                                                                          <div class="slider__item">
                                                                                                                                                                                                                                                                                                            <a href="#" style="height: 250px; background: orange; display: block;">1</a>
                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                          <div class="slider__item">
                                                                                                                                                                                                                                                                                                            <a href="#" style="height: 250px; background: green; display: block;">2</a>
                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                           ...
                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                      Кроме этого ещё в данном случае необходимо стили поправить:
                                                                                                                                                                                                                                                                                                      .slider__item>a {
                                                                                                                                                                                                                                                                                                        line-height: 250px;
                                                                                                                                                                                                                                                                                                        font-size: 100px;
                                                                                                                                                                                                                                                                                                        text-align: center;
                                                                                                                                                                                                                                                                                                        text-decoration: none;
                                                                                                                                                                                                                                                                                                      }
                                                                                                                                                                                                                                                                                                      
                                                                                                                                                                                                                                                                                                      1. Alek
                                                                                                                                                                                                                                                                                                        Alek
                                                                                                                                                                                                                                                                                                        31.05.2019, 19:52
                                                                                                                                                                                                                                                                                                        Здравствуйте. Ценные материалы, спасибо. И ссылка работает, но только по ней переходит после вызова контекстного меню правой кнопкой и выбора «Открыть в новой вкладке» или «Открыть в новом окне». Подскажите, пожалуйста, как доработать код, чтобы по ссылка открывалась при единождом клике левой кнопкой мыши? Код взят у Вас на сайте и html, и js. Заранее БЛАГОдарю Вам.
                                                                                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                                                                                          05.06.2019, 14:23
                                                                                                                                                                                                                                                                                                          Здравствуйте! Спасибо.
                                                                                                                                                                                                                                                                                                          В атрибуте href каждой ссылки вам необходимо указать куда она ведёт, т.е. URL.
                                                                                                                                                                                                                                                                                                          <a href="https://itchief.ru" style="height: 250px; background: orange; display: block;">1</a>
                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                          Если вам нужно всегда открывать ссылку в новой вкладке, то к ней нужно добавить атрибут target="_blank":
                                                                                                                                                                                                                                                                                                          <a href="https://itchief.ru" target="_blank" style="height: 250px; background: orange; display: block;">1</a>
                                                                                                                                                                                                                                                                                                          
                                                                                                                                                                                                                                                                                                        2. Nikita
                                                                                                                                                                                                                                                                                                          Nikita
                                                                                                                                                                                                                                                                                                          02.04.2019, 22:41
                                                                                                                                                                                                                                                                                                          Здравствуйте, сделал слайдер со ссылкой по данному примеру, но ссылка не открывается при нажатии ЛКМ, только при нажатии колесиком мыши по ссылке в новом окне открывается. А по ЛКМ просто мигает цифра и не переходит никуда. В чем может быть проблема подскажите, пожалуйста?
                                                                                                                                                                                                                                                                                                          Вернее так: это только в одном из слайдеров — если у вас на сайте в конструкторе код менять то все работает, копирую его в HTML файл не работает
                                                                                                                                                                                                                                                                                                          1. Александр Мальцев
                                                                                                                                                                                                                                                                                                            Александр Мальцев
                                                                                                                                                                                                                                                                                                            03.04.2019, 14:24
                                                                                                                                                                                                                                                                                                            Здравствуйте. Тут нужно смотреть код JavaScript, а именно определить какой участок кода у вас это делает. Может это из-за конфликта с какой-нибудь js библиотекой или js фрагментом вашего кода.
                                                                                                                                                                                                                                                                                                          2. Constantin
                                                                                                                                                                                                                                                                                                            Constantin
                                                                                                                                                                                                                                                                                                            11.10.2018, 05:46
                                                                                                                                                                                                                                                                                                            Аха, спасибо. И еще вопрос — почему-то на ipad не работают стрелки влево-вправо. И слайды не сменяются :(
                                                                                                                                                                                                                                                                                                            1. Александр Мальцев
                                                                                                                                                                                                                                                                                                              Александр Мальцев
                                                                                                                                                                                                                                                                                                              14.10.2018, 06:15
                                                                                                                                                                                                                                                                                                              Какая версия iOS и браузер?
                                                                                                                                                                                                                                                                                                              1. Constantin
                                                                                                                                                                                                                                                                                                                Constantin
                                                                                                                                                                                                                                                                                                                15.10.2018, 06:01
                                                                                                                                                                                                                                                                                                                Safari, IOS 9.3.5
                                                                                                                                                                                                                                                                                                                1. Александр Мальцев
                                                                                                                                                                                                                                                                                                                  Александр Мальцев
                                                                                                                                                                                                                                                                                                                  15.10.2018, 14:45
                                                                                                                                                                                                                                                                                                                  Он не поддерживает метод foreach, который используется в примере.
                                                                                                                                                                                                                                                                                                                  Пример слайдера, для браузеров, которые не поддерживают этот метод.
                                                                                                                                                                                                                                                                                                                  1. Irisska89
                                                                                                                                                                                                                                                                                                                    Irisska89
                                                                                                                                                                                                                                                                                                                    22.12.2018, 21:33
                                                                                                                                                                                                                                                                                                                    Подскажите пожалуйста, а может есть пример не зацикленного слайдера для Ie11? Или если Вам не сложно, подскажите, как этот сделать не зацикленным и без автоматической смены слайдов?
                                                                                                                                                                                                                                                                                                                    1. Александр Мальцев
                                                                                                                                                                                                                                                                                                                      Александр Мальцев
                                                                                                                                                                                                                                                                                                                      24.12.2018, 13:49
                                                                                                                                                                                                                                                                                                                      Вот пример не зацикленного слайдера для IE11.
                                                                                                                                                                                                                                                                                                                      1. Irisska89
                                                                                                                                                                                                                                                                                                                        Irisska89
                                                                                                                                                                                                                                                                                                                        17.01.2019, 20:49
                                                                                                                                                                                                                                                                                                                        Александр, не могли бы Вы еще раз помочь, если вам не составит труда?
                                                                                                                                                                                                                                                                                                                        Как сделать, чтобы этот слайдер реагировал на изменение размеров окна браузера?
                                                                                                                                                                                                                                                                                                                        1. Александр Мальцев
                                                                                                                                                                                                                                                                                                                          Александр Мальцев
                                                                                                                                                                                                                                                                                                                          23.01.2019, 15:44
                                                                                                                                                                                                                                                                                                                          Для того чтобы всё работало просто подключите полифилл forEach на страницу. А когда поддержка IE11 будет не нужна, его уберёте.
                                                                                                                                                                                                                                                                                                                          Пример с полифиллом.
                                                                                                                                                                                                                                                                                                                          Сам HTML код полифилла:
                                                                                                                                                                                                                                                                                                                          <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.forEach%2CNodeList.prototype.forEach"></script>
                                                                                                                                                                                                                                                                                                                          Страница на которой можно очень просто выбирать нужные полифиллы для поддержки старых браузеров: polyfill.io/v3/url-builder
                                                                                                                                                                                                                                                                                                                        2. Irisska89
                                                                                                                                                                                                                                                                                                                          Irisska89
                                                                                                                                                                                                                                                                                                                          24.12.2018, 18:22
                                                                                                                                                                                                                                                                                                                          Александр, спасибо Вам большое и огромное)
                                                                                                                                                                                                                                                                                                          Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.