Как сделать автопрокрутку слайдера по классу? - HTML и CSS

seric · 11.05.2023, 15:21

Код:


<script>
setInterval(function() {
  document.getElementsByClassName('slider-controls')[0].click();
  var slide = document.getElementsByClassName('slide-content')[0],
    slidesContent = document.getElementsByClassName('slide')[0];
  
  slidesContent.appendChild(slide);
}, 4000);
</script>

  

<body translate="no">
  <div class="slider">
  <input type="radio" name="toggle" id="btn-1" checked>
  <input type="radio" name="toggle" id="btn-2">
  <input type="radio" name="toggle" id="btn-3">

  <div class="slider-controls">
    <label for="btn-1"></label>
    <label for="btn-2"></label>
    <label for="btn-3"></label>
  </div>

  <ul class="slides">
    <li class="slide">
      <div class="slide-content">
        <h2 class="slide-title">Slide #1</h2>
        <p class="slide-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat dignissimos commodi eos totam perferendis possimus dolorem, deleniti vitae harum? Enim.</p>
        <a href="#" class="slide-link">Learn more</a>
      </div>
      <p class="slide-image">
        <img src="https://placeimg.com/320/240/tech" alt="stuff" width="320" height="240">
      </p>
    </li>
    <li class="slide">
      <div class="slide-content">
        <h2 class="slide-title">Slide #2</h2>
        <p class="slide-text">Nisi ratione magni ea quis animi incidunt velit voluptate dolorem enim possimus, nam provident excepturi ipsam nihil molestiae minus delectus!</p>
        <a href="#" class="slide-link">Amazing deal</a>
      </div>
      <p class="slide-image">
        <img src="https://placeimg.com/320/240/animals" alt="stuff" width="320" height="240">
      </p>
    </li>
    <li class="slide">
      <div class="slide-content">
        <h2 class="slide-title">Slide #3</h2>
        <p class="slide-text">Quisquam quod ut quasi, vero obcaecati laudantium asperiores corporis ad atque. Expedita fugit dicta maxime vel doloribus sequi, facilis dignissimos.</p>
        <a href="#" class="slide-link">Get started</a>
      </div>
      <p class="slide-image">
        <img src="https://placeimg.com/320/240/any" alt="stuff" width="320" height="240">
      </p>
    </li>
  </ul>
</div>

Как не пытался все криво выходит
Кто подскажет есть специалисты?

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вопрос по RSA классу.	denis76560	Общие вопросы Delphi	1	29.04.2019 13:15
Скрипт слайдера	Maxim452	HTML и CSS	3	19.03.2015 19:19
Memo отменить автопрокрутку при добавлении строки	Timon.cheg	Компоненты Delphi	3	13.04.2014 01:42
Как сделать передвижение ползунка слайдера при проигрывании песни	jojo97	Общие вопросы .NET	2	05.01.2012 11:46
Как в TstringGrid сделать автопрокрутку?	Yuran	Общие вопросы Delphi	2	26.05.2008 15:02