Is there a way to control scrolling images with two arrows, one for scrolling up and one for scrolling down? I have CSS animations written for both directions - "scrollUp" and "scrollDown". How can I apply these animations to the images when the corresponding arrow is clicked?
I believe I need to assign a "scrollUp" class and a "scrollDown" class to the images, but I'm unsure of how to link each arrow to its respective animation. I've seen people use links with href="#something" to activate an ID animation, but my images cannot have multiple IDs.
Any advice on achieving this would be highly appreciated! If you know of any video tutorials that could help, please share them. While I am open to using JavaScript, I would prefer a solution using CSS if possible.
EDIT: Essentially, I am looking for code that will scroll through one image at a time whenever a button is clicked:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web browsers</title>
<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
}
#header {
height: 256px;
width: 256px;
overflow: hidden;
border:1px solid gray;
}
.slider {
animation: myanimation 8s ease-in-out infinite alternate;
}
@keyframes myanimation
{
0% {transform:translateY(0px); }
25% {transform:translateY(-256px); }
50% {transform:translateY(-512px);}
75% {transform:translateY(-768px);}
100% {transform:translateY(-1024px);}
}
</style>
</head>
<body>
<div id="header">
<img class="slider" src="img1.png" width="256" height="256">
<img class="slider" src="img2.png" width="256" height="256">
<img class="slider" src="img3.png" width="256" height="256">
<img class="slider" src="img4.png" width="256" height="256" >
<img class="slider" src="img5.png" width="256" height="256">
</div>
</body>
</html>