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

Замечательный простой слайдер. Но стоило вывести кнопки из обёртки слайдера так началось... Даже обновился с гитхаба - ошибки стали красивее. Ох и намучился с этим кодом. Жаль времени.

Ошибка, если вдруг начнётся диалог:

Uncaught TypeError: can't access property "classList", this._elListIndicator[index] is undefined

Здравствуйте. Спасибо за отличный слайдер

При подключении нескольких слайдеров столкнулся с проблемой. Индикатор первого слайдера реагирует и на второй, а в индикатор второго слайдера не подставляется activ

На скрине приведен пример

Спасибо

Здравствуйте. Я делаю свой сайт, но плохо разбираюсь в js. Мне понадобился слайдер. Решил взять ваш. Запустил его, но он не работает как описано и как мне хочется: loop не включается (в крайних положениях слайдера пропадает кнопка для перемещения); нельзя сначала кликнуть мышью, а потом свайпнуть (не свайпается), получается только сначала начать перемешать курсор мыши, затем в процессе перемещения кликнуть и начать свайп. Решил взять скрипт из вашего примера на сайте, а не из GitHub, но он тоже некорректно работает в браузере Safari (в Chrome все в порядке): при перемещении слайдов слева на право из первоначального положения (загрузилась страница свайпать влево не надо, сразу вправо) слайд слева перемещается к центру, но он на несколько миллисекунд заменяется на слайд стоящий справа от него, после чего принимает прежний вид и встает в центр. Вернулся к варианту с GitHub и у меня получилось разобраться, как мне кажется, если исправить в файле simple-adaptive-slider.js строки 129 и 269 на следующие:

269 this._hasSwiping = true;

Я не хочу сказать, что ваш слайдер плохой, просто, так как я не знаю js, то мне стоило трудов разобраться. И я хочу с этим поделиться с остальными. Спасибо за слайдер!

Добрый день. Подскажите, пожалуйста, не могу разобраться, что нужно использовать и куда прописать, чтобы кнопки пропадали, когда доходишь до конца слайдов в одну или другую сторону? как в этом примере (https://itchief.ru/examples/lab.php?topic=javascript&file=simple-adaptive-slider-01).

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

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

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

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

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

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

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

Добрый день!

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

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

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

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

loop: false

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

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

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

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

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

<?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>';
...

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

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