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

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

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

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

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

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

Посмотреть

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

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

Посмотреть

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Разметка слайдера (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 class="slider__item">
        <!-- Контент 4 слайда -->
      </div>
    </div>
  </div>
  <!-- Стрелки для перехода к предыдущему и следующему слайду -->
  <a class="slider__control slider__control_prev" href="#" role="button" data-slide="prev"></a>
  <a class="slider__control slider__control_next" href="#" role="button" data-slide="next"></a>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

new SimpleAdaptiveSlider('.slider', {
  loop: false,
});

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

new SimpleAdaptiveSlider('.slider', {
  autoplay: true,
  interval: 10000,
});

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

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

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

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

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

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

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

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

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

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

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

.slider__indicators {
  display: none;
}

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

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

Посмотреть

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

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

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

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

Посмотреть

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

Посмотреть

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

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

<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__items">
      <div class="slider__item">
        ...
      </div>
      <div class="slider__item">
        ...
      </div>
      <div class="slider__item">
        ...
      </div>
      <div class="slider__item">
        ...
      </div>
    </div>
  </div>
  <a class="slider__control slider__control_prev" href="#" role="button"></a>
  <a class="slider__control slider__control_next" href="#" role="button"></a>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

.slider__items {
  transition: transform 0.5s ease;
}

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

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

// конструктор для создания экземпляров объектов типа SimpleAdaptiveSlider
function SimpleAdaptiveSlider(selector, config) { ... }
// добавляет класс к активным элементам и управляет видимостью кнопок управления
SimpleAdaptiveSlider.prototype._setActiveClass = function () { ... }
// выполняет смену слайдов
SimpleAdaptiveSlider.prototype._move = function () { ... }
// перемещает на слайд по его индексу
SimpleAdaptiveSlider.prototype._moveTo = function (index) { ... }
// включает таймер для автоматической смены слайдов и выключает его
SimpleAdaptiveSlider.prototype._autoplay = function (action) { ... }
// добавляет в разметку индикаторы
SimpleAdaptiveSlider.prototype._addIndicators = function () { ... }
// обновляет значения переменных, содержащих экстремальные значения слайдов
SimpleAdaptiveSlider.prototype._refreshExtremeValues = function () { ... }
// уравновешивает слайды (для зацикленности)
SimpleAdaptiveSlider.prototype._balancingItems = function () { ... }
// назначаем обработчики для событий
SimpleAdaptiveSlider.prototype._addEventListener = function () { ... }

// публичные методы
SimpleAdaptiveSlider.prototype.next = function () { ...  }
SimpleAdaptiveSlider.prototype.prev = function () { ... }
SimpleAdaptiveSlider.prototype.autoplay = function (action) { ... }

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

  1. Кирилл Кирилл
    Кирилл Кирилл
    16.09.2021, 18:33
    Здравствуйте, спасибо за замечательный слайдер, скажите пожалуйста как замедлить перелистование, и как добавить текст который будет плавно появляться при смене слайдов, спасибо!
    1. danil
      danil
      07.09.2021, 08:27
      Привет!

      Как добавить текстовую подпись к каждому слайду? Чтобы она располагалась под картинкой. Спасибо.
      1. Александр Мальцев
        Александр Мальцев
        14.09.2021, 15:18
        Привет!
        Необходимо просто разметить «.slider__item» так как нужно.
      2. Aleksey Kislyak
        Aleksey Kislyak
        29.08.2021, 22:35
        Здравствуйте! Очень понравился ваш простой слайдер.
        Скажите пожалуйста, есть ли возможность сделать так, чтобы элементы слайдера на определенном брейкпоинте могли перестроиться в список?
        Например на мобильном дизайне был бы слайдер с 3-мя слайдами, а в десктоп эти 3 слайда выстроились в ряд?
        Заранее спасибо за ответ.
        1. Александр Мальцев
          Александр Мальцев
          30.08.2021, 15:32
          Привет!
          Тут просто нужно добавить разметку и стили (пример):
          <style>
          @media (min-width: 992px) {
            .slider__inner {
              display: flex;
              flex-direction: row;
            }
            .slider__inner>div {
              flex: 0 0 33.33333333%;
            }
          }
          </style>
          ...
          <!-- Разметка одного слайда -->
          <div class="slider__item">
            <div class="slider__inner">
              <div style="height: 250px; background: #3f51b5;"></div>
              <div style="height: 250px; background: #e91e63;"></div>
              <div style="height: 250px; background: #9c27b0;"></div>
            </div>
          </div>
        2. 5M1l3
          5M1l3
          24.08.2021, 07:18
          Здравствуйте, я хочу разделить этот слайдер на два, один для больших картинок, а второй для маленьких codepen.io/5M1le/pen/yLXLvNw. Я создал два скрипта, первый подключил к большому слайдеру, а второй для маленького, но у меня пропадают стрелки на большом. Что нужно сделать, чтоб стрелки были на двух слайдерах?
          1. Александр Мальцев
            Александр Мальцев
            26.08.2021, 15:17
            Привет! Вы немного поменяли код, из-за чего конкретно нужно детально разбираться. Так с ходу сложно подсказать.
            1. 5M1l3
              5M1l3
              31.08.2021, 06:14
              Разобрался. Теперь только другая проблема, я вставляю этот слайдер на другую страницу сайта, но у меня не появляются стрелки и не происходит автопрокрутка. В консоли пишет, проблема инициализации.
          2. Artedix
            Artedix
            19.08.2021, 10:55
            Доброго времени суток, вы единственный человек, который помог с слайдерами, статья очень информативна и полезна, но у меня возникла проблема, я взял пример слайдера с миниатюрами, весь функционал работает, но при нажатии на миниатюру, слайд не переключается, код точь — в — точь, заранее благодарю вас)
            1. Александр Мальцев
              Александр Мальцев
              19.08.2021, 15:18
              Привет! Приведи что получилось в какой-нибудь песочнице, т.к. в примере в статье всё работает.
            2. Alina
              Alina
              11.08.2021, 20:03
              Добрый день, интересует вопрос.Возможно ли отключить swipe, если в слайдере только один слайд? Заранее спасибо.
              1. Александр Мальцев
                Александр Мальцев
                12.08.2021, 14:23
                Привет! А зачем вообще инициализировать элемент как слайдер, если в нём всего один слайд.
                Можно, например, инициализировать только те «.slider» на станице, в которых больше одного «.slider__item»:
                document.querySelectorAll('.slider').forEach((item, index) => {
                  if (item.querySelectorAll('.slider__item').length > 1) {
                    const id = 'slider-' + index;
                    item.id = id;
                    new SimpleAdaptiveSlider('#' + id, {
                      loop: true,
                      autoplay: false,
                      interval: 5000,
                      swipe: true
                    });
                  }
                });
              2. Игорь
                Игорь
                05.08.2021, 16:36
                Александр, здравствуйте!

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

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

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

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

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

                        Подскажите пожалуйста как можно поменять анимацию с перелистывания на затухание-появление.
                        1. Konstantin
                          Konstantin
                          09.05.2021, 19:43
                          Здравствуйте Александр.
                          Вопрос на засыпку:
                          Могли бы Вы реализовать слайдер с навигацией по миниатюрам дополнительных изображений.
                          вот примерный макет:
                          Это было бы очень актуально, толковых решений практически нет.
                          Превью слайдера
                          Благодарю за ответ.
                          1. Александр Мальцев
                            Александр Мальцев
                            16.05.2021, 11:31
                            Привет! Пример слайдера с миниатюрами добавлен в статью.
                            1. Александр Мальцев
                              Александр Мальцев
                              10.05.2021, 12:08
                              Привет! Для этого не обязательно реализовать новый слайдер, можно использовать этот. В ближайшее время покажу как это можно сделать.
                              1. Konstantin
                                Konstantin
                                10.05.2021, 08:14
                                У нас несколько проектов и мы давно ищем правильный слайдер…
                                Возможно есть опция на платной основе заказать у вас слайдер с необходимым функционалом?
                                1. Александр Мальцев
                                  Александр Мальцев
                                  10.05.2021, 12:08
                                  По времени сразу скажу, что точных сроков определить не смогу. То время есть, то его нет. Если так устроит, то напишите на почту alexander@itchief.ru какой нужен функционал.
                                  1. Konstantin
                                    Konstantin
                                    11.05.2021, 08:51
                                    Отправил описание на почту…
                                    1. Konstantin
                                      Konstantin
                                      10.05.2021, 14:24
                                      Да устроит если это в пределах разумного и не растянется на годы )
                                2. Андрей
                                  Андрей
                                  06.05.2021, 21:20
                                  Александр, доброго времени суток. Очень понравился ваш слайдер, достаточно удобный. Хотел воспользоваться им для разработки сайта для школы, но при размещении контента на разных слайдах весь контент «скапливается» на 1 слайде, все остальные пустые. При полной прокрутке слайдера весь контент встает на свои места, подскажите, пожалуйста, можно ли как-то это исправить?

                                  код html:
                                  <div class="slider">
                                        <div class="slider__wrapper">
                                          <div class="slider__items">
                                            <div class="slider__item">
                                              <div class="slider_background">
                                                    <img id="slide_img" src="../img/EGA.jpg" alt="">
                                                    <div class="bar">
                                                       <h2>ЕГЭ и ОГЭ</h2>
                                                       <p>Расписание, порядок проведения, подготовка и многое другое</p>
                                                       <button>
                                                          <p>Узнать подробнее</p>
                                                       </button>
                                                    </div>
                                                 </a>
                                              </div>
                                            </div>
                                            <div class="slider__item">
                                              <div class="slider_background">
                                                    <img id="slide_img" src="../img/GTO.png" alt="">
                                                    <div class="bar">
                                                       <h2>ГТО</h2>
                                                       <p>Условия, ступени и нормативные документы</p>
                                                       <button>
                                                          <p>Узнать подробнее</p>
                                                       </button>
                                                    </div>
                                                 </a>
                                              </div>
                                            </div>
                                            <div class="slider__item">
                                              <div class="slider_background">
                                                    <img id="slide_img" src="../img/prof.png" alt="">
                                                    <div class="bar">
                                                       <h2>ПРОФОРИЕНТАЦИОННАЯ РАБОТА</h2>
                                                       <p>Планы мероприятий, положения опортфолио и программы курсов</p>
                                                       <button>
                                                          <p>Узнать подробнее</p>
                                                       </button>
                                                    </div>
                                                 </a>
                                              </div>
                                            </div>
                                            <div class="slider__item">
                                              <div class="slider_background">
                                                    <img id="slide_img" src="../img/background.jpg" alt="">
                                                    <div class="bar">
                                                       <h2>УСЛОВИЯ ПРИЁМА</h2>
                                                       <p>Правила приёма, приказ, регламенти положения о классах</p>
                                                       <button>
                                                          <p>Узнать подробнее</p>
                                                       </button>
                                                    </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        <a class="slider__control slider__control_prev" href="#" role="button"></a>
                                        <a class="slider__control slider__control_next slider__control_show" href="#" role="button"></a>
                                      </div>
                                  
                                  код css:
                                  .slider {
                                     position: relative;
                                     overflow: hidden;
                                     max-width: 1920px;
                                     max-height: 600px;
                                     margin-left: auto;
                                     margin-right: auto;
                                   }
                                   
                                   /* стили для обёртки, в которой заключены слайды */
                                   .slider__wrapper {
                                     position: relative;
                                     overflow: hidden;
                                   }
                                   
                                   /* стили для контейнера слайдов */
                                   .slider__items {
                                     display: flex;
                                     transition: transform 0.6s ease;
                                   }
                                   
                                   /* стили для слайдов */
                                   .slider__item {
                                     flex: 0 0 100%;
                                     max-width: 100%;
                                   }
                                   
                                   /* стили для кнопок "вперед" и "назад" */
                                   .slider__control {
                                     position: absolute;
                                     top: 50%;
                                     display: flex;
                                     align-items: center;
                                     justify-content: center;
                                     width: 40px;
                                     color: #fff;
                                     text-align: center;
                                     opacity: 0.5;
                                     height: 50px;
                                     transform: translateY(-50%);
                                     background: rgba(0, 0, 0, 0.5);
                                   }
                                   
                                   .slider__control:hover,
                                   .slider__control:focus {
                                     color: #fff;
                                     text-decoration: none;
                                     outline: 0;
                                     opacity: 0.9;
                                   }
                                   
                                   .slider__control_prev {
                                     left: 0;
                                   }
                                   
                                   .slider__control_next {
                                     right: 0;
                                   }
                                   
                                   .slider__control::before {
                                     content: "";
                                     display: inline-block;
                                     width: 20px;
                                     height: 20px;
                                     background: transparent no-repeat center center;
                                     background-size: 100% 100%;
                                   }
                                   
                                   .slider__control_prev::before {
                                     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
                                   }
                                   
                                   .slider__control_next::before {
                                     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
                                   }
                                   
                                   /* стили для индикаторов */
                                   .slider__indicators {
                                     position: absolute;
                                     right: 0;
                                     bottom: 10px;
                                     left: 0;
                                     z-index: 15;
                                     display: flex;
                                     justify-content: center;
                                     padding-left: 0;
                                     margin: 0 15%;
                                     list-style: none;
                                   }
                                   
                                   .slider__indicators li {
                                     box-sizing: content-box;
                                     flex: 0 1 auto;
                                     width: 50px;
                                     height: 7px;
                                     margin-right: 4px;
                                     margin-left: 4px;
                                     text-indent: -999px;
                                     cursor: pointer;
                                     background-color: rgba(255, 255, 255, 0.5);
                                     background-clip: padding-box;
                                     border-top: 10px solid transparent;
                                     border-bottom: 10px solid transparent;
                                   }
                                   
                                   .slider__indicators li.active {
                                     background-color: rgba(60, 54, 100, 1);
                                   }
                                  
                                  .slider_background{
                                     height: 600px;
                                  }
                                  
                                  #slide_img{
                                     height: 600px;
                                     width: 100%;
                                     object-fit: cover;
                                  }
                                  
                                  .bar{
                                     position: absolute;
                                     width: 494px;
                                     left: 196px;
                                     top: 55px;
                                     background: rgba(0, 0, 0, 0.65);
                                     border-radius: 25px;
                                     display:inline-block;
                                  }
                                  
                                  .bar p{
                                     font-family: Istok Web;
                                     font-style: normal;
                                     font-weight: normal;
                                     font-size: 27px;
                                     line-height: 39px;
                                     text-align: center;
                                     
                                     color: #FFFFFF;
                                  }
                                  
                                  .bar h2{
                                     font-family: Istok Web;
                                     font-style: normal;
                                     font-weight: normal;
                                     font-size: 34px;
                                     line-height: 45px;
                                     color: #FFFFFF;
                                     text-align: center;
                                  }
                                  
                                  .bar button{
                                     border: 4px solid #FFFFFF;
                                     background-color: rgba(128, 128, 128, 0);
                                     box-sizing: border-box;
                                     border-radius: 25px;
                                     position: relative;
                                     width: 80%;
                                     left: 50%;
                                     transform: translate(-50%, 0);
                                     bottom: 5%;
                                     transition: background-color 0.25s linear;
                                     margin-bottom: 5%;
                                  }
                                  
                                  .bar button:hover{
                                     background-color: rgba(128, 128, 128, 0.747);
                                  }
                                  
                                  1. Konstantin
                                    Konstantin
                                    04.08.2021, 12:17
                                    Добрый день Александр.
                                    И все же мы не дождались завершения вашей работы слайдеру???
                                    На сообщения не отвечаете… Связь прервалась…
                                    Может быть тут ответите?..
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      04.08.2021, 12:37
                                      Привет! Почему? Пример с popup вам отправил, вы ничего на него не ответили. Больше писем в ящике у меня нет.
                                      1. Konstantin
                                        Konstantin
                                        04.08.2021, 15:42
                                        Александр, пересмотрел всю почту, вашего письма нет…
                                        Можете повторить?
                                        1. Konstantin
                                          Konstantin
                                          04.08.2021, 12:44
                                          Мы действительно ждали от вас этого письма.
                                          Возможно пропустил, или ушло в спам.
                                          Повторите пожалуйста, можно и в эту переписку.
                                          п.с. На странице возможно будут находится 1 слайдер с доп. миниатюрами изображений, + 2-3 слайдре без доп. фото…
                                          Как их всех инициализировать?
                                          1. Александр Мальцев
                                            Александр Мальцев
                                            05.08.2021, 15:16
                                            Остальные слайдеры по обычным правилам, отправил вам ссылку на пример в письме.
                                    2. Oleg
                                      Oleg
                                      24.04.2021, 04:20
                                      Александр, здравствуйте! Спасибо за вашу работу! Выбрал вашу разработку из-за простого и аккуратного кода и отсутствием необходимости подключать сторонние библиотеки. Установил версию с возможностью свайпа. Однако, свайп работает, как нажатие кнопки. Что вызывает не очень приятные ощущения у пользователя. Пользователь привык, что когда начинаешь пролистывать, сразу начинается движение элементов. Скажите, можно ли, каким либо образом сделать свайп как например при пролистывании слайдов в посте Инстаграм? Чтобы движение слайдов начиналось вместе с движением пальца по области карусели? Спасибо!
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        24.04.2021, 14:31
                                        Привет! Пожалуйста! Посмотрю, как это можно реализовать здесь.
                                        1. Oleg
                                          Oleg
                                          24.04.2021, 15:09
                                          Очень жду ваш вариант. Сейчас более 70% трафика — мобильный. И сайт должен вызывать приятные эмоции от использования.
                                          Ps.
                                          Можете посмотреть, как слайдер работает сейчас ссылка
                                          1. Александр Мальцев
                                            Александр Мальцев
                                            30.04.2021, 13:15
                                            Полностью обновил слайдер и инструкцию по его использованию. Пробуйте.
                                            1. Oleg
                                              Oleg
                                              30.04.2021, 13:34
                                              Спасибо!
                                        2. Oleg
                                          Oleg
                                          24.04.2021, 10:50
                                          Отвечу на свой же вопрос:
                                          Изменил код функции:
                                                  var _setUpListeners = function () {
                                                    // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                                                    _sliderControls.forEach(function (item) {
                                                      item.addEventListener('click', _controlClick);
                                                    });
                                                    _mainElement.addEventListener('touchstart', function (e) {
                                          		 
                                                      _startX = e.touches[0].clientX;
                                                    });
                                          		  
                                                     _mainElement.addEventListener('touchend', function (e) {
                                                     var
                                                         _endX = e.changedTouches[0].clientX,
                                                         _deltaX = _endX - _startX;
                                                       if (_deltaX > 50) {
                                                        _transformItem('left');
                                                       } else if (_deltaX < -50) {
                                                         _transformItem('right');
                                                       }
                                                     });
                                                  }
                                          На следующий код:
                                          
                                                  var _setUpListeners = function () {
                                                    // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                                                    _sliderControls.forEach(function (item) {
                                                      item.addEventListener('click', _controlClick);
                                                    });
                                                    _mainElement.addEventListener('touchstart', function (e) {
                                          		 
                                                      _startX = e.touches[0].clientX;
                                                    });
                                          		  _mainElement.addEventListener('touchmove', function (e) {
                                                      var
                                          			 _moveX = e.touches[0].clientX;
                                          			var
                                          			 _deltaX = Math.abs(_moveX - _startX); //если число отрицательное, будет положительным
                                          							
                                          			if ( _deltaX<50) {   // Задержка на отклик события touchmove
                                          				if (_moveX > _startX) {
                                          				  _transformItem('left');
                                          				} else if (_moveX < _startX) {
                                          				  _transformItem('right');
                                          				}
                                          			}
                                                    });
                                                    
                                                  }
                                          
                                          В общем, получилось не очень элегантно, и есть глюки при зацикленном слайдере, но по другому придумать не смог. По хорошему нужно переписать всю функцию var _transformItem = function (direction)
                                          Может кто-нибудь предложит более подходящий вариант?
                                        3. Евгений Витальевич Маслов
                                          Евгений Витальевич Маслов
                                          16.02.2021, 00:29
                                          Александр, огромное спасибо за слайдер!
                                          У меня такой вопрос: есть php-код, который выводит информацию из xml-файла на сайт. Среди выводимых элементов — изображения, которые и надо листать слайдером. Вот эта часть кода:
                                          <?php
                                          	$xml = simplexml_load_file("feed.xml");
                                          
                                          foreach ( $xml->children() as $offer ) {
                                              $offer->attributes()->{'internal-id'};
                                          
                                          echo '<div class="objects_container"><div class="slider"><div class="slider__wrapper"><div class="slider__items">';	
                                          foreach ($offer as $image) {
                                              switch((string) $image['order']) { // Получение атрибутов элемента по индексу
                                              case '0':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                              case '1':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '2':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '3':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '4':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '5':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '6':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '7':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '8':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '9':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                          	case '10':
                                                  echo '<div class="slider__item"><img id="objects" src='.$image.'></div>';
                                                  break;
                                              }
                                          }
                                                echo '</div></div><a class="slider__control slider__control_prev" href="#" role="button"></a><a class="slider__control slider__control_next" href="#" role="button"></a></div>';
                                          ...

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

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

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

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

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

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

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

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

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

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

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

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

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

                                                                                        Прошу помочь, ещё раз благодарю!
                                                                                        1. Александр Мальцев
                                                                                          Александр Мальцев
                                                                                          24.02.2020, 14:33
                                                                                          Возможно, у вас скрипт отрабатывает до того, как становится доступен слайдер на странице. Чтобы этого не было оберните JavaScript код слайдера в эту конструкцию:
                                                                                          document.addEventListener('DOMContentLoaded', function(){
                                                                                            var slideShow = (function () {
                                                                                            // ...
                                                                                          });
                                                                                          1. Денис
                                                                                            Денис
                                                                                            24.02.2020, 15:48
                                                                                            Сработало! Спасибо огромное!
                                                                                            PS. Думаю стоит внести изменения в статье, ну и в код.
                                                                                            1. Денис
                                                                                              Денис
                                                                                              24.02.2020, 16:03
                                                                                              Чтобы люди с такой же проблемой узнали о решении. (Пометочку: «чтобы слайдер работал в WP»)
                                                                                              1. Александр Мальцев
                                                                                                Александр Мальцев
                                                                                                24.02.2020, 16:14
                                                                                                Спасибо, хорошая идея, добавлю в статью.
                                                                                    2. mezonih
                                                                                      mezonih
                                                                                      27.12.2019, 20:47
                                                                                      А у меня почему то вообще не работает. Стрелки есть, но на другую фотку не переходит. Все сделал правильно вроде
                                                                                      1. mezonih
                                                                                        mezonih
                                                                                        27.12.2019, 23:49
                                                                                        т.е. локально работает. но есть задача ее выводить в iframe. вот там затык получается. фотка видна. но по другим нет перехода
                                                                                        1. Александр Мальцев
                                                                                          Александр Мальцев
                                                                                          29.12.2019, 13:45
                                                                                          Значит вы туда не добавили JavaScript код слайдера.
                                                                                          1. mezonih
                                                                                            mezonih
                                                                                            29.12.2019, 19:07
                                                                                            да. не туда добавлял. сейчас все работает. 2 слайдера на странице. Но при этом вылазиет вот такое оповещение: TypeError: Cannot read property 'querySelector' of null
                                                                                      2. Олег
                                                                                        Олег
                                                                                        20.12.2019, 12:38
                                                                                        А как сделать, чтобы на мобильном (да и на компе наверное тоже), можно было пальцем (мышкой) скролить слайды?
                                                                                        1. Александр Мальцев
                                                                                          Александр Мальцев
                                                                                          21.12.2019, 04:36
                                                                                          Добавил возможность свайпа в слайдер. Теперь все примеры этой статьи имеют эту возможность.
                                                                                        2. Алексей
                                                                                          Алексей
                                                                                          10.12.2019, 03:42
                                                                                          Было бы здорово, если имелась возможность показывать более одного слайда. А так, все супер, спасибо.
                                                                                          1. Александр Мальцев
                                                                                            Александр Мальцев
                                                                                            10.12.2019, 13:26
                                                                                            С более продвинутым вариантом реализации слайдера можете ознакомиться в этой статье.
                                                                                          2. Роман
                                                                                            Роман
                                                                                            02.12.2019, 17:52
                                                                                            Здравствуйте, отличная работа!
                                                                                            Но я столкнулся с проблемой, у меня не получается вставить этот слайдер во flex контейнер, в своем шаблоне, как мне решить этот вопрос?
                                                                                            1. Александр Мальцев
                                                                                              Александр Мальцев
                                                                                              03.12.2019, 14:26
                                                                                              Привет! Спасибо за отзыв. Необходимо просто настроить стили, например, так.
                                                                                            2. Алексей Усов
                                                                                              Алексей Усов
                                                                                              24.11.2019, 00:03
                                                                                              РЕДКИЙ РЕСУРС
                                                                                              АЛЕКСАНДР, СПАСИБО

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

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

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

                                                                                                          И выносил отдельно js и стили, и вносил их в head, и пробовал при помощи включаемой области на битрикс, все уже перепробовал… все ровно не работает…
                                                                                                      2. Олег Фролов
                                                                                                        Олег Фролов
                                                                                                        20.05.2019, 12:52
                                                                                                        Спасибо большое! Слайдер отлично работает. Использую его для галереи. Можете подсказать, как отключить «карусель»(чтобы, дойдя до последнего слайда, слайды не начинались сначала)?
                                                                                                        1. Александр Мальцев
                                                                                                          Александр Мальцев
                                                                                                          21.05.2019, 15:30
                                                                                                          Спасибо!
                                                                                                          Слайдер без зацикливания можно посмотреть в этом примере.
                                                                                                        2. Erofeich
                                                                                                          Erofeich
                                                                                                          24.04.2019, 23:53
                                                                                                          Слайдер не работает в IE 11 и в стандартном браузере «Браузер» на Android.
                                                                                                          Показывает первый слайд и всё. Нажатие на кнопки навигации ничего не даёт.
                                                                                                          Можно это поправить?
                                                                                                          Спасибо.
                                                                                                          1. Александр Мальцев
                                                                                                            Александр Мальцев
                                                                                                            25.04.2019, 14:03
                                                                                                            Это значит, что эти браузеры какие-то функции JavaScript не поддерживает. Скорее всего это функция forEach.
                                                                                                            В этом случае для включения поддержки необходимых старых браузеров удобно использовать полифиллы. Как это сделать посмотрите в этом комментарии.
                                                                                                            1. Erofeich
                                                                                                              Erofeich
                                                                                                              25.04.2019, 21:36
                                                                                                              Спасибо, работает!)
                                                                                                          2. Алексей
                                                                                                            Алексей
                                                                                                            02.03.2019, 14:55
                                                                                                            Спасибо большое!)
                                                                                                            1. Алексей
                                                                                                              Алексей
                                                                                                              01.03.2019, 16:30
                                                                                                              Добрый день. Подскажите, как использовать одновременно несколько слайдеров на странице? Должно быть около 12. Это реально с этим слайдером?
                                                                                                              1. Александр Мальцев
                                                                                                                Александр Мальцев
                                                                                                                02.03.2019, 07:43
                                                                                                                Добрый!
                                                                                                                Вам необходимо просто вызывать функцию slideShow отдельно для каждого слайдера:
                                                                                                                <div id="slider-1" class="slider">
                                                                                                                ...
                                                                                                                </div>
                                                                                                                <div id="slider-2" class="slider">
                                                                                                                ...
                                                                                                                </div>
                                                                                                                
                                                                                                                <script>
                                                                                                                var slideShow = (function () {
                                                                                                                ...
                                                                                                                }());
                                                                                                                
                                                                                                                slideShow('#slider-1');
                                                                                                                slideShow('#slider-2');  
                                                                                                                </script>
                                                                                                                
                                                                                                                Демку, где на одной странице используется несколько каруселей можно посмотреть здесь.
                                                                                                              2. Nik
                                                                                                                Nik
                                                                                                                04.10.2018, 20:06
                                                                                                                Большое спасибо за урок, все получилось легко — слайдер отлично работает! Вообще хотел Вам выразить признательность за все ваши уроки и темы на сайте!
                                                                                                                1. Александр
                                                                                                                  Александр
                                                                                                                  12.09.2018, 19:41
                                                                                                                  Александр. Спасибо. Отличное решение.
                                                                                                                  Есть вопрос, а как сделать так, что, если кликается по активному slider__indicators — у, ничего никуда не перемещалось?
                                                                                                                  1. Александр
                                                                                                                    Александр
                                                                                                                    12.09.2018, 19:58
                                                                                                                    Вопрос снят.
                                                                                                                    Добавил:
                                                                                                                    if (e.target.getAttribute('data-slide-to').classList.contains('.active')){
                                                                                                                      return;
                                                                                                                    }
                                                                                                                    
                                                                                                                  Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.