Плавное пролистывание слайдера JS

Question

Столкнулась с очередной сложностью, создавая свой первый слайдер на чистом js. Как можно сделать, чтобы слайды пролистывались плавно, а не просто сменяли друг друга? Понимаю, что это делается с помощью CSS, пыталась крутить-вертеть, но не помогло.

Код, соответственно, прилагаю: https://jsfiddle.net/ds9mejbv/

А вот JS:

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById ('prev');
let next = document.getElementById ('next');

next.addEventListener ("click", function () {
  showSlides(slideIndex += 1);

});

prev.addEventListener ("click", function () {
  showSlides(slideIndex -= 1);
});

function currentSlide(n) {
  showSlides(slideIndex = n);
}


function showSlides(n) {
    let slides = document.getElementsByClassName("myslide");
    if (n > slides.length) {
      slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }
 
    for (let slide of slides) {
        slide.style.display = "none";
    }
    slides[slideIndex - 1].style.display = "flex";    
  }

 let timer = setInterval(function(){
    slideIndex++;
    showSlides(slideIndex);
  },5000);

Answer 1

Удалось сделать через opacity, заменив немного стили

.myslide {
  display: none;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  transition: opacity 0.3s ease-in-out;
}

и js код

for (let slide of slides) {
        slide.style.display = "none";
        slide.style.opacity = 0;
    }
    slides[slideIndex - 1].style.display = "inline-flex";   
    setTimeout(() => slides[slideIndex - 1].style.opacity = 1, 0)

но вышло не то чтобы идеально, так что если есть какие-то корректировки, буду рада услышать, особенно есть ли возможность на чистом js сделать так, чтобы слайды "прокативались".

Answer 2

Смотрите, как пример:

let slideIndex = 1;
showSlides(slideIndex);

let prev = document.getElementById('prev');
let next = document.getElementById('next');

next.addEventListener("click", function() {
  showSlides(slideIndex += 1);
  clearInterval(timer);
  timer = setInterval(function() {
    slideIndex++;
    showSlides(slideIndex);
  }, 3000);
});

prev.addEventListener("click", function() {
  showSlides(slideIndex -= 1);
  clearInterval(timer);
  timer = setInterval(function() {
    slideIndex++;
    showSlides(slideIndex);
  }, 3000);

});

function currentSlide(n) {
  showSlides(slideIndex = n);
}


function showSlides(n) {
  let slides = document.getElementsByClassName("myslide");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }

  for (let slide of slides) {
    slide.classList.remove('myslide__active');
    //slide.style.display = "none";
  }
  slides[slideIndex - 1].classList.add('myslide__active');
  //slides[slideIndex - 1].style.display = "flex"; 
}

let timer = setInterval(function() {
  slideIndex++;
  showSlides(slideIndex);
}, 3000);

.slider_wrapper {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  height: 150px;
  width: 500px;
  margin: 0 auto;
}

.myslide {
  /*display: none;*/
  flex-wrap: nowrap;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-200%);
  transition: transform 0.5s;
}

.myslide__active {
  display: flex;
  transform: translateY(0);
}

.myslide img {
  margin-right: 15px;
  margin-left: 15px;
}

.slider_wrapper a {
  cursor: pointer;
}

img {
  height: 150px;
}

<div class="slider_wrapper">
  <a id="prev"><img src="/img/slides/prev.min.png" alt="prev"></a>

  <div class="myslide">
    <div class="slider_item pack_1"><img src="https://picsum.photos/id/217/200/300" alt="a1"></div>
    <div class="slider_item pack_1"><img src="https://picsum.photos/id/227/200/300" alt="a2"></div>
    <div class="slider_item pack_1"><img src="https://picsum.photos/id/237/200/300" alt="a3"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_2"><img src="https://picsum.photos/id/247/200/300" alt="b1"></div>
    <div class="slider_item pack_2"><img src="https://picsum.photos/id/257/200/300" alt="b2"></div>
    <div class="slider_item pack_2"><img src="https://picsum.photos/id/267/200/300" alt="b3"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_3"><img src="https://picsum.photos/id/277/200/300" alt="c1"></div>
    <div class="slider_item pack_3"><img src="https://picsum.photos/id/287/200/300" alt="c2"></div>
    <div class="slider_item pack_3"><img src="https://picsum.photos/id/297/200/300" alt="c3"></div>
  </div>
  <div class="myslide">
    <div class="slider_item pack_4"><img src="https://picsum.photos/id/218/200/300" alt="dl"></div>
    <div class="slider_item pack_4"><img src="https://picsum.photos/id/219/200/300" alt="d2"></div>
    <div class="slider_item pack_4"><img src="https://picsum.photos/id/220/200/300" alt="d3"></div>
  </div>

  <a id="next"><img src="/img/slides/next.min.png" alt="next"></a>
</div>

БЛОГ НА HUSL

Плавное пролистывание слайдера JS

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