Делаю слайдер на css впервые. Слайдер написан на чистом HTML и CSS. Если логику переключения самих слайдов я понял, но каким обоазом подключить стрелки влево и вправо не могу понять. Потратил уже пару часов на поиск решения в гугле. Но в основном используется js. А мне нужно все сделать на чистом CSS. Я так понял, стреки должны каким-то обазом переключать label-ы по очереди. Подскажите, каким образом, можно подключить стрелки?
Вот jsfiddle
https://jsfiddle.net/Nikita_Migushev/4ufge6L5/8/
.slideshow { /*Set the dimensions of slideshow box. This is a window wehre slides are shown*/
width: 700px;
height: 400px;
overflow: hidden; /*Hide everything that is outside the main slideshow box. We need that in order to see what is in currently in "slideshow" container*/
/*Center the slideshow box*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Position navigation box*/
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
/*Shape navigation buttons into radios*/
.bar {
width: 10px;
border-radius: 30px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover {
background: #fff;
}
/*Hide original html radios*/
input[name="r"] {
position: absolute;
visibility: hidden;
}
/*Resize "slides" container into 500% - which is 5 images 100% each. Slides container is the box that containis all images. And make images in one line by flex.*/
.slides {
width: 500%;
height: 100%;
display: flex;
}
/*Make each slide's size 20%. Which is 1/5 of "slides" container where each slide is in, since there are 5 images used.*/
.slide {
width: 20%;
transition: 0.3s;
}
/*Make each actual image 100% of size of "slide" container. Since images are in .slide container*/
.slide img {
width: 100%;
height: 100%;
}
/*Now when certain radio botton is checked move the first image to the left by certain degree, so that next images is shown in the "slideshow" container.*/
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -20%;
}
#r3:checked ~ .s1 {
margin-left: -40%;
}
#r4:checked ~ .s1 {
margin-left: -60%;
}
#r5:checked ~ .s1 {
margin-left: -80%;
}
/*Arrows*/
div.arrow-left {
display: block;
width: 50px;
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
cursor: pointer;
}
div.arrow-right {
display: block;
width: 50px;
position: absolute;
top: 50%;
left: 90%;
transform: translate(-50%, -50%);
cursor: pointer;
}
<div class="slideshow">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1"><img src="img/1.jpg" alt=""></div>
<div class="slide"><img src="img/2.jpg" alt=""></div>
<div class="slide"><img src="img/3.jpg" alt=""></div>
<div class="slide"><img src="img/4.jpg" alt=""></div>
<div class="slide"><img src="img/5.jpg" alt=""></div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
<div class="arrow-left">
<img src="img/left.svg" alt="" >
</div>
<div class="arrow-right">
<img src="img/right.svg" alt="" >
</div>
</div>
Там самих стрелок нет, так как не разобрался, как быстро их вставить внешними ссылками, но выглядеть должно примерно вот так: