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

Александр Мальцев
89K
6
Простой адаптивный слайдер для сайта на чистом 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. Виктор
    2 минуты назад
    Спасибо за слайдер! Я понял как делать авто высоту блока где отзывы, но как сделать так же авто высоту самого контейнера? А то получается что отзывы меняют высоту, но сам блок фиксированый.
    1. Илья Николаевич Полешко
      19 мая 2021, 11:56
      Александр, добрый день! Выражаю огромную благодарность за данный слайдер!

      Подскажите пожалуйста как можно поменять анимацию с перелистывания на затухание-появление.
      1. Konstantin
        09 мая 2021, 19:43
        Здравствуйте Александр.
        Вопрос на засыпку:
        Могли бы Вы реализовать слайдер с навигацией по миниатюрам дополнительных изображений.
        вот примерный макет:
        Это было бы очень актуально, толковых решений практически нет.
        Превью слайдера
        Благодарю за ответ.
        1. Александр Мальцев
          16 мая 2021, 11:31
          Привет! Пример слайдера с миниатюрами добавлен в статью.
          1. Александр Мальцев
            10 мая 2021, 12:08
            Привет! Для этого не обязательно реализовать новый слайдер, можно использовать этот. В ближайшее время покажу как это можно сделать.
            1. Konstantin
              10 мая 2021, 08:14
              У нас несколько проектов и мы давно ищем правильный слайдер…
              Возможно есть опция на платной основе заказать у вас слайдер с необходимым функционалом?
              1. Александр Мальцев
                10 мая 2021, 12:08
                По времени сразу скажу, что точных сроков определить не смогу. То время есть, то его нет. Если так устроит, то напишите на почту alexander@itchief.ru какой нужен функционал.
                1. Konstantin
                  11 мая 2021, 08:51
                  Отправил описание на почту…
                  1. Konstantin
                    10 мая 2021, 14:24
                    Да устроит если это в пределах разумного и не растянется на годы )
              2. Андрей
                06 мая 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. Oleg
                  24 апреля 2021, 04:20
                  Александр, здравствуйте! Спасибо за вашу работу! Выбрал вашу разработку из-за простого и аккуратного кода и отсутствием необходимости подключать сторонние библиотеки. Установил версию с возможностью свайпа. Однако, свайп работает, как нажатие кнопки. Что вызывает не очень приятные ощущения у пользователя. Пользователь привык, что когда начинаешь пролистывать, сразу начинается движение элементов. Скажите, можно ли, каким либо образом сделать свайп как например при пролистывании слайдов в посте Инстаграм? Чтобы движение слайдов начиналось вместе с движением пальца по области карусели? Спасибо!
                  1. Александр Мальцев
                    24 апреля 2021, 14:31
                    Привет! Пожалуйста! Посмотрю, как это можно реализовать здесь.
                    1. Oleg
                      24 апреля 2021, 15:09
                      Очень жду ваш вариант. Сейчас более 70% трафика — мобильный. И сайт должен вызывать приятные эмоции от использования.
                      Ps.
                      Можете посмотреть, как слайдер работает сейчас ссылка
                      1. Александр Мальцев
                        30 апреля 2021, 13:15
                        Полностью обновил слайдер и инструкцию по его использованию. Пробуйте.
                        1. Oleg
                          30 апреля 2021, 13:34
                          Спасибо!
                    2. Oleg
                      24 апреля 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 февраля 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;
                                                                                                }
                                                                                                
                                                                                              Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.