Слайдер. Доты. JavaScript

Question

"14.02.2020"

Написал простой слайдер. Все вроде работает. Сделал какой-никакой responsive. Осталось dots навигацию прикрутить и тут вот проблема. НЕ пойму как их настроить. Если с прокруткой влево-вправо все просто и понятно, то здесь, я так понимаю, к ID-шнику нужно конектится, но у меня ничего не получается.

Помогите разобраться, пожалуйста.

"16.02.2020" (ПРАВКИ):

Прикрутил доты, немножко переписав код. Но теперь при скроле назад(влево) последний елемент возвращается с опозданием. Как это исправить, подскажите.

'use strict';

const slider = document.querySelector('.slider-list');

const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const dots = document.querySelectorAll('.dot');

const size = document.querySelector('.slide').clientWidth;
let direction = 0;

// buttons
nextBtn.onclick = function() {
  slider.style.transform = 'translateX(' + (-size) + 'px)';
  direction = 1;
};

prevBtn.onclick = function() {
  direction = -1;
  slider.style.transform = 'translateX(' + (size) + 'px)';
};

// after transition event
slider.addEventListener('transitionend', function() {
  let slides = document.querySelectorAll('.slide');

  if (direction < 0) {
    for (let i = 0; i > direction; i--) {
      slider.prepend(slides[slides.length + i - 1]);
    }
  } else if (direction > 0) {
    for (let i = 0; i < direction; i++) {
      slider.append(slides[i]);
    }
  }
  // remove class active from dots
  dots.forEach((dot, i) => {
    dot.classList.remove('active');
  });

  slides = document.querySelectorAll('.slide');
  let currentSliderId = slides[0].id.split('_')[1];
  // add class to dots
  dots[currentSliderId - 1].classList.add('active');

  // re-init transition
  slider.style.transition = 'none';
  slider.style.transform = 'translate(0)';
  setTimeout(() => {
    slider.style.transition = 'transform 0.5s ease-in-out';
  }, 0)
});
// dots
dots.forEach((dot, i) => {
  dot.addEventListener('click', () => {
    const slides = document.querySelectorAll('.slide');

    let currentSliderId = slides[0].id.split('_')[1];
    let destSliderId = i + 1;
    direction = destSliderId - currentSliderId;
    let transWidth = direction * size;

    slider.style.transform = `translateX(${-transWidth}px)`;
  })
});

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Calibri;
  background: dodgerblue;
}

h1 {
  font-size: 50px;
  color: #333333;
  text-align: center;
  margin: 20px 0;
}

button {
  background: none;
  border: none;
}

.slider-wrapper {
  position: relative;
  width: 780px;
  margin: 0 auto;
}

.slider-body {
  width: 780px;
  overflow: hidden;
}

.slider-list {
  width: 9999px;
  margin: 0;
  padding: 0;
  transition: all 500ms ease-in-out;
}

.slide {
  display: inline-block;
  padding: 0 10px;
  float: left;
}

.slide-item {
  width: 240px;
  height: 240px;
  font-size: 50px;
  color: dodgerblue;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  margin: 0;
  background: #fff;
}

.arrow {
  position: absolute;
  top: 35%;
  padding: 0;
  font-size: 60px;
  color: white;
}

.arrow:focus {
  outline: none;
}

.arrow:hover {
  cursor: pointer;
}

.prev {
  left: -5%;
}

.next {
  right: -5%;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

@media only screen and (min-device-width: 480px) and (max-device-width: 1024px) {
  .slider-wrapper {
    width: 440px;
  }
  .slider-body {
    width: 440px;
  }
  .slide-item {
    width: 200px;
    height: 200px;
  }
  .arrow {
    top: 28%;
  }
  .next {
    right: -10%;
  }
  .prev {
    left: -10%;
  }
}

@media only screen and (max-device-width: 550px) {
  .arrow {
    font-size: 26px;
    top: 42%;
  }
  .next {
    right: -3%;
  }
  .prev {
    left: -3%;
  }
}

@media only screen and (max-device-width: 479px) {
  .slider-wrapper {
    width: 280px;
  }
  .slider-body {
    width: 280px;
  }
  .slide-item {
    width: 260px;
  }
  .next {
    right: -5%;
  }
  .prev {
    left: -5%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Slider</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1>Slider</h1>

  <div class="slider-wrapper">

    <button class="arrow prev">&#10094;</button>
    <button class="arrow next">&#10095;</button>

    <div class="slider-body">
      <div class="slider-list">
        <div id="slide_1" class="slide">
          <div class="slide-item">1</div>
        </div>
        <div id="slide_2" class="slide">
          <div class="slide-item">2</div>
        </div>
        <div id="slide_3" class="slide">
          <div class="slide-item">3</div>
        </div>
        <div id="slide_4" class="slide">
          <div class="slide-item">4</div>
        </div>
        <div id="slide_5" class="slide">
          <div class="slide-item">5</div>
        </div>
        <div id="slide_6" class="slide">
          <div class="slide-item">6</div>
        </div>
      </div>
    </div>

    <div id="dots" style="text-align:center; margin-top: 20px">
      <a href="#" class="dot active"></a>
      <a href="#" class="dot"></a>
      <a href="#" class="dot"></a>
      <a href="#" class="dot"></a>
      <a href="#" class="dot"></a>
      <a href="#" class="dot"></a>
    </div>

  </div>

  <script src="script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Слайдер. Доты. JavaScript

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