Как сделать автоматический слайдер?

Question

Как сделать так, чтобы слайдер автоматически переключал слайды? (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>

Answer 1

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

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>

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

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

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

БЛОГ НА HUSL

Как сделать автоматический слайдер?

Ответы (1 шт):

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