Плавность переключения изображений в слайдере

Question

Всем привет, возникла такая небольшая проблемка. Сам слайдер автоматический, меняет слайды по 3-шт за раз, всего восемь слайдов, т.е. 3 блок меняющих друг друга. Классы и прочее в скриншотах. Каким образом при смене слайдов можно достичь плавности? пробовал @keyframes, transition, и немного в жс, увы, не помогло. Хелп

let slideIndex = 1;
showSlides(slideIndex);

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

next.addEventListener("click", function() {
  showSlides((slideIndex += 1));
  makeTimer(); //Пересоздаем интервал если производится нажатие
});

prev.addEventListener("click", function() {
  showSlides((slideIndex -= 1));
  makeTimer(); //Пересоздаем интервал если производится нажатие
});

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 = 0;
makeTimer(); // интервал
function makeTimer() {
  clearInterval(timer); //Очистим интервал, это позволит прервать его работу и отменить перелистывание
  timer = setInterval(function() {
    slideIndex++;
    showSlides(slideIndex);
  }, 5000);
}

/* Кнопки вперед и назад */

.prev {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 19px;
  position: absolute;
  width: 52px;
  height: 52px;
  left: 0px;
  top: 192px;
  border: 2px solid #F1CDB3;
  box-sizing: border-box;
  border-radius: 100px;
  cursor: pointer;
}

.next {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 19px;
  cursor: pointer;
  position: absolute;
  width: 52px;
  height: 52px;
  left: 1148px;
  top: 192px;
  border: 2px solid #F1CDB3;
  box-sizing: border-box;
  border-radius: 100px;
  transform: rotate(-180deg);
}

.item {
  width: 270px;
  height: 435px;
  left: 105px;
  top: 0px;
  background: #FAFAFA;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 45px;
}

.slideText {
  width: 74px;
  height: 23px;
  left: 98px;
  top: 300px;
  font-family: Georgia;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.06em;
  color: #545454;
}

.pets_button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 45px;
  width: 187px;
  height: 52px;
  left: 41.5px;
  top: 320px;
  border: 2px solid #F1CDB3;
  box-sizing: border-box;
  border-radius: 100px;
  align-items: center;
  font-family: Georgia;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: 0.06em;
  color: #292929;
}

.slider_wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.slider_wrapper a {
  cursor: pointer;
}

<div class="slider-pets" id="SliderPets">
  <div class="myslide">
    <div class="slider_item item">
      <img src="./assets/img/pets-katrine.png" alt="Первый слайд" />
      <div class="slideText">Katrine</div>
      <button class="pets_button js-open-modal" data-modal="5">
                  Learn more
                </button>
    </div>
    <div class="slider_item item">
      <img src="./assets/img/pets-jennifer.png" alt="Второй слайд" />
      <div class="slideText">Jennifer</div>
      <button class="pets_button js-open-modal" data-modal="1">
                  Learn more
                </button>
    </div>
    <div class="slider_item item">
      <img src="./assets/img/pets-woody.png" alt="Третий слайд" />
      <div class="slideText">Woody</div>
      <button class="pets_button js-open-modal" data-modal="3">
                  Learn more
                </button>
    </div>
  </div>
  <div class="myslide">
    <div class="slider_item item">
      <img class="border" src="./assets/img/pets-sophia.png" alt="Четвертый слайд" />
      <div class="slideText">Sophia</div>
      <button class="pets_button js-open-modal" data-modal="2">
                  Learn more
                </button>
    </div>
    <div class="slider_item item">
      <img src="./assets/img/pets-timmy.png" alt="Пятый слайд" />
      <div class="slideText">Timmy</div>
      <button class="pets_button js-open-modal" data-modal="6">
                  Learn more
                </button>
    </div>
    <div class="slider_item item">
      <img class="border" src="./assets/img/pets-charly.png" alt="Шестой слайд" />
      <div class="slideText">Charly</div>
      <button class="pets_button js-open-modal" data-modal="8">
                  Learn more
                </button>
    </div>
  </div>
  <div class="myslide Scarlett">
    <div class="slider_item item ">
      <img src="./assets/img/pets-scarlet.png" alt="Седьмой слайд" />
      <div class="slideText">Scarlett</div>
      <button class="pets_button js-open-modal" data-modal="4">
                  Learn more
                </button>
    </div>
    <div class="slider_item item">
      <img src="./assets/img/pets-freddy.png" alt="Восьмой слайд" />
      <div class="slideText">Freddie</div>
      <button class="pets_button js-open-modal" data-modal="7">
                  Learn more
                </button>
    </div>
  </div>
  <a class="prev" id="prev" onclick="minusSlide()"><img src="./assets/svg/Arrow-1.svg" alt="prev_arrow" /></a>
  <a class="next" id="next" onclick="plusSlide()"><img src="./assets/svg/Arrow-1.svg" alt="next_arrrow" /></a>
</div>

Answer 1

Скорее всего из-за того, что ты оперируешь элементами массива, не получается плавно переключать их. (Элемент переключается на второй, третий и так далее). Он не может переключиться на элемент[1.x] и плавно прибавлять x.

Попробуй пошарить в функции showSlides. Не скрывай элементы через display: none. Они пропадают из DOM-дерева и вся анимация с плавными появлениями никогда у меня не получалась. Попробуй скрывать элементы через opacity либо visibility:hidden.

С этими значениями анимация, включая @keyframes, будет работать. С display: none анимация как-то коряво себя ведёт. Даже если её назначить на элемент, которому потом заменить display: none на любое значение, то анимация не сработает. Элемент просто врежется в DOM. Удачи

БЛОГ НА HUSL

Плавность переключения изображений в слайдере

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