БЛОГ НА HUSL


Помогите написать таймер для перемещения слайдера на JS

Автор вопроса: BattLzZ

Только начал познавать JS, решил попрактиковаться и сделать слайдер.

Слайдер из себя представляет ленту с картинками, которая перемещается при нажатии на кнопки prev и next, а также на кнопки-индикаторы снизу слайдера, и индикаторы при этом становятся "активными", и слайды автоматически меняются через какой-то промежуток времени.

У меня получилось реализовать перемещение картинок посредством нажатия на кнопки (реализовал через offset и присваивания элементу style='left:'), и получилось реализовать перемещение при нажатии на индикаторы, при этом сделав их активными на соответствующей картинке. Осталось сделать таймер перемещения слайда.

let offset = 0;
let count = document.getElementsByClassName('img').length;
let index = 0;
const sliderLine = document.querySelector('.slider__line');
const width = document.querySelector('.slider__img').offsetWidth;
const dots = document.querySelectorAll('.dot');


document.querySelector('.btn-next').addEventListener('click', function() {
  offset += width;
  if (offset >= width * count) {
    offset = 0;
  }
  dots[index].style.backgroundColor = "transparent";
  if (index < 4) {
    index++;
  } else {
    index = 0;
  }
  dots[index].style.backgroundColor = "white";
  sliderLine.style.left = -offset + 'px';
});

document.querySelector('.btn-prev').addEventListener('click', function() {
  offset -= width;
  if (offset < 0) {
    offset = width * count - width;
  }
  dots[index].style.backgroundColor = "transparent";
  if (index > 0) {
    index--;
  } else {
    index = 4;
  }
  dots[index].style.backgroundColor = "white";
  sliderLine.style.left = -offset + 'px';
});

dots[0].style.backgroundColor = 'white';
.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  position: relative;
}

.slider .slider__img {
  position: relative;
  max-width: 1400px;
  width: 100%;
  overflow: hidden;
}

.slider .slider__img .slider__line {
  display: flex;
  transition: all 1s ease;
  left: 0;
  position: relative;
}

.slider .slider__img img {
  max-width: 100%;
}

.slider .slider__img button {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  width: 50px;
  border: 0;
  background-color: rgba(238, 238, 238, 0.8);
  transition: all 0.2s linear;
}

.slider .slider__img button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.slider .slider__img button:focus {
  outline: none;
}

.slider .slider__img .btn-next {
  right: 0;
}

.slider .slider__img .btn-prev {
  left: 0;
}

.slider .slider__dots {
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: 20px;
  z-index: 2;
  display: flex;
}

.slider .slider__dots .dot {
  padding: 5px;
  border: 2px solid white;
  border-radius: 50%;
  margin: 2px;
  background-color: transparent;
  transition: all 0.1s linear;
}

.slider .slider__dots .dot:hover {
  background-color: white;
}

.slider .slider__dots .dot:focus {
  outline: none;
}

.slider .slider__dots .active {
  background-color: white;
}
<div class="slider">

  <div class="slider__img">

    <div class="slider__line">
      <img class="img" src="/img/slider/1.jpg" alt="img">
      <img class="img" src="/img/slider/2.jpg" alt="img">
      <img class="img" src="/img/slider/3.jpg" alt="img">
      <img class="img" src="/img/slider/4.jpg" alt="img">
      <img class="img" src="/img/slider/5.jpg" alt="img">
    </div>

    <button type="button" class="btn-next"></button>
    <button type="button" class="btn-prev"></button>

  </div>

  <div class="slider__dots">
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
  </div>

</div>

Заранее благодарю за помощь!)


Источник

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

Автор решения: Aziz Umarov

Как-то так думаю. Выделяете в отдельную функцию ваш переход и вызываете его по интервалу.

let offset = 0;
let count = document.getElementsByClassName('img').length;
let index = 0;
const sliderLine = document.querySelector('.slider__line');
const width = document.querySelector('.slider__img').offsetWidth;
const dots = document.querySelectorAll('.dot');


document.querySelector('.btn-next').addEventListener('click', nextImage);

document.querySelector('.btn-prev').addEventListener('click', prevImage);

dots[0].style.backgroundColor = 'white';


function nextImage() {
  offset += width;
  if (offset >= width * count) {
    offset = 0;
  }
  dots[index].style.backgroundColor = "transparent";
  if (index < 4) {
    index++;
  } else {
    index = 0;
  }
  dots[index].style.backgroundColor = "white";
  sliderLine.style.left = -offset + 'px';
}


function prevImage() {
  offset -= width;
  if (offset < 0) {
    offset = width * count - width;
  }
  dots[index].style.backgroundColor = "transparent";
  if (index > 0) {
    index--;
  } else {
    index = 4;
  }
  dots[index].style.backgroundColor = "white";
  sliderLine.style.left = -offset + 'px';
}

let timerId = setInterval(nextImage, 2000);

//если нужно остановить то нужно вызвать clearInterval(timerId);
.slider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  position: relative;
}

.slider .slider__img {
  position: relative;
  max-width: 1400px;
  width: 100%;
  overflow: hidden;
}

.slider .slider__img .slider__line {
  display: flex;
  transition: all 1s ease;
  left: 0;
  position: relative;
}

.slider .slider__img img {
  max-width: 100%;
}

.slider .slider__img button {
  position: absolute;
  top: 0;
  z-index: 2;
  height: 100%;
  width: 50px;
  border: 0;
  background-color: rgba(238, 238, 238, 0.8);
  transition: all 0.2s linear;
}

.slider .slider__img button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.slider .slider__img button:focus {
  outline: none;
}

.slider .slider__img .btn-next {
  right: 0;
}

.slider .slider__img .btn-prev {
  left: 0;
}

.slider .slider__dots {
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: 20px;
  z-index: 2;
  display: flex;
}

.slider .slider__dots .dot {
  padding: 5px;
  border: 2px solid white;
  border-radius: 50%;
  margin: 2px;
  background-color: transparent;
  transition: all 0.1s linear;
}

.slider .slider__dots .dot:hover {
  background-color: white;
}

.slider .slider__dots .dot:focus {
  outline: none;
}

.slider .slider__dots .active {
  background-color: white;
}
<div class="slider">

  <div class="slider__img">

    <div class="slider__line">
      <img class="img" src="/img/slider/1.jpg" alt="img">
      <img class="img" src="/img/slider/2.jpg" alt="img">
      <img class="img" src="/img/slider/3.jpg" alt="img">
      <img class="img" src="/img/slider/4.jpg" alt="img">
      <img class="img" src="/img/slider/5.jpg" alt="img">
    </div>

    <button type="button" class="btn-next"></button>
    <button type="button" class="btn-prev"></button>

  </div>

  <div class="slider__dots">
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
    <button type="button" class="dot"></button>
  </div>

</div>

→ Ссылка
Автор решения: Locker

Немного кода и получается приятный слайдер

const slider = document.querySelector(".slider__line");

const frames = document.querySelectorAll("span");

const controls = document.querySelectorAll(".controls input");


let slide = 0;

const move = (value) => slider.setAttribute("style", `transform:translateX(-${value}00%)`);

controls.forEach(el=>el.addEventListener("click", ({target})=>{

  if(target.value === "Next" && slide !== frames.length-1){
      move(++slide)
   }else if(target.value === "Prev" && slide !== 0){
      move(--slide)
   }
}))
.slider{
  border:1px solid black;
  width:500px;
  height:500px;
  margin:0 auto;
  overflow:hidden;
}

.slider__line{
  width:100%;
  display:flex;
  transition:1s;
  
}

span {

  min-width:500px;
  min-height:500px;
  display:inline-block;

}

span:nth-child(5){
  background-color:blue;
}
span:nth-child(1){
  background-color:red;
}
span:nth-child(2){
  background-color:green;
}
span:nth-child(3){
  background-color:purple;
}
span:nth-child(4){
  background-color:yellow;
}
<div class="slider">
  <div class="slider__line">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </div>
</div>

<div class="controls">
   <input type="button" value="Prev">
   <input type="button" value="Next">
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.