Как мне добавить в слайд-шоу анимацию прокрутки? - PullRequest
Новая
       30

Как мне добавить в слайд-шоу анимацию прокрутки?

0 голосов
/ 10 июля 2020

Я создал довольно простое c HTML / CSS / JS слайд-шоу. Когда я нажимаю кнопку справа, слайд переключается на следующий слайд, а когда я нажимаю кнопку слева, слайд переключается на предыдущий слайд.

Однако я хотел бы добавить прокрутка анимации, чтобы слайд-шоу было менее жестким; когда я нажимаю кнопку справа, я хочу, чтобы слайд «скользил» справа, а когда я нажимаю кнопку слева, я хочу, чтобы он скользил слева.

Я изучали возможные способы сделать это и наткнулись на CSS анимации, в частности w3. css framework (https://www.w3schools.com/w3css/w3css_animate.asp), но я не уверен, как бы это реализовать, учитывая, что мое слайд-шоу уже делает использование классов для переключения между слайдами.

Вот мой код: 

var content = ["Slide 1", "Slide 2", "Slide 3"];
var style = ["background-color: blue;", "background-color: red;", "background-color: green;"];
var index = 0;

function next() {
  if (index == (content.length - 1)) {
    index = 0
  } else {
    index = index + 1
  }

  document.getElementById("slide").innerHTML = content[index];
  document.getElementById("slideshow").style = style[index];
}

function back() {
  if (index == 0) {
    index = (content.length - 1)
  } else {
    index = index - 1
  }

  document.getElementById("slide").innerHTML = content[index];
  document.getElementById("slideshow").style = style[index];
}
.slideshow {
  position: relative;
  height: 170px;
  color: white;
  background-color: blue;
}

.slideshow p {
  position: absolute;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.slideshow button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
}
<!DOCTYPE html>
<html lang="en">

<body>

  <div class="slideshow" id="slideshow">
    <p id="slide">Slide 1</p>
    <button onclick="back()" style="left: 0">&#10094;</button>
    <button onclick="next()" style="right: 0">&#10095;</button>
  </div>

</body>

</html>

Заранее спасибо.

1 Ответ

1 голос
/ 10 июля 2020

вы можете стилизовать следующий и предыдущий классы с помощью CSS, а затем переключать их с помощью js, как этот фрагмент 

var content = ["Slide 1", "Slide 2", "Slide 3"];
var style = ["background-color: blue;", "background-color: red;", "background-color: green;"];
var index = 0;

function next() {
    const slide = document.getElementById("slide");
    if (index == (content.length - 1)) {
        index = 0;
    } else {
        index = index + 1;
    }

    // wipe out class
    slide.className = '';
    // add next class
    setTimeout(() => slide.classList.add('next'), 0);

    slide.innerHTML = content[index];
    slide.style = style[index];
}

function back() {
    const slide = document.getElementById("slide");
    if (index == 0) {
        index = (content.length - 1);
    } else {
        index = index - 1;
    }

    // wipe out class
    slide.className = '';
    // add prev class
    setTimeout(() => slide.classList.add('prev'), 0);

    slide.innerHTML = content[index];
    slide.style = style[index];
}
.slideshow {
    position: relative;
    height: 170px;
    color: white;
    overflow: hidden;
}

.slideshow p {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 170px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    background-color: blue;

}

.slideshow button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
}

.prev {
    animation: prev 1s ease-in-out forwards;
}

.next {
    animation: next 1s ease-in-out forwards;
}

@keyframes prev {
    from {
        left: -150%;
    }

    to {
        left: 50%;
    }
}

@keyframes next {
    from {
        right: -150%;
    }

    to {
        right: -50%;
    }
}
    <div class="slideshow" id="slideshow">
        <p id="slide" class="next">Slide 1</p>
        <button onclick="back()" style="left: 0">&#10094;</button>
        <button onclick="next()" style="right: 0">&#10095;</button>
    </div>
...