Отображение и нажатие нижних кнопок на слайдере

Question

Хочу добавить возможность клика на нижние кнопки в слайдере (dots), которые будут при этом перелистывать сам слайд и принимать класс active.

const images=document.querySelectorAll('.slider .slider-line img');
const sliderLine=document.querySelector('.slider .slider-line');
let dots=document.querySelectorAll('.dots-item'),
dotsArea=document.querySelector('.dots-block');
let count=0;
let width;
function init() {
  console.log('resize');
  width=document.querySelector('.slider').offsetWidth;
  sliderLine.style.width=width * images.length+'px';
  images.forEach(item=> {
    item.style.width=width + 'px';
    item.style.height='auto';
  }
  );
  rollSlider();
}

var timer=0;
makeTimer(); //Создаем интервал 
function makeTimer() {
  clearInterval(timer) //Очистим интервал, это позволит прервать его работу и отменить перелистывание
  timer=setInterval(function() {
    count++;
    if (count >=images.length) {
      count=0;
    }
    rollSlider(count);
  }
  , 5000);
}

init();
window.addEventListener('resize', init);
document.querySelector('.slider-next').addEventListener('click', function () {
  count++;
  if (count >=images.length) {
    count=0;
  }
  makeTimer();
  rollSlider();
}

);
document.querySelector('.slider-prev').addEventListener('click', function () {
  count--;
  if (count < 0) {
    count=images.length - 1;
  }
  rollSlider();
  makeTimer();
}

);
function rollSlider() {
  sliderLine.style.transform='translate(-'+count * width+'px)';
}

<div class="slider">
  <div class="slider-line">
    <img src="https://images.unsplash.com/photo-1648138754675-b9918364e325?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1648298163952-17081c29aae1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="">
  </div>
</div>
<div class="buttons-block">
  <button class="slider-prev">&#10094</button>
  <button class="slider-next">&#10095</button>
</div>
<div class="dots-block">
  <div class="dots-item active"></div>
  <div class="dots-item"></div>
  <div class="dots-item"></div>
  <div class="dots-item"></div>
  <div class="dots-item"></div>
</div>
</div>

Answer 1

Вынес движение слайдера в функцию moveSlide. Так удобнее просто управлять в одном месте движением, а направление передаём просто через аргумент. Ниже пример с публичными фотографиями, стили написал самые простые. Для удобства рекомендую открыть пример на полный экран:

const images = document.querySelectorAll('.slider .slider-line img');
const sliderLine = document.querySelector('.slider .slider-line');
let dots = document.querySelectorAll('.dots-item'),
  dotsArea = document.querySelector('.dots-block');
let count = 0;
let width;

function init() {
  //console.log('resize');
  width = document.querySelector('.slider').offsetWidth;
  sliderLine.style.width = width * images.length + 'px';
  images.forEach(item => {
    item.style.width = width + 'px';
    item.style.height = 'auto';
  });
  rollSlider();
}
var timer = 0;
makeTimer(); //Создаем интервал 
function makeTimer() {
  clearInterval(timer) //Очистим интервал, это позволит прервать его работу и отменить перелистывание
  timer = setInterval(function() {
    scrollSlide(1);
    rollSlider(count);
  }, 5000);
}

init();
window.addEventListener('resize', init);

document.querySelector('.slider-next').addEventListener('click', () => scrollSlide(1));

document.querySelector('.slider-prev').addEventListener('click', () => scrollSlide(-1));

dots.forEach((dot, index) => dot.addEventListener('click', () => setSlide(index)));

function scrollSlide(direction) {
  count = (count + direction + images.length) % images.length;
  moveSlide();
}

function setSlide(index) {
  count = index;
  moveSlide();
}

function moveSlide() {  
  document.querySelector('.dots-item.active').classList.remove('active');
  document.querySelectorAll('.dots-item')[count].classList.add('active');
  
  rollSlider();
  makeTimer();
}

function rollSlider() {
  sliderLine.style.transform = 'translate(-' + count * width + 'px)';
}

.slider-line img {
  max-width: 500px;
  max-height: 250px;
}

.dots-block {
  display: flex;
  height: 100px;
  width 200px;
}

.dots-item {
  width: 25px;
  height: 25px;
  background-color: black;
  border-radius: 50%;
  margin: 0 8px;
  cursor: pointer;
}

.dots-item.active {
  background-color: red;
}

<div class="slider">
  <div class="slider-line">
    <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2Fyc3xlbnwwfHwwfHw%3D&w=1000&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNhcnN8ZW58MHx8MHx8&w=1000&q=80" alt="">
    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/carbon-fiber-shelby-mustang-1600685276.jpg?crop=0.9988636363636364xw:1xh;center,top&resize=480:*" alt="">
    <img src="https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
    <img src="https://media.wired.com/photos/5d09594a62bcb0c9752779d9/1:1/w_1500,h_1500,c_limit/Transpo_G70_TA-518126.jpg" alt="">
  </div>
</div>
<div class="buttons-block">
  <button class="slider-prev">&#10094</button>
  <button class="slider-next">&#10095</button>
</div>
<div class="dots-block">
  <div class="dots-item active"></div>
  <div class="dots-item"></div>
  <div class="dots-item"></div>
  <div class="dots-item"></div>
  <div class="dots-item"></div>
</div>
</div>

БЛОГ НА HUSL

Отображение и нажатие нижних кнопок на слайдере

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