How do I add a scrolling animation to my slideshow?

Question

I've built a pretty basic HTML/CSS/JS slideshow. When I click the button on the right, the slide switches to the next slide, and when I click the button on the left, the slide switches to the previous slide.

However, I would like to add in a scrolling animation to make the slideshow feel less rigid; when I press the button on the right, I want the slide to 'slide' in from the right, and when I press the button on the left I want it to slide in from the left.

I've been researching possible ways to do this and came across CSS animations, specifically the w3.css framework (https://www.w3schools.com/w3css/w3css_animate.asp), but am not sure how I would implement this given that my slideshow already makes use of classes in order to switch between slides.

Here is my code:

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>

Thanks in advance.

Does this help? https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition — Edwin Cruz, Jul 10 '20 at 19:34
Does this answer your question? [CSS 3 slide-in from left transition](https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition) — Edwin Cruz, Jul 10 '20 at 19:34

Eissa Saber · Accepted Answer · 2020-07-10T20:40:53.670

you can style a next and prev classes with CSS and then toggle them with js like this snippet

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>

would it be possible to do this same thing with the slide background as well (i.e. the green slides in over the blue)? — Nate, Jul 10 '20 at 20:28
I've updated my answer check it and tell me if you have any inquiries — Eissa Saber, Jul 10 '20 at 20:46

How do I add a scrolling animation to my slideshow?

1 Answers1