<div id="carousel">
<figure>
<img src="http://www.codehub.com/css-carousel/images/slides/a.png" />
<img src="http://www.codehub.com/css-carousel/images/slides/b.png" />
<img src="http://www.codehub.com/css-carousel/images/slides/c.png" />
<img src="http://www.codehub.com/css-carousel/images/slides/d.png" />
<img src="http://www.codehub.com/css-carousel/images/slides/e.png" />
</figure>
</div>
<style>
@keyframes sliding {
0% { left: 0%; }
25% { left: -100%; }
50% { left: -200%; }
75% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#carousel { overflow: hidden; }
div#carousel figure img { width: 20%; float: left; }
div#carousel figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s sliding infinite;
}
.css-slider-mask{
width:300px;
height:300px;
}
</style>
How can I adjust the current image position on the carousel? I have tried
document.querySelector('figure').getBoundingClientRect()
ClientRect {top: 0, right: 930.609375, bottom: 0, left: -569.390625, width: 1500…}
But when I attempt to change it using
document.querySelector('figure').style.position.left = '-110px'
The view remains unchanged! Why is that?
I am looking to modify the animation position. Does JavaScript provide access to the keyframe object for this purpose?