2

Столкнулась с очередной сложностью, создавая свой первый слайдер на чистом 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);
0

2 ответа 2

1

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

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>

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 сделать так, чтобы слайды "прокативались".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.