Slideshow, Slider - html

Question

Im working on a slider and im burn out, you guys know how it is, working on something so much eventually the brain just cant do it, so im going to leave it for today and ask you if you have an answer for the issue.
So heres my slider on html
.header {
grid-area: header;
border: 1px solid black;
background-color: black;
}
.slideshow {
width: 923px;
height: 500px;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
}
.slideshow-container {
width: 4615px;
font-size: 0;
transition: 1s ease;
height: 500px;
overflow: hidden;
}
.slideshow-container:hover {
animation-play-state: paused;
}
.slide {
animation: slide 24s ease infinite;
}
.img1 {
width: 923px;
height: auto;
object-fit: cover;
}
.img2 {
width: 923px;
height: auto;
object-fit: cover;
}
.img3 {
width: 923px;
height: auto;
object-fit: cover;
}
.img4 {
width: 923px;
height: auto;
object-fit: cover;
}
.img5 {
width: 923px;
height: auto;
object-fit: cover;
}
#keyframes slide {
10% {
margin-left: 0px;
}
20% {
margin-left: -923px;
}
30% {
margin-left: -923px;
}
40% {
margin-left: -1846px;
}
50% {
margin-left: -1846px;
}
60% {
margin-left: -2769px;
}
70% {
margin-left: -2769px;
}
80% {
margin-left: -3692px;
}
90% {
margin-left: -3692px;
}
}
.dot1 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 400px;
z-index: 2;
}
.dot1:hover {
border: 2px solid white;
background-color: black;
}
.dot2 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 430px;
z-index: 2;
}
.dot3 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 460px;
z-index: 2;
}
.dot4 {
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
position: absolute;
margin-top: 470px;
margin-left: 490px;
z-index: 2;
}
<div class="header">
<div class="slideshow">
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
<span class="dot4"></span>
<div class="slideshow-container slide">
<img class="img1" src="https://i.imgur.com/xGMtCkJ.jpg">
<img class="img2" src="https://i.imgur.com/1F5Gtuz.jpg">
<img class="img3" src="https://i.imgur.com/GgikuGI.jpg">
<img class="img4" src="https://i.imgur.com/LlTDfcH.jpg">
<img class="img5" src="https://i.imgur.com/hNLNCgQ.png">
</div>
</div>
</div>
So here is what the slider and keyframes look like
What im looking for is a part of a code that i can include to
.dot1:hover {
border: 2px solid white;
background-color: black;
}
So what i want is that when someone hover's over the first dot the slider goes to the first keyframe or image, and so on with the other dots, if anyone knows a way to make that happen without javascripts and if i can reverse the keyframe animation that would be perfect.
thanks :)

Answer 1

It's possible using CSS:
Here is the snippet for slider using pure css:
.csslider {
display: inline-block;
position: relative;
max-width: 480px;
width: 100%;
margin-top: 10px;
}
.csslider > .cs_anchor {
display: none;
}
.csslider > ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.csslider > ul > li.img img {
width: 100%;
}
.csslider > ul > li.img {
font-size: 0pt;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.csslider > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.csslider .cs_lnk{
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}
.csslider > .cs_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .cs_bullets > div {
margin-left: -50%;
width: 100%;
}
.csslider > .cs_bullets > label {
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider > .cs_description {
z-index: 3;
}
.csslider > ul > li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.csslider > ul > li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.csslider > ul > li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.csslider > ul > li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.csslider > ul > li.num0 {
opacity: 1;
z-index: 2;
}
.csslider > .slide:hover ~ ul > li.num0 {
opacity: 0;
z-index: 1;
}
.csslider > #cs_slide1_0:hover ~ ul > li.num0,.csslider > #cs_slide1_1:hover ~ ul > li.num1,.csslider > #cs_slide1_2:hover ~ ul > li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
.csslider > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider > .cs_bullets > label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > .cs_bullets > label.num0 {
background-color: #E34B64;
}
.csslider > .slide:hover ~ .cs_bullets > label {
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider > #cs_slide1_0:hover ~ .cs_bullets > label.num0,
.csslider > #cs_slide1_1:hover ~ .cs_bullets > label.num1,
.csslider > #cs_slide1_2:hover ~ .cs_bullets > label.num2 {
background-color: #E34B64;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>
</title>
</head>
<body>
<div class='csslider autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'>
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' hover>
<input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor'>
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="http://cssslider.com/sliders/pen/images/buns.jpg" style="width: 100%;">
</div>
<li class='num0 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Buns' title='Buns' />
</li>
<li class='num1 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Croissant' title='Croissant' />
</li>
<li class='num2 img'>
<img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Lemon pie' title='Lemon pie' />
</li>
</ul>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'>
<span class='cs_point'></span>
</label>
<label class='num1' for='cs_slide1_1'>
<span class='cs_point'></span>
</label>
<label class='num2' for='cs_slide1_2'>
<span class='cs_point'></span>
</label>
</div>
</div>
</body>
</html>