Is there a way to modify this without JS or Jquery? - html

Question

I found this image carousel here I'm wondering if there is a way to make it not auto scroll but instead have navigation buttons, as well as make it responsive. Is there a way to do this but still keep it Css only?
<h1>css3 carousel</h1>
<div class="carousel">
<div class="holder">
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/300x200" alt="" />
<img src="http://fakeimg.pl/400x300" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/500x400" alt="" />
<img src="http://fakeimg.pl/210x105" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/250x150" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
</div>
</div>
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
body {
font-family: 'PT Sans', Arial, Verdana;
background-color: #eee;
}
h1 {
text-align: center;
font-size: 48px;
text-transform: uppercase;
letter-spacing: 3px;
color: #222;
}
img {
display: inline-block;
width: 200px;
height: 100px;
}
.carousel {
width: 830px;
height: 120px;
overflow: hidden;
padding: 8px;
box-sizing: border-box;
border: 2px solid #999;
box-shadow: 0 0 4px #000;
margin: 0 auto;
border-radius: 5px;
}
.holder {
animation: carousel 25s linear infinite;
white-space: nowrap;
will-change: transform;
&:hover {
animation-play-state: paused;
}
}
#keyframes carousel {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

Answer 1

Changing your CSS slightly will add a basic hover functionality to start the slider form a stopped position.
.holder {
animation: carousel 25s linear;
white-space: nowrap;
will-change: transform;
animation-play-state: paused;
&:hover {
animation-play-state: running;
}
}
Making it responsive would be easy with 'media queries'.
But considering you want to make it responsive then you will need 'click events' to make it work on mobile (as mobile has no hover functionality). CSS can't do click events so you will need javascript or jQuery. But this should be fairly straight forward, you'll only be changing minor CSS with a simple click event. However considering the endless amount of free and basic carousel plugins out there, I would opt for one of them. What you have here seems to be a demonstration on CSS animations, and without some kind of javascript, you will always be limited when it comes to CSS animation control.