0

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

let offset = 0;
const sliderLine = document.querySelector('.slider-line');

document.querySelector('.slider-next').addEventListener('click', function() {
  offset = offset + 1327;
  if (offset > 3981) {
    offset = 0;
  }
  sliderLine.style.left = -offset + 'px';
});
.slider {
  overflow: hidden;
  width: 1327px;
  height: 777px;
}

.slider-line {
  display: flex;
  position: relative;
  height: 777px;
  left: 0;
  transition: all ease 1s;
}

.slider-next {
  position: absolute;
}
<div class="content-main__img">
  <div class="slider">
    <div class="slider-line">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
    </div>
    <div class="content-main__container-button">
      <a href="#" class="content-main__button"><img src="./images/button.png" alt="button" width="250px"></a>
    </div>
    <button class="slider-next">next</button>
  </div>
</div>

4
  • Может setInterval(() => (document.querySelector('.slider-next').click()), 2e3)? Это конечно костыльный подход, но рабочий.
    – ΝNL993
    12 июн 2022 в 7:52
  • @ΝNL993, а как тогда добавить время интервала? и если нажимать на кнопку, таймер не будет сбрасываться
    – K1la
    12 июн 2022 в 7:58
  • Давайте тогда уж сразу ответ вам напишу чем в комментариях документацию делать.
    – ΝNL993
    12 июн 2022 в 8:07
  • И если вам не тяжело, то можете поставить хорошую оценку на мой ответ? (Это можно сделать нажав стрелку "вверх" которая слева от моего вопроса)
    – ΝNL993
    12 июн 2022 в 8:50

1 ответ 1

0

Это вариант если вам нужно убирать интервал когда пользователь кликнул и больше не возвращать интервал:

let offset = 0;
const sliderLine = document.querySelector('.slider-line');

document.querySelector('.slider-next').addEventListener('click', function() {
  offset = offset + 1327;
  if (offset > 3981) {
    offset = 0;
  }
  sliderLine.style.left = -offset + 'px';
  clearInterval(window.interval)
});

window.interval = setInterval(() => (document.querySelector('.slider-next').click()), 2e3)
.slider {
  overflow: hidden;
  width: 1327px;
  height: 777px;
}

.slider-line {
  display: flex;
  position: relative;
  height: 777px;
  left: 0;
  transition: all ease 1s;
}

.slider-next {
  position: absolute;
}
<div class="content-main__img">
  <div class="slider">
    <div class="slider-line">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
    </div>
    <div class="content-main__container-button">
      <a href="#" class="content-main__button"><img src="./images/button.png" alt="button" width="250px"></a>
    </div>
    <button class="slider-next">next</button>
  </div>
</div>

А это вариант если вам нужно будет через таймут снова запустить интервал после клика пользователя:

let offset = 0;
const sliderLine = document.querySelector('.slider-line');

document.querySelector('.slider-next').addEventListener('click', () => {
  clearTimeout(window.timeout)
  offset = offset + 1327;
  if (offset > 3981) {
    offset = 0;
  }
  sliderLine.style.left = -offset + 'px';
  clearInterval(window.interval)
  window.timeout = setTimeout(() => {
    window.interval = setInterval(() => (document.querySelector('.slider-next').click()), 2e3)
  }, 3e3)
});

window.interval = setInterval(() => (document.querySelector('.slider-next').click()), 2e3)
.slider {
  overflow: hidden;
  width: 1327px;
  height: 777px;
}

.slider-line {
  display: flex;
  position: relative;
  height: 777px;
  left: 0;
  transition: all ease 1s;
}

.slider-next {
  position: absolute;
}
<div class="content-main__img">
  <div class="slider">
    <div class="slider-line">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
      <img src="./images/img02.png" class="content-main__img02">
    </div>
    <div class="content-main__container-button">
      <a href="#" class="content-main__button">
        <img src="./images/button.png" alt="button" width="250px">
      </a>
    </div>
    <button class="slider-next">next</button>
  </div>
</div>

Ну и соответственно просто меняйте время интервала или таймуата чтобы регулировать скорость.

Объяснение (Учитываю только мой код)

  1. Просто чиститься интервал из глоб. объекта.

  2. В событии клика на .slider-next убираем тайуат чтобы если пользователь снова нажмёт то тайуата не было бы, дальше чистим интервал чтобы не переключались слайдеры, а после через таймуат снова ставим тот же интервал, чтобы он снова автом. переключал слайдеры.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.