Как создать адаптивный слайдер для сайта?

Александр Мальцев
75K
4
Как создать адаптивный слайдер для сайта?
Содержание:
  1. Исходные коды и подключение слайдера к сайту
  2. Инициализация и настройка слайдера
  3. Примеры использования слайдера для ротации различной информации
  4. Описание исходных кодов слайдера и принципа его работы
  5. Комментарии

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

Исходные коды и подключение слайдера к сайту

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

Основные характеристики слайдера:

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

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

  • вставить в необходимое место html код слайдера;
  • подключить файл со стилями или добавить их в существующий файл; также стили можно вставить прямо на страницу;
  • подключить js-скрипт слайдера или вставить его в существующий файл; также код можно добавить прямо на страницу.

Демо слайдера расположено на этой странице.

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

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

Инициализация карусели осуществляется посредством вызова функции slideShow и указания ей в качестве первого аргумента селектора, определяющего слайдер в документе:

// инициализация элемента .slider в качестве карусели
slideShow('.slider');

Кроме селектора функции slideShow можно передать дополнительные параметры, все они указываются в формате объекта посредством 2 параметра:

// инициализация элемента .slider в качестве карусели и настройка её с помощью дополнительных параметров
slideShow('.slider', {
  isAutoplay: false, // false (по умолчанию) или true
  directionAutoplay: 'next', // 'next' (по умолчанию) или 'prev'
  delayAutoplay: 5000, // 5000 (по умолчанию) или любое другое число
  isPauseOnHover: true // true (по умолчанию) или false
});

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

  • isAutoplay – определяет, необходимо ли инициализировать слайдер с автоматической сменой элементов (по умолчанию этот ключ имеет значение false);
  • directionAutoplay – определяет направление для механизма автоматической смены слайдов (по умолчанию 'next'); для изменения направления установите 'prev';
  • delayAutoplay – задержка в миллисекундах перед процессом автоматической сменой одного слайда на другой (по умолчанию 5000 мс);
  • isPauseOnHover – определяет необходимо ли останавливать автоматическую смену слайдов при нахождении курсора в зоне слайдера (по умолчанию true)

Например, если вам нужно инициализировать слайдер и включить у него автоматическую смену слайдов, то используйте следующую конструкцию:

// инициализация элемента .slider в качестве карусели и настройка её с помощью дополнительных параметров
slideShow('.slider', {
  isAutoplay: true
});

Кроме этого, вы можете управлять слайдом с помощью методов. Для этого вам нужно сохранить в переменную результат выполнения функции slideShow:

// инициализация элемента .slider в качестве карусели и настройка её с помощью дополнительных параметров
var sliderOne = slideShow('.slider');

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

// выполняет переход на следующий слайд
sliderOne.next();

Список методов слайдера:

  • stop – останавливает автоматическую смену слайдов;
  • next – выполняет переход на следующий слайд;
  • prev – выполняет переход на предыдущий слайд;
  • cycle – включает автоматическую смену слайдов.

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

Применение слайдера для ротации изображений:

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

Посмотреть

Использования слайдера для ротации текстовой информации:

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

Посмотреть

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

Простой слайдер отзывов клиентов для сайта на CSS и JavaScript

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

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

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

Исходные коды слайдера состоят из:

  • html кода;
  • CSS кода (стилей);
  • JavaScript кода (скрипта).

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, кнопки для перехода к предыдущему и следующему слайду .slider__control. Кроме этого после вызова функции слайдера в этот блок ещё динамически добавляется элемент с индикаторами .slider__indicators.

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

В этом примере слайдер состоит из 4 элементов .slider__item. Эти элементы визуально представляют собой слайды.

Блок с индикаторами .slider__indicators выполнен в виде нумерованного списка. Он состоит из элементов li с атрибутом data-slide-to. Количество элементов в списке определяется числом слайдов. Данный атрибут используется для определения индекса слайда, на которой нужно перейти при нажатии на данный индикатор. В слайдере активный индикатор отмечается с помощью добавления к нему класса active.

Кнопки «назад» и «вперед» размечены с помощью элемента a. Кнопка для перехода к предыдущему слайду имеет классы slider__control и slider__control_prev, а к следующему – slider__control и slider__control_next.

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

Стили слайдера:

/* стили основного контейнера слайдера */
.slider {
  position: relative;
  overflow: hidden;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* стили для обёртки, в которой заключены слайды */
.slider__wrapper {
  position: relative;
  overflow: hidden;
}

/* стили для контейнера слайдов */
.slider__items {
  display: flex;
  transition: transform 0.7s ease;
}

/* стили для слайдов */
.slider__item {
  flex: 0 0 100%;
  max-width: 100%;
}

/* стили для кнопок "вперед" и "назад" */
.slider__control {
  position: absolute;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  height: 50px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
}

.slider__control_show {
  display: flex;
}

.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-right: 15%;
  margin-left: 15%;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}

.slider__indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 4px;
  margin-right: 3px;
  margin-left: 3px;
  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: #fff;
}

В слайдере в некоторый момент времени пользователю всегда показывается только один слайд. Осуществляется это посредством скрытия всех элементов (слайдов) располагающихся за пределами области внутри .slider__wrapper. В CSS это осуществляется посредством установки .slider__wrapper свойства overflow со значением hidden.

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

Переход от одного слайда к другому осуществляется посредством CSS трансформаций. Для этого к .slider__items посредством кода JavaScript добавляется CSS свойство transform, значение которого содержит функцию translateX с определённым значением. Например, если данной функции указать в качестве значения -100%, то браузер осуществит переход к следующему слайду, а если наоборот, 100% - то к предыдущему.

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

Время и скорость, с которой будет осуществляться трансформация определяется с помощью CSS свойства transition:

.slider__items {
  transition: transform 0.7s ease;
}

Логика работы слайдера:

'use strict';
var slideShow = (function () {
  return function (selector, config) {
    var
      _slider = document.querySelector(selector), // основный элемент блока
      _sliderContainer = _slider.querySelector('.slider__items'), // контейнер для .slider-item
      _sliderItems = _slider.querySelectorAll('.slider__item'), // коллекция .slider-item
      _sliderControls = _slider.querySelectorAll('.slider__control'), // элементы управления
      _currentPosition = 0, // позиция левого активного элемента
      _transformValue = 0, // значение трансформации .slider_wrapper
      _transformStep = 100, // величина шага (для трансформации)
      _itemsArray = [], // массив элементов
      _timerId,
      _indicatorItems,
      _indicatorIndex = 0,
      _indicatorIndexMax = _sliderItems.length - 1,
      _stepTouch = 50,
      _config = {
        isAutoplay: false, // автоматическая смена слайдов
        directionAutoplay: 'next', // направление смены слайдов
        delayAutoplay: 5000, // интервал между автоматической сменой слайдов
        isPauseOnHover: true // устанавливать ли паузу при поднесении курсора к слайдеру
      };

    // настройка конфигурации слайдера в зависимости от полученных ключей
    for (var key in config) {
      if (key in _config) {
        _config[key] = config[key];
      }
    }

    // наполнение массива _itemsArray
    for (var i = 0, length = _sliderItems.length; i < length; i++) {
      _itemsArray.push({ item: _sliderItems[i], position: i, transform: 0 });
    }

    // переменная position содержит методы с помощью которой можно получить минимальный и максимальный индекс элемента, а также соответствующему этому индексу позицию
    var position = {
      getItemIndex: function (mode) {
        var index = 0;
        for (var i = 0, length = _itemsArray.length; i < length; i++) {
          if ((_itemsArray[i].position < _itemsArray[index].position && mode === 'min') || (_itemsArray[i].position > _itemsArray[index].position && mode === 'max')) {
            index = i;
          }
        }
        return index;
      },
      getItemPosition: function (mode) {
        return _itemsArray[position.getItemIndex(mode)].position;
      }
    };

    // функция, выполняющая смену слайда в указанном направлении
    var _move = function (direction) {
      var nextItem, currentIndicator = _indicatorIndex;;
      if (direction === 'next') {
        _currentPosition++;
        if (_currentPosition > position.getItemPosition('max')) {
          nextItem = position.getItemIndex('min');
          _itemsArray[nextItem].position = position.getItemPosition('max') + 1;
          _itemsArray[nextItem].transform += _itemsArray.length * 100;
          _itemsArray[nextItem].item.style.transform = 'translateX(' + _itemsArray[nextItem].transform + '%)';
        }
        _transformValue -= _transformStep;
        _indicatorIndex = _indicatorIndex + 1;
        if (_indicatorIndex > _indicatorIndexMax) {
          _indicatorIndex = 0;
        }
      } else {
        _currentPosition--;
        if (_currentPosition < position.getItemPosition('min')) {
          nextItem = position.getItemIndex('max');
          _itemsArray[nextItem].position = position.getItemPosition('min') - 1;
          _itemsArray[nextItem].transform -= _itemsArray.length * 100;
          _itemsArray[nextItem].item.style.transform = 'translateX(' + _itemsArray[nextItem].transform + '%)';
        }
        _transformValue += _transformStep;
        _indicatorIndex = _indicatorIndex - 1;
        if (_indicatorIndex < 0) {
          _indicatorIndex = _indicatorIndexMax;
        }
      }
      _sliderContainer.style.transform = 'translateX(' + _transformValue + '%)';
      _indicatorItems[currentIndicator].classList.remove('active');
      _indicatorItems[_indicatorIndex].classList.add('active');
    };

    // функция, осуществляющая переход к слайду по его порядковому номеру
    var _moveTo = function (index) {
      var i = 0, direction = (index > _indicatorIndex) ? 'next' : 'prev';
      while (index !== _indicatorIndex && i <= _indicatorIndexMax) {
        _move(direction);
        i++;
      }
    };

    // функция для запуска автоматической смены слайдов через промежутки времени
    var _startAutoplay = function () {
      if (!_config.isAutoplay) {
        return;
      }
      _stopAutoplay();
      _timerId = setInterval(function () {
        _move(_config.directionAutoplay);
      }, _config.delayAutoplay);
    };

    // функция, отключающая автоматическую смену слайдов
    var _stopAutoplay = function () {
      clearInterval(_timerId);
    };

    // функция, добавляющая индикаторы к слайдеру
    var _addIndicators = function () {
      var indicatorsContainer = document.createElement('ol');
      indicatorsContainer.classList.add('slider__indicators');
      for (var i = 0, length = _sliderItems.length; i < length; i++) {
        var sliderIndicatorsItem = document.createElement('li');
        if (i === 0) {
          sliderIndicatorsItem.classList.add('active');
        }
        sliderIndicatorsItem.setAttribute("data-slide-to", i);
        indicatorsContainer.appendChild(sliderIndicatorsItem);
      }
      _slider.appendChild(indicatorsContainer);
      _indicatorItems = _slider.querySelectorAll('.slider__indicators > li')
    };

    var _isTouchDevice = function () {
      return !!('ontouchstart' in window || navigator.maxTouchPoints);
    };

    // функция, осуществляющая установку обработчиков для событий
    var _setUpListeners = function () {
      var _startX = 0;
      if (_isTouchDevice()) {
        _slider.addEventListener('touchstart', function (e) {
          _startX = e.changedTouches[0].clientX;
          _startAutoplay();
        });
        _slider.addEventListener('touchend', function (e) {
          var
            _endX = e.changedTouches[0].clientX,
            _deltaX = _endX - _startX;
          if (_deltaX > _stepTouch) {
            _move('prev');
          } else if (_deltaX < -_stepTouch) {
            _move('next');
          }
          _startAutoplay();
        });
      } else {
        for (var i = 0, length = _sliderControls.length; i < length; i++) {
          _sliderControls[i].classList.add('slider__control_show');
        }
      }
      _slider.addEventListener('click', function (e) {
        if (e.target.classList.contains('slider__control')) {
          e.preventDefault();
          _move(e.target.classList.contains('slider__control_next') ? 'next' : 'prev');
          _startAutoplay();
        } else if (e.target.getAttribute('data-slide-to')) {
          e.preventDefault();
          _moveTo(parseInt(e.target.getAttribute('data-slide-to')));
          _startAutoplay();
        }
      });
      document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === "hidden") {
          _stopAutoplay();
        } else {
          _startAutoplay();
        }
      }, false);
      if (_config.isPauseOnHover && _config.isAutoplay) {
        _slider.addEventListener('mouseenter', function () {
          _stopAutoplay();
        });
        _slider.addEventListener('mouseleave', function () {
          _startAutoplay();
        });
      }
    };

    // добавляем индикаторы к слайдеру
    _addIndicators();
    // устанавливаем обработчики для событий
    _setUpListeners();
    // запускаем автоматическую смену слайдов, если установлен соответствующий ключ
    _startAutoplay();

    return {
      // метод слайдера для перехода к следующему слайду
      next: function () {
        _move('next');
      },
      // метод слайдера для перехода к предыдущему слайду
      left: function () {
        _move('prev');
      },
      // метод отключающий автоматическую смену слайдов
      stop: function () {
        _config.isAutoplay = false;
        _stopAutoplay();
      },
      // метод запускающий автоматическую смену слайдов
      cycle: function () {
        _config.isAutoplay = true;
        _startAutoplay();
      }
    }
  }
}());

slideShow('.slider', {
  isAutoplay: true
});

Код слайдера написан на «чистом» JavaScript, без использования библиотеки jQuery. Программный код структурирован и организован в виде «модуля».

Основные функции, выполняющие всю логику, используемые внутри модуля slideShow:

  • _startAutoplay – функция для запуска автоматической смены слайдов через определённые промежутки времени определяемым параметром delayAutoplay (по умолчанию 5 секунд);
  • _stopAutoplay – функция, отключающая автоматическую смену слайдов;
  • _move – функция, выполняющая смену слайда в указанном направлении;
  • _slideTo – функция, осуществляющая переход к слайду по его порядковому номеру; она используется при обработке события «click» на индикаторах;
  • _addIndicators – функция, добавляющая индикаторы к слайдеру;
  • _setupListener – функция, осуществляющая установку обработчиков для событий для слайдера.

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

Что делать если слайдер не работает

Если слайдер не работает, то одной из причин может быть то, что у вас скрипт подключен выше самого HTML кода слайдера. В этом случае JavaScript код слайдера необходимо обернуть в эту конструкцию (чтобы он отрабатывал после загрузки DOM страницы):

document.addEventListener('DOMContentLoaded', function(){
  // здесь необходимо разместить код слайдера
  var slideShow = (function () {
  // ...
  }());

  slideShow('.slider', {
    isAutoplay: true
  });
});

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

  1. Евгений Витальевич Маслов
    16 февраля 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
      29 декабря 2020, 18:27
      здравствуйте, Александр)

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

      спасибо
      1. Александр Мальцев
        02 января 2021, 08:57
        Здравствуйте!
        Так (открыть пример)?
      2. keo72792
        18 декабря 2020, 20:16
        Можно ли применить этот слайдер к нескольким элементам на странице с одним классом? ID использовать нельзя. Прописывать дополнительные классы тоже. Может, можно как-то пройтись циклом по родительскому элементу (у каждого слайдера есть родитель, который тоже обозначен одним классом) и обратиться к элементу .slider как к дочернему? Не знаю, как это реализовать
        1. Александр Мальцев
          24 декабря 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
          17 декабря 2020, 09:56
          Добрый день Александр Мальцев
          Подскажите пожалуйста, можно для мабайла грузить одно разрешение баннеров а для десктора другое? что бы гугл не ругался.
          Заранее благодарен.
          1. Александр Мальцев
            17 декабря 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
              17 декабря 2020, 16:08
              Благодарю, попробую.
          2. Александр
            04 декабря 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 декабря 2020, 14:49
              Добрый день! Александр, этот слайдер никакого отношения не имеет к этому. Тут вам нужно разбираться со слайдером, который вы используете.
            2. Inta
              22 ноября 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 ноября 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 ноября 2020, 23:04
                Доброго времени суток. Я хочу добавить больше двух таких слайдер на страницу. Но работает только первый слайдер. Помогите пожалуйста сделать так, чтоб работали все слайдеры на странице. Большое спасибо!
                1. Эдуард Рыбалка
                  09 ноября 2020, 23:07
                  Увидел ответ немного выше. Большое Вам спасибо
                  1. Эдуард Рыбалка
                    09 ноября 2020, 23:18
                    Снова я. У меня на странице три слайдера без зацикливания. Работает только первый (( Помогите пожалуйста
                    1. Эдуард Рыбалка
                      09 ноября 2020, 23:42
                      Ссылка на слайдер codepen.io/eduard-ua/pen/JjKmeBq
                      1. Эдуард Рыбалка
                        09 ноября 2020, 23:53
                        Ответ на мой вопрос. Нашёл у Вас. Спасибо Вам за помощь

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

                        multiItemSlider('#slider-2', {
                        isAutoplay: true
                        });
                        1. Александр Мальцев
                          12 ноября 2020, 07:04
                          Привет! Отлично что разобрался.
                2. hunteman
                  01 ноября 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 ноября 2020, 12:51
                    Здравствуйте! На этой неделе представлю новую версию JavaScript кода слайдера. В ней всё это будет настраиваться через параметры.
                  2. Ефим
                    06 октября 2020, 02:49
                    Александр, спасибо отличный слайдер, только есть одна проблемка. При добавлении в слайдер фото, внизу слайдера появляется полоса, которую ни как не возможно убрать или перекрыть другим блоком. Подскажите, пожалуйста, как это исправить? (В примере с одними фото также есть эта невидимая полоса
                    1. Александр Мальцев
                      08 октября 2020, 14:44
                      Пожалуйста! По картинке сложно подсказать.
                      Попробуйте <img> установить блочное отображение:
                      .img-fluid {
                        display: block;
                        height: auto;
                        max-width: 100%;
                      }
                      
                    2. Ola
                      04 октября 2020, 19:22
                      Спасибо Вам Огромное Александр что Вы нам помогаете и делитесь с нами своими знаниями!
                      Вы наш добрый Ангел!***))) Все работает! Как всегда полезный и обьяснен до мелочей чудо-урок!
                      кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!
                      1. Илья
                        16 сентября 2020, 12:20
                        Отличный слайдер!
                        Спасибо большое!
                        Только не могу вынести кнопки прокрутки слайдов за основной блок, не ломая всю остальную конструкцию. Подскажите пожалуйста, есть ли какое то решение данной проблемы?
                        1. Илья
                          16 сентября 2020, 12:33
                          UPD. Снял overflow: hidden; у .slider.
                          Но теперь, при переключении слайдов с transform 0.6s края фоновых картинок не скрываются за закруглением границ.
                          1. Александр Мальцев
                            16 сентября 2020, 14:43
                            Спасибо, может что-то не так делаете. Вот пример: itchief.ru/examples/lab.php?topic=javascript&file=slider-3
                        2. Егор
                          17 июня 2020, 09:13
                          Добрый день, возникла проблема. Добавил HTML, CSS и JS код на сайт(работает на opencart) обернул JS код в document.addEventListener('DOMContentLoaded', function(){
                          var slideShow = (function () {

                          });
                          Сайт видит файл подключенный, но ничего не работает в плане скрипта, что делать?
                          1. Александр Мальцев
                            21 июня 2020, 08:42
                            Добрый день! Может вы не добавили после функции slideShow следующее:
                              slideShow('.slider', {
                                isAutoplay: true
                              });
                            
                          2. jekakа123
                            11 июня 2020, 22:38
                            Здравствуйте, а как реализовать на одном сайте два разных типа слайдера? если стили все в одном файле? это возможно?
                            Допустим на главной слайдер с картинками, а в личном кабинете хочу сделать слайдер текстовый.
                            1. Александр Мальцев
                              13 июня 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
                                13 июня 2020, 17:19
                                Благодарю за ответ, попробую.
                            2. Александр
                              08 июня 2020, 17:22
                              Здравствуйте, как можно реализовать переключение слайдера стрелками клавиатуры?
                              1. Александр Мальцев
                                09 июня 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 июня 2020, 20:06
                                  Привет! =) С клавиатуры переключения отлично работает, но как убрать зацикленность карусели? просмотрел все примеры, под клавиши не подходит =(
                                  1. Александр Мальцев
                                    13 июня 2020, 14:33
                                    1. Александр
                                      14 июня 2020, 08:37
                                      Получается очень многофункциональный слайдер!!! Спасибо за помощь!!! =)
                                  2. Александр
                                    10 июня 2020, 14:57
                                    Спасибо за ответ! =) Очень выручили!!!)
                                2. Vladislav
                                  22 мая 2020, 22:16
                                  Вот когда я в слайдере меняю цвет на фото, то вместо фото отображается белый фон. Как это исправить?
                                  1. Александр Мальцев
                                    27 мая 2020, 13:27
                                    В статье есть пример слайдера с изображениями. Посмотрите, как там это выполнено.
                                  2. feanor13
                                    25 апреля 2020, 00:10
                                    Здравствуйте. Спасибо за столь замечательный сайт, очень полезная информация, а главное очень доступно описано.
                                    Установил слайдер и возник небольшой вопрос — если использовать индикаторы и описание слайдера, то они соответственно накладываются друг на друга. Можно ли переместить описание слайдеров под сам слайдер?
                                    1. Александр Мальцев
                                      25 апреля 2020, 15:32
                                      Здравствуйте! Спасибо за отзыв!
                                      Можно сделать и так. Но, если хотите расположить описания над изображениями, то можно просто к описаниям добавить padding, чтобы они не накладывались на индикаторы. Как это выполнить можно посмотреть в этом примере.
                                      1. feanor13
                                        25 апреля 2020, 16:33
                                        Спасибо за ответ. В статье написано: «Обёртка для слайдов .slider__wrapper содержит в себе элемент .slider__items, а он в свою очередь элементы .slider__item. Такая конструкция позволит при необходимости расположить индикаторы и элементы управления как внутри слайдов, так и за их пределами.» Я правильно понимаю что те же индикаторы можно вынести за пределы слайдера?

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

                                        И еще возник вопрос по использованию двух слайдов через flex: 0 0 50%. Они располагаются вплотную друг к другу, не подскажете как можно добавить отступ между картинками?
                                        1. Александр Мальцев
                                          26 апреля 2020, 07:38
                                          Да, в этом примере индикаторы вынесены за пределы слайдера.
                                          При использовании двух слайдов (через flex: 0 0 50%) сам слайдер находится в элементе <div class="slider__item">...</div>. Чтобы добавить какие-то отступы вы просто делаете нужную в нём разметку. Например, создаёте в нём элемент (дополнительную обёртку) и устанавливаете ему нужные padding. Остальной контент слайда помещаете уже в него. В результате у вас слайд будет иметь нужные отступы.
                                          1. feanor13
                                            26 апреля 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 апреля 2020, 15:54
                                              Пожалуйста! Так сложно гадать, создайте свой пример на jsfiddle или в какой-нибудь другой песочнице и дайте ссылку на неё в комментарии. В этом случае можно будет точно подсказать почему что-то не работает.
                                              1. feanor13
                                                27 апреля 2020, 16:55
                                                Ссылка на пример
                                                1. Александр Мальцев
                                                  28 апреля 2020, 12:17
                                                  Правильно, этот скрипт слайдера предназначен для показа в некоторый момент только одного слайда. Если необходимо одновременно показывать несколько слайдов, то возьмите скрипт, приведённый на этой странице.
                                                  1. feanor13
                                                    28 апреля 2020, 18:59
                                                    Взял за основу этот пример но хочется сделать переключатели как в другом примере, т.к. получается что изображение каждого слайда будет немного больше, особенно на смартфонах(занимает всю ширину экрана). Не подскажете что надо поменять?

                                                    И еще вопрос, в данных примерах не работает переход между слайдами свайпом, можно это как-то добавить в эту версию слайдера?
                                                    1. Александр Мальцев
                                                      01 мая 2020, 14:58
                                                      Ссылка на пример. Так?
                                                      1. feanor13
                                                        01 мая 2020, 21:48
                                                        По переключателям да, имел в виду такие. Но в идеале имел в виду как в данном примере, только как Вы сказали он не рассчитан на показ двух слайдов одновременно. Соответственно пытался сделать похожий вариант на основе chiefslider взяв за основу пример. В итоге получился такой вот вариант, но хотелось довести до варианта с индикаторами, переключателями как в Вашем последнем примере и возможностью переключения свайпом на мобильной версии. Владею только базовым понимаем работы с кодом, поэтому не смог привести в нужный вид и пока ограничился на сайте этим вариантом с показом одного слайда вместо двух в пк версии сайта
                                                        1. Александр Мальцев
                                                          17 мая 2020, 13:02
                                                          Для изменения вида переключателей изменять JavaScript не нужно. Достаточно просто отредактировать CSS: jsfiddle.net/itchief/fhgrbovy/
                                    2. Arthur
                                      08 апреля 2020, 15:16
                                      Добрый день! Не работает переключение свайпом и скроллом, подскажите пожалуйста, как можно сделать это?
                                      1. Alexander
                                        21 марта 2020, 15:10
                                        Добрый день, Александр!
                                        Ваш слайдер лучший из всех, спасибо вам огромное.
                                        В данный момент разрабатываю сайт как раз использую ваш слайдер.
                                        Появилась необходимость добавить к тексту на каждом слайде анимацию (animate.css), и вот тут как раз очень нужна ваша помощь.
                                        Использовать сторонние разработки WOW или AOS и похожих решений не хочется.
                                        Да и невозможно, наверное, с данным слайдером.
                                        Изучил ваш код JS я не могу найти как можно реализовать добавление и удаление классов.
                                        Добавить вообще не проблема, а вот удалить при смене слайда не понимаю, как, так как слайд каждый не является активным в данный момент времени.
                                        Знаний в JS у меня недостаточно, поэтому и не могу найти решения.
                                        Подскажите пожалуйста, как можно добавлять и удалять классы CSS для каждого слайда, повторно используя уже написанные вами функции.
                                        Наверное, вы уже это делали на данном слайдере в своих работах.
                                        Или вообще, как это реализовать.
                                        Заранее большое вам спасибо!
                                        1. Alexander
                                          22 марта 2020, 14:55
                                          Извините что сам себе пишу комментарий.
                                          Я смотрю на функцию
                                          // функция, добавляющая индикаторы к слайдеру
                                          _addIndicators
                                          Здесь мы определяем конкретный слайд и добавляем class 'active'
                                          Александр подскажите пожалуйста как можно, подобным способом добавлять и удалять классы анимации, в текст на слайдах.
                                          1. Александр Мальцев
                                            22 марта 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
                                              22 марта 2020, 17:44
                                              Александр спасибо вам огромное!!!
                                              Вы волшебник!!!
                                              Всё идеально работает!!!
                                              Анимацию сделал на всех слайдах…
                                              Идеально!!!
                                              Это лучший слайдер, что есть в инете.
                                        2. Dima
                                          12 марта 2020, 20:56
                                          Добрый день. Как добавить несколько слайдеров на одну страницу?
                                          1. Александр Мальцев
                                            14 марта 2020, 05:59
                                            В этом комментарии приведён такой пример.
                                          2. Дарья
                                            17 февраля 2020, 09:49
                                            Здравствуйте! Подскажите пожалуйста, почему могут не отображаться стрелочки? Спасибо.
                                            1. Александр Мальцев
                                              17 февраля 2020, 14:26
                                              Здравствуйте!
                                              Скорее всего какие-то другие стили вашего проекта переопределяют их.
                                            2. Денис
                                              04 февраля 2020, 17:01
                                              Здравствуйте, пользуюсь вашим слайдером, нашел способ как использовать 3 слайдера на странице(необходимость, по макету). Вопрос по поводу регулирования высоты, хочется чтобы при переключении слайдов в зависимости от фото размер слайда по высоте был фиксированным. Пробовал ограничивать основной контейнер и класс .slider_item по высоте (height: 70vh), но стили почему-то игнорируются(возможно, что-то делаю не так, вероятнее всего именно так.). Прошу помочь, заранее благодарен.
                                              1. Александр Мальцев
                                                06 февраля 2020, 14:07
                                                Здравствуйте! Если у изображений отношение ширины к высоте разная, то в этом случае их лучше использовать в качестве фона. После этого установите с помощью CSS высоту слайдам ту, которая нужна.
                                                1. Денис
                                                  22 февраля 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 февраля 2020, 14:33
                                                    Возможно, у вас скрипт отрабатывает до того, как становится доступен слайдер на странице. Чтобы этого не было оберните JavaScript код слайдера в эту конструкцию:
                                                    document.addEventListener('DOMContentLoaded', function(){
                                                      var slideShow = (function () {
                                                      // ...
                                                    });
                                                    1. Денис
                                                      24 февраля 2020, 15:48
                                                      Сработало! Спасибо огромное!
                                                      PS. Думаю стоит внести изменения в статье, ну и в код.
                                                      1. Денис
                                                        24 февраля 2020, 16:03
                                                        Чтобы люди с такой же проблемой узнали о решении. (Пометочку: «чтобы слайдер работал в WP»)
                                                        1. Александр Мальцев
                                                          24 февраля 2020, 16:14
                                                          Спасибо, хорошая идея, добавлю в статью.
                                              2. mezonih
                                                27 декабря 2019, 20:47
                                                А у меня почему то вообще не работает. Стрелки есть, но на другую фотку не переходит. Все сделал правильно вроде
                                                1. mezonih
                                                  27 декабря 2019, 23:49
                                                  т.е. локально работает. но есть задача ее выводить в iframe. вот там затык получается. фотка видна. но по другим нет перехода
                                                  1. Александр Мальцев
                                                    29 декабря 2019, 13:45
                                                    Значит вы туда не добавили JavaScript код слайдера.
                                                    1. mezonih
                                                      29 декабря 2019, 19:07
                                                      да. не туда добавлял. сейчас все работает. 2 слайдера на странице. Но при этом вылазиет вот такое оповещение: TypeError: Cannot read property 'querySelector' of null
                                                2. Олег
                                                  20 декабря 2019, 12:38
                                                  А как сделать, чтобы на мобильном (да и на компе наверное тоже), можно было пальцем (мышкой) скролить слайды?
                                                  1. Александр Мальцев
                                                    21 декабря 2019, 04:36
                                                    Добавил возможность свайпа в слайдер. Теперь все примеры этой статьи имеют эту возможность.
                                                  2. Алексей
                                                    10 декабря 2019, 03:42
                                                    Было бы здорово, если имелась возможность показывать более одного слайда. А так, все супер, спасибо.
                                                    1. Александр Мальцев
                                                      10 декабря 2019, 13:26
                                                      С более продвинутым вариантом реализации слайдера можете ознакомиться в этой статье.
                                                    2. Роман
                                                      02 декабря 2019, 17:52
                                                      Здравствуйте, отличная работа!
                                                      Но я столкнулся с проблемой, у меня не получается вставить этот слайдер во flex контейнер, в своем шаблоне, как мне решить этот вопрос?
                                                      1. Александр Мальцев
                                                        03 декабря 2019, 14:26
                                                        Привет! Спасибо за отзыв. Необходимо просто настроить стили, например, так.
                                                      2. Алексей Усов
                                                        24 ноября 2019, 00:03
                                                        РЕДКИЙ РЕСУРС
                                                        АЛЕКСАНДР, СПАСИБО

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

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

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

                                                                    И выносил отдельно js и стили, и вносил их в head, и пробовал при помощи включаемой области на битрикс, все уже перепробовал… все ровно не работает…
                                                                2. Олег Фролов
                                                                  20 мая 2019, 12:52
                                                                  Спасибо большое! Слайдер отлично работает. Использую его для галереи. Можете подсказать, как отключить «карусель»(чтобы, дойдя до последнего слайда, слайды не начинались сначала)?
                                                                  1. Александр Мальцев
                                                                    21 мая 2019, 15:30
                                                                    Спасибо!
                                                                    Слайдер без зацикливания можно посмотреть в этом примере.
                                                                  2. Erofeich
                                                                    24 апреля 2019, 23:53
                                                                    Слайдер не работает в IE 11 и в стандартном браузере «Браузер» на Android.
                                                                    Показывает первый слайд и всё. Нажатие на кнопки навигации ничего не даёт.
                                                                    Можно это поправить?
                                                                    Спасибо.
                                                                    1. Александр Мальцев
                                                                      25 апреля 2019, 14:03
                                                                      Это значит, что эти браузеры какие-то функции JavaScript не поддерживает. Скорее всего это функция forEach.
                                                                      В этом случае для включения поддержки необходимых старых браузеров удобно использовать полифиллы. Как это сделать посмотрите в этом комментарии.
                                                                      1. Erofeich
                                                                        25 апреля 2019, 21:36
                                                                        Спасибо, работает!)
                                                                    2. Алексей
                                                                      02 марта 2019, 14:55
                                                                      Спасибо большое!)
                                                                      1. Алексей
                                                                        01 марта 2019, 16:30
                                                                        Добрый день. Подскажите, как использовать одновременно несколько слайдеров на странице? Должно быть около 12. Это реально с этим слайдером?
                                                                        1. Александр Мальцев
                                                                          02 марта 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
                                                                          04 октября 2018, 20:06
                                                                          Большое спасибо за урок, все получилось легко — слайдер отлично работает! Вообще хотел Вам выразить признательность за все ваши уроки и темы на сайте!
                                                                          1. Александр
                                                                            12 сентября 2018, 19:41
                                                                            Александр. Спасибо. Отличное решение.
                                                                            Есть вопрос, а как сделать так, что, если кликается по активному slider__indicators — у, ничего никуда не перемещалось?
                                                                            1. Александр
                                                                              12 сентября 2018, 19:58
                                                                              Вопрос снят.
                                                                              Добавил:
                                                                              if (e.target.getAttribute('data-slide-to').classList.contains('.active')){
                                                                                return;
                                                                              }
                                                                              
                                                                            Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.