Javascript action to slide my slider to the left or right

Question

I am building a custom slider with JS/CSS. So far I have the following:

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { 
  min-width: 215px;
  width: 20vw; 
  height: auto;
  float: left; 
  margin-right: 5px;
}
div#slider figure { 
  position: relative;
  width: 140vw;
  min-width: 1535px !important;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  /* animation: 30s slidy infinite; */
}

@keyframes slidyleft {
  0% { left: 0%; }
  100% { left: -20vw; }
}
@keyframes slidyright {
  0% { left: 0%; }
  100% { left: 20vw; }
}

and I use it as follows:

<div id="slider">
  <figure id="sliderfigure">

    <img src="image1.png">
    <img src="image1.png">
    <img src="image1.png">
    <img src="image1.png">
    <img src="image1.png">

   </figure>
</div>

In my Angular code, I have a button that calls to slide the slider to the left or right as follows:

var elem  = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyleft'; 

var elem  = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyright'; 

However, what happens is that it indeed it gets slided to the right or left, but that it in the end again returns to the original position.

How can I keep it at the future position?

Thanks in advance.

Answer 1

As you don't specify the animation-fill-mode , the default value will be none . But to stay at the 100% state of the animation, you'll need forwards .

So you can write your animation like this :

var elem  = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyright forwards'; 

See this for more infos : https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode