[英]Javascript action to slide my slider to the left or right
I am building a custom slider with JS/CSS. 我正在使用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: 在我的Angular代码中,我有一个按钮,该按钮调用将滑块向左或向右滑动,如下所示:
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. 提前致谢。
As you don't specify the animation-fill-mode
, the default value will be none
. 由于您未指定animation-fill-mode
,因此默认值为none
。 But to stay at the 100% state of the animation, you'll need forwards
. 但是要保持动画的100%状态,您将需要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 有关更多信息,请参见此: https : //developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.