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

Добрый день! Подскажите, пожалуйста, как исправить.

На десктоп версии рядом находятся два слайдера. Когда кликаю по первому - индикатор работает корректно. Но когда листаю фото второго слайдера - переключается индикатор первого слайдера. Как привязать индикаторы к конкретным слайдерам?

причем не работает именно в iphone который работает на ios < 15 (проверял на 9, 11, 12, 13, 14)

на ios 15 и 16 уже все ок https://disk.yandex.com/i/Nh4YeO6uvrYbng - iphone 11 не работает на версии iOS <15

https://disk.yandex.com/i/5n5_dWmj5jYL7A - iphone 8 на ios 15 все ок

https://disk.yandex.com/i/VWin-YEk1Grgtw - iphone 13 на ios 15 все ок

https://disk.yandex.com/i/LEBSZnYoRvbA - iphone 14 на ios 16 все ок

Здравствуйте, использовал старую версию simple-adaptive-slider она в целом работала очень хорошо, только позднее обнаружил что не работает в iphone.

Я так понял из комментариев, что там было transitionstart а потом переписали по другому.

Обновил файл js на последнюю версию (css и html не стал менять, чтобы стили остались старые), в десктопе все работает хорошо, а в ios не работает по прежнему, при этом в эмуляции в браузере в мобиле работает, а на реальном смартфоне нет. вот тут например https://test10.vsemesta.net (если обновить страницу начинает работать), а в ios не работает. ошибок в логе js нету.

в чем тут может быть проблема?

Добрый день!

Александр, к сожалению (несмотря на кажущуюся простоту), ваш зарезервированный, но нигде не используемый метод moveTo(index) в контексте слайдера не работает:

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

Это особенно заметно, когда число картинок превышает 1000.

Здравствуйте! Отличный инструмент, спасибо Вам за вашу работу и за помощь людям. Но я столкнулся с проблемой которую не могу решить…
Uncaught TypeError:
Cannot read properties of null (reading 'querySelector')
at new ItcSimpleSlider (simple-adaptive-slider.js:44:32)
itchief.ru/assets/uploadify/6/5/4/6548dc7e9361bf55e4405b8d23f1b27c.png
itchief.ru/assets/uploadify/2/1/0/21065c35581a78503fa54f1671552dbb.png
Использую Django
Бал бы благодарен если бы помогли разобраться. Так как я не силён в JS

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

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

const slider = new ItcSimpleSlider('.itcss', { loop: true, swipe: true });
// сброс слайдера
slider.reset();

Здравствуйте, возможно ли реализовать с эти слайдером такое?

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

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

ксати, а чем отличается chiefSlider от simple-adaptive-slider?

кстати, интересно, а сложно переделать переход слайдера? Т.е. вместо transform translate(X) чтобы слайд не перемещался в сторону, а применить классический транзишн, эффект затухания из одного в другой, возможно через opacity? Или это рушит всю логику скрипта? Было бы здорово включить такую возможность на будущее, выбирать варианты смены слайдов. Хотя понимаю, что цель у данного — минимализм, но всегда со временем хочется большего и есть риск превратиться в слайдер революшн ))

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

Добрый день, Александр!
Если реализовать быстренько запоминание номера при закрытии, то слайдер ( В «Хроме»:) ) может выглядеть так:
slider.mirairadosti.ru/
Код в _setActiveClass():

Код в _addEventListener():

Спасибо за плагин! У меня вопрос — никак не могу разобраться, как у него работают методы next и prev/ Чтобы добавить класс к тексту, например, для анимации, как в слике, типа

    }).on('beforeChange', function(event, slick, currentSlide, nextSlide){
            $('.top-slider .table').removeClass('active');
        }).on('afterChange', function(event, slick, currentSlide, nextSlide){
            $('.top-slider .table').addClass('active');
        });

$('.top-slider').slick({
         ...     
        }).on('beforeChange', function(event, slick, currentSlide, nextSlide){
            $('.top-slider .table').removeClass('active');
        }).on('afterChange', function(event, slick, currentSlide, nextSlide){
            $('.top-slider .table').addClass('active');
        });

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.itcss__item_active .itcss__text {
  animation-name: fadeIn;
  animation-duration: 2s;
}

function onMouseEnter() {
      this._autoplay("stop");
    }

    function onMouseLeave() {
      if (this._config.loop) {
        this._autoplay();
      }
    }

.itcss__item_active

function onSwipeStart(e) {
  // this._autoplay("stop");

function onClick(e) {
  const $target = e.target;
  // this._autoplay('stop');
  ... 
  /* if (this._config.loop) {
    this._autoplay();
  } */
}

Добрый день, Александр!
Думается, хорошо бы дополнить автосохранение номера слайда при закрытии браузера произвольным сохранением понравившихся слайдов, например так:

Тогда «меню сохранения » может выглядеть так:

Прошу прощения за очередную «идею».

Здравствуйте, Александр!
Пишу вновь по поводу пассивного прослушивателя для сенсорных событий.
Да, Вы включили его «согласно науке», но что нам это дало?
У себя на планшете вижу, что при увеличении масштаба весь слайдер при свайпе начинает «шарахаться» от одной стороны в другую вместо того, чтобы менять слайды.
Я уже писал, что не очень понял все описание этого самого прослушивателя за исключением особенностей его подключения. Он замечательно работает, давая полный простор прокрутке, но зато мешает работе свайпа.
Читаю имеющуюся у меня документацию:
" Передавая в {passive: true}качестве третьего аргумента, мы указываем браузеру, что обработчик не отключит прокрутку через preventDefault().". Т.е. получается, что мы имеем хорошую «прокрутку» вместо хорошего свайпа.
Но зачем в данном случае нужна прокрутка на поле слайдера, напротив, нам нужно «листать», а не прокруткой заниматься.
Мне кажется нужно убрать этот пассивный прослушиватель из кода (он раньше был отключен — { passive: false }).
Прошу проверить мои подозрения: увеличьте масштаб и попробуйте «полистать».

Добрый день!
Прошу прощения за «генерацию» идей, но… у меня опять идея :) для большого количества слайдов:
вместо панели индикации поместить чекбокс, окошечко, кнопку перехода:

Алгоритм работы:
1) при выходе из браузера сохраняем номер слайда в локальном хранилище; данные о номере берем-

2) при загрузке смотрим чекбокс:
если включен, то подгружаем в

и переходим к слайду 188 :),
если не включен, то ничего не подгружаем и никуда не переходим.
3) если введено число вручную, то подгружаем согл.п2 и переходим по щелчку кнопки.

Добрый день, Александр!
1. Хорошо бы дополнить скрипт кодом позволяющим автоматически выделять предложения из неограниченного их количестваи вставлять в разметку: никаких дел с кодом, просто вставляем различные тексты в нужное место и… все.
Знаю как — если проявите интерес, скажите. В противном случае время отнимать не буду.
Индикацию, в этом случае, придется исключить или же переписать.
2. Хорошо бы также иметь папку для картинок, а скрипт сам бы проверял наличие, «брал» бы оттуда картинки и вставлял в код.
Пока не знаю как, но что-то мне подсказывает, что все будет аналогично во многом пункту 1.
Итог: полная автоматизация без работы с кодом. Пока не знаю как, но что-то мне подсказывает, что все будет аналогично п.1 (в смысле: «положил» картинки и… все :) )

Добрый день!
Не нашел применения пользовательскому событию 'active.itc.slider' — может быть лучше удалить:

Добрый день!
Обнаружил, что при отсутствии цикла (loop: false) на краях диапазона слайдов слайдер категорически «отказывается» возвращать на прежнее место крайний слайд (чтобы это увидеть нужно установить static SWIPE_THRESHOLD = 1;):

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

Добрый день!
Александр, не лучше ли переписать здесь код для понятности (ведь по сути одно и тоже):

Или я недопонял чего-то?

Добрый день!
Силился понять работу кода пассивного прослушивателя — основу уразумел, но эти «window.addEventListener('testPassiveListener', null, opts);» и иже с ними, ну, никак…
По ходу, в части касающейся, заметил несоответствие кода слайдера материалам инета по данному вопросу:
itchief.ru/assets/uploadify/4/1/c/41c36741e5c5fe06f1e30ecda433738d.jpg

Здравствуйте, Александр!
Кажется, в коде есть небольшая «очепятка»:
itchief.ru/assets/uploadify/6/3/e/63ee04a8194f15dea1b5921866aedbeb.jpg

Александр, добрый вечер!

У меня проблема с индикатором в правом верхнем углу. Никак не могу понять, как его убрать.
На сколько я понял, в css файле нужно указать в разделе

.itcss__indicators {
   ...
  display: none;
}

или при инициализации слайдера

<script>
    document.addEventListener('DOMContentLoaded', function () {
      // инициализация слайдера
      var slider = new ItcSimpleSlider('.itcss', {
        loop: true,
        autoplay: true,
        swipe: true,
        <b>indicators: false</b>
      });
    });
  </script>

Но в любом браузере у меня индикатор слайда(1,2,3,4) в правом верхнем углу остается.

С уважением, Виталий!

.slider__items {
  counter-reset: slide;
}
.slider__item {
  counter-increment: slide;
}
.slider__item>div::before {
  content: counter(slide);
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-style: italic;
  font-size: 32px;
  font-weight: bold;
}

Здравствуйте, Александр!
Разбираюсь в коде. Не лучше ли убрать строчку кода:
itchief.ru/assets/uploadify/0/9/0/090fc1306edc92b12b4017b62da33538.jpg

После подключение стилей…
После подключения стилей…

В этой разметки карусель…
В этой разметке карусель…

Здравствуйте.
Подключен simple-adaptive-slider.min.js в Chrome, Opera все хорошо, а вот браузеры Firefox ругаются: SyntaxError: bad method definition simple-adaptive-slider.min.js:1:31 примерно эта строка:

const r = this._el.querySelector(ItcSimpleSlider.SELECTOR_CONTROL_PREV),
            a = this._el.querySelector(ItcSimpleSlider.SELECTOR_CONTROL_NEXT);

Влияет и на другой исполняемый код… Как же это решить?

Добрый день,
Подключил слайдер, все работает как нужно, но когда зашел на safari появились какие-то мерцания при пролистывании слайдов (они появляются как то хаотично). Проект настроен через webpack и babel.
Проверил в Yandex, Chrome, Opera, Edge и FireFox — не замечено подобного

Использовал:
simple-adaptive-slider.css
simple-adaptive-slider.js

Александр. Спасибо вам за ваш сайт, нахожу здесь много полезных решений и ответов на свои вопросы.
Что касается вашего слайдера… хотел спросить.
А не стоит ли константы в JS скрипте (базовые классы и селекторы), прописать внутрь объекта (в конструкторе) и обращаться к ним в последствии как к свойствам? Это позволит не засорять глобальную область видимости и избежать конфликтов в будущем. или есть какие-то причины того, что они в глобалке?

Ещё раз спасибо за ваши труды!

.itcss__indicators {
  display: none;
}

new ItcSimpleSlider('.itcss', {
  indicators: false,
});

Здравствуйте!
Если указать в настройках слайдера

loop: false

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

Здравствуйте!
Если не трудно укажите, пожалуйста, мне неучу строки кода, реализующие адаптивность.

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

/*.slider__items {
  counter-reset: slide;
}

.slider__item {
  counter-increment: slide;
}

.slider__item>div::before {
  content: counter(slide);
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
  font-style: italic;
  font-size: 32px;
  font-weight: bold;
}*/

Доброго времени суток! Статья супер, даже начинающему понятно что к чему, но все таки столкнулся с проблемой и прошу помощи. Взял пример слайдера с миниатюрами, при нажатии на миниатюру переключение слайдера не происходит, остальное работает. Код полностью скопировал. В консоли выдает ошибку:
index.html:42 Uncaught TypeError: slider.moveTo is not a function
at HTMLDivElement.(index.html:42:16)
код в моем документе идентичен Вашему:

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // инициализация слайдера
      var slider = new SimpleAdaptiveSlider('.slider', {
        loop: true,
        autoplay: false,
        swipe: true
      });
      var thumbnailsItem = document.querySelectorAll('.slider__thumbnails-item');

      function setActiveThumbnail() {
        var sliderItemActive = document.querySelector('.slider__item_active');
        var index = parseInt(sliderItemActive.dataset.index);
        for (var i = 0, length = thumbnailsItem.length; i < length; i++) {
          if (i !== index) {
            thumbnailsItem[i].classList.remove('active');
          } else {
            thumbnailsItem[index].classList.add('active');
          }
        }
      }
      setActiveThumbnail();
      document.querySelector('.slider').addEventListener('slider.set.active', setActiveThumbnail);
      var sliderThumbnails = document.querySelector('.slider__thumbnails');
      sliderThumbnails.addEventListener('click', function(e) {
        $target = e.target.closest('.slider__thumbnails-item');
        if (!$target) {
          return;
        }
        var index = parseInt($target.dataset.slideTo, 10);
        slider.moveTo(index);
      });
    });
  </script>

День добрый!
Подскажите пожалуйста, при наведении на область над полосой, должен изменяться слайд. Что-то похоже на слайдер с Авито. Это возможно сделать при помощи Вашего слайдера?

Добрый день!

Как реализовать счетчик слайдов в формате 1/3

.slider__item>div::before {
  content: counter(slide) "/3";
  /* ... */
}

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

for (let i = 0; i < 6; i++) {
    let IdSlide = "#slider" + i;
    console.log(IdSlide);
    document.addEventListener("DOMContentLoaded", function () {
        new SimpleAdaptiveSlider(IdSlide, {
            loop: true,
            autoplay: true,
            interval: 5000,
            swipe: true,
        });
    });
}

Заранее спасибо.

Подскажите пожалуйста, как можно в вашем слайдере наложить на картинку текст? Нашёл только варианты по отдельности.

Здравствуйте, Александр!
Поставил на страницу своего сайта Ваш слайдер. На мобильных экранах (до 1030px, я так установил) показывает 1 слайд, на больших 2. Всего 7 картинок.
1. На малых экранах, когда показывается 1 картинка, всё работает чётко: и при зацикливании, и без него.
2. Но на больших экранах, когда показывается по 2 картинки, при зацикливании меняется по 2 картинки последовательно по кругу. Как бы всё чётко, но индикатор (7 чёрточек) оказывается привязанным не к ОДНОМУ фото, а к ПАРЕ. Как бы ничего страшного, но если прокликать весь индикатор, слайды совершат 2 круга.
3. НО ЕСЛИ ОТКЛЮЧИТЬ ЗАЦИКЛИВАНИЕ, на больших экранах, когда показывается по 2 картинки, на 4-м слайде показываются последняя, 7-я картинка и ПУСТОЕ МЕСТО. И далее, до последнего, 7-го слайда, все они показываются пустыми. ЧТО-ТО НАДО МЕНЯТЬ, НО ЧТО?
4. Всё, что выше, на ноутбуке со свежими браузерами (все не исследовал, только Хром, Файрфокс, Опера).
5. Но на моём старом планшете SM-T210 (Андроид 4.4.2), (браузеры Хром 74.0...., Опера 52.2...., его родной) картина ужасная:
— при зацикливании — можно увидеть последовательно 6 (из 7-ми) фото, 7-е не показывается (вместо него пустое место); при листании дальше идут БЕСКОНЕЧНО пустые места. Надо обновить страницу, чтобы увидеть что-то снова. (Есть ещё нюансы с 7-м фото: его всё же можно увидеть, но если начать движение слайдов влево, оно оказывается перед 1-м фото).
— а при отключении зацикливания, и при одном фото в окне, всё как надо! (При таких размерах моих фото и планшета по 2 фото не появляются сразу в слайдере, — так что я этот момент не исследовал).
Извините, Александр, что так много забрал Вашего драгоценного времени, но, может быть, Вы и мне что-то подскажете, и Вам для чего-то пригодится моё сумбурное описание проблемы.

.slider {
...
  max-width: 500px;
...
}
@media (min-width: 1030px) {
  .slider__item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .slider {
  max-width: 1000px;}
}

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

Привет!

Как добавить текстовую подпись к каждому слайду? Чтобы она располагалась под картинкой. Спасибо.

Здравствуйте! Очень понравился ваш простой слайдер.
Скажите пожалуйста, есть ли возможность сделать так, чтобы элементы слайдера на определенном брейкпоинте могли перестроиться в список?
Например на мобильном дизайне был бы слайдер с 3-мя слайдами, а в десктоп эти 3 слайда выстроились в ряд?
Заранее спасибо за ответ.

<style>
@media (min-width: 992px) {
  .slider__inner {
    display: flex;
    flex-direction: row;
  }
  .slider__inner>div {
    flex: 0 0 33.33333333%;
  }
}
</style>
...
<!-- Разметка одного слайда -->
<div class="slider__item">
  <div class="slider__inner">
    <div style="height: 250px; background: #3f51b5;"></div>
    <div style="height: 250px; background: #e91e63;"></div>
    <div style="height: 250px; background: #9c27b0;"></div>
  </div>
</div>

Здравствуйте, я хочу разделить этот слайдер на два, один для больших картинок, а второй для маленьких codepen.io/5M1le/pen/yLXLvNw. Я создал два скрипта, первый подключил к большому слайдеру, а второй для маленького, но у меня пропадают стрелки на большом. Что нужно сделать, чтоб стрелки были на двух слайдерах?

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

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

document.querySelectorAll('.slider').forEach((item, index) => {
  if (item.querySelectorAll('.slider__item').length > 1) {
    const id = 'slider-' + index;
    item.id = id;
    new SimpleAdaptiveSlider('#' + id, {
      loop: true,
      autoplay: false,
      interval: 5000,
      swipe: true
    });
  }
});

Александр, здравствуйте!

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

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

Вот код: codepen.io/Krayton/pen/eYWPOmN

Здравствуйте!
Подскажите, что нужно ещё исправить, чтобы на странице работали сразу несколько слайдеров с миниатюрами.
В HTML коде я дописал id=«slider-1» и id=«slider-2» и в js коде продублировал переменную slider.

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

document.addEventListener('DOMContentLoaded', function () {
      // инициализация слайдера
      var slider = new SimpleAdaptiveSlider('#slider-1', {
        loop: true,
        autoplay: false,
        swipe: true
      });
        
      var slider1 = new SimpleAdaptiveSlider('#slider-2', {
        loop: true,
        autoplay: false,
        swipe: true
      });
        
      var thumbnailsItem = document.querySelectorAll('.slider__thumbnails-item');
        
      function setActiveThumbnail() {
        var sliderItemActive = document.querySelector('.slider__item_active');
        var index = parseInt(sliderItemActive.dataset.index);
        for (var i = 0, length = thumbnailsItem.length; i < length; i++) {
          if (i !== index) {
            thumbnailsItem[i].classList.remove('active');
          } else {
            thumbnailsItem[index].classList.add('active');
          }
        }
      }
      setActiveThumbnail();
      document.querySelector('.slider').addEventListener('slider.set.active', setActiveThumbnail);
      var sliderThumbnails = document.querySelector('.slider__thumbnails');
      sliderThumbnails.addEventListener('click', function(e) {
        $target = e.target.closest('.slider__thumbnails-item');
        if (!$target) {
          return;
        }
        var index = parseInt($target.dataset.slideTo, 10);
        slider.moveTo(index);
      });
    });

Здравствуйте! Планируется ли поддержка Lazy Load, для повышения показателей Google PageSpeed? А то слайдер фоново в Network загружает и другие слайды…

<img class="img-fluid" src="/examples/images/c1.jpg" alt="..." width="800" height="400" loading="lazy">

Спасибо за слайдер! Я понял как делать авто высоту блока где отзывы, но как сделать так же авто высоту самого контейнера? А то получается что отзывы меняют высоту, но сам блок фиксированый.

Александр, добрый день! Выражаю огромную благодарность за данный слайдер!

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

Здравствуйте Александр.
Вопрос на засыпку:
Могли бы Вы реализовать слайдер с навигацией по миниатюрам дополнительных изображений.
вот примерный макет:
Это было бы очень актуально, толковых решений практически нет.
Превью слайдера
Благодарю за ответ.

Александр, доброго времени суток. Очень понравился ваш слайдер, достаточно удобный. Хотел воспользоваться им для разработки сайта для школы, но при размещении контента на разных слайдах весь контент «скапливается» на 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);
}

Александр, здравствуйте! Спасибо за вашу работу! Выбрал вашу разработку из-за простого и аккуратного кода и отсутствием необходимости подключать сторонние библиотеки. Установил версию с возможностью свайпа. Однако, свайп работает, как нажатие кнопки. Что вызывает не очень приятные ощущения у пользователя. Пользователь привык, что когда начинаешь пролистывать, сразу начинается движение элементов. Скажите, можно ли, каким либо образом сделать свайп как например при пролистывании слайдов в посте Инстаграм? Чтобы движение слайдов начиналось вместе с движением пальца по области карусели? Спасибо!

        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');
				}
			}
          });
          
        }

Александр, огромное спасибо за слайдер!
У меня такой вопрос: есть 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>';
...

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

здравствуйте, Александр)

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

спасибо

Можно ли применить этот слайдер к нескольким элементам на странице с одним классом? ID использовать нельзя. Прописывать дополнительные классы тоже. Может, можно как-то пройтись циклом по родительскому элементу (у каждого слайдера есть родитель, который тоже обозначен одним классом) и обратиться к элементу .slider как к дочернему? Не знаю, как это реализовать

_slider = document.querySelector(selector), // основный элемент блока

_slider = selector instanceof Element ? selector : document.querySelector(selector), // основный элемент блока

const sliderList = document.querySelectorAll('.slider');
sliderList.forEach(function($element) {
  slideShow($element);
}

Добрый день Александр Мальцев
Подскажите пожалуйста, можно для мабайла грузить одно разрешение баннеров а для десктора другое? что бы гугл не ругался.
Заранее благодарен.

<img srcset=" srcset="picture-320w.jpg 320w, picture-800w.jpg 800w"
         sizes="(max-width: 980px) 320px, 800px"
         src="picture-800w.jpg" alt="...">

Добрый день.
Прошу подсказать как правильно расположить баннер в слайдер.
Правая часть слайдера остается пустой как будто длины баннера не хватает.
Заранее благодарю.

<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>

Можете помочь как уменьшить слайдер чтоб он был на половину меньше чем на весь экран и распологался по середине, и когда страницу уменьшаешь слайдер тоже был бы меньше. Заранее спасибо!)))

<!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>

<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>

Доброго времени суток. Я хочу добавить больше двух таких слайдер на страницу. Но работает только первый слайдер. Помогите пожалуйста сделать так, чтоб работали все слайдеры на странице. Большое спасибо!

Александр, здравствуйте! Пытаюсь настроить 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');
}
});
}

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

.img-fluid {
  display: block;
  height: auto;
  max-width: 100%;
}

Спасибо Вам Огромное Александр что Вы нам помогаете и делитесь с нами своими знаниями!
Вы наш добрый Ангел!***))) Все работает! Как всегда полезный и обьяснен до мелочей чудо-урок!
кстати, все ваши видео на Ютуб также шикарны, я ваш верный подписчик, Спасибо!!!

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

Добрый день, возникла проблема. Добавил HTML, CSS и JS код на сайт(работает на opencart) обернул JS код в document.addEventListener('DOMContentLoaded', function(){
var slideShow = (function () {

});
Сайт видит файл подключенный, но ничего не работает в плане скрипта, что делать?

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

Здравствуйте, а как реализовать на одном сайте два разных типа слайдера? если стили все в одном файле? это возможно?
Допустим на главной слайдер с картинками, а в личном кабинете хочу сделать слайдер текстовый.

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

/* стили для 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;
}

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

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

document.addEventListener('keydown', function (e) {
  if (e.keyCode === 37) {
    slider.left();
  } else if (e.keyCode === 39) {
    slider.next();
  }
});

Вот когда я в слайдере меняю цвет на фото, то вместо фото отображается белый фон. Как это исправить?

Здравствуйте. Спасибо за столь замечательный сайт, очень полезная информация, а главное очень доступно описано.
Установил слайдер и возник небольшой вопрос — если использовать индикаторы и описание слайдера, то они соответственно накладываются друг на друга. Можно ли переместить описание слайдеров под сам слайдер?

.slider__item>.slider_padr {
      padding-right: 5px;
                }
               .slider__item>.slider_padl {
      padding-left: 5px;
                }

Добрый день! Не работает переключение свайпом и скроллом, подскажите пожалуйста, как можно сделать это?

Добрый день, Александр!
Ваш слайдер лучший из всех, спасибо вам огромное.
В данный момент разрабатываю сайт как раз использую ваш слайдер.
Появилась необходимость добавить к тексту на каждом слайде анимацию (animate.css), и вот тут как раз очень нужна ваша помощь.
Использовать сторонние разработки WOW или AOS и похожих решений не хочется.
Да и невозможно, наверное, с данным слайдером.
Изучил ваш код JS я не могу найти как можно реализовать добавление и удаление классов.
Добавить вообще не проблема, а вот удалить при смене слайда не понимаю, как, так как слайд каждый не является активным в данный момент времени.
Знаний в JS у меня недостаточно, поэтому и не могу найти решения.
Подскажите пожалуйста, как можно добавлять и удалять классы CSS для каждого слайда, повторно используя уже написанные вами функции.
Наверное, вы уже это делали на данном слайдере в своих работах.
Или вообще, как это реализовать.
Заранее большое вам спасибо!

...
_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');

Добрый день. Как добавить несколько слайдеров на одну страницу?

Здравствуйте! Подскажите пожалуйста, почему могут не отображаться стрелочки? Спасибо.

Здравствуйте, пользуюсь вашим слайдером, нашел способ как использовать 3 слайдера на странице(необходимость, по макету). Вопрос по поводу регулирования высоты, хочется чтобы при переключении слайдов в зависимости от фото размер слайда по высоте был фиксированным. Пробовал ограничивать основной контейнер и класс .slider_item по высоте (height: 70vh), но стили почему-то игнорируются(возможно, что-то делаю не так, вероятнее всего именно так.). Прошу помочь, заранее благодарен.

Uncaught TypeError: Cannot read property 'querySelector' of null
    at main.js?ver=5.3.2:6
    at main.js?ver=5.3.2:188

<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>

document.addEventListener('DOMContentLoaded', function(){
  var slideShow = (function () {
  // ...
});

А у меня почему то вообще не работает. Стрелки есть, но на другую фотку не переходит. Все сделал правильно вроде

А как сделать, чтобы на мобильном (да и на компе наверное тоже), можно было пальцем (мышкой) скролить слайды?

Было бы здорово, если имелась возможность показывать более одного слайда. А так, все супер, спасибо.

Здравствуйте, отличная работа!
Но я столкнулся с проблемой, у меня не получается вставить этот слайдер во flex контейнер, в своем шаблоне, как мне решить этот вопрос?

РЕДКИЙ РЕСУРС
АЛЕКСАНДР, СПАСИБО

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

как сделать автоматику плавной?

Добрый день. Отличный слайдер, спасибо вам! А как сделать так, чтобы одновременно выводилось два слайда, но при этом шаг литания слайдера оставался один слайд вправо или влево? Спасибо.

Классный слайдер просто супер. Только один вопрос как сделать чтоб фото автоматически листались?

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

<?if(CModule::IncludeModule("aspro.mshop")) {CMShop::Start(SITE_ID);}?>

В блоке в header`е, мешает этот модуль.
Если строку удалить — анимация и все все все, работает шикарно.
Но вот с ним — нет.

Есть ли возможность у Вас помочь, разобраться

Спасибо большое! Слайдер отлично работает. Использую его для галереи. Можете подсказать, как отключить «карусель»(чтобы, дойдя до последнего слайда, слайды не начинались сначала)?

Слайдер не работает в IE 11 и в стандартном браузере «Браузер» на Android.
Показывает первый слайд и всё. Нажатие на кнопки навигации ничего не даёт.
Можно это поправить?
Спасибо.

Спасибо большое!)

Добрый день. Подскажите, как использовать одновременно несколько слайдеров на странице? Должно быть около 12. Это реально с этим слайдером?

<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>

Большое спасибо за урок, все получилось легко — слайдер отлично работает! Вообще хотел Вам выразить признательность за все ваши уроки и темы на сайте!

Александр. Спасибо. Отличное решение.
Есть вопрос, а как сделать так, что, если кликается по активному slider__indicators — у, ничего никуда не перемещалось?

if (e.target.getAttribute('data-slide-to').classList.contains('.active')){
  return;
}