Подскажите,как при помощи CSS сделать слайдер адаптивным, который использует только CSS, где нет JavaScript и библиотек. По дизайну этот слайдер простой, где его разместил как материал, это простой слайдер изображений в HTML + CSS, где реально понравился своей простотой.
Но вот сам не мог его адаптировать, где только от функционала кнопки и само изображение. Что по сути в медео можно было прописать 100% и сделать его резиновым, но здесь изображение накладывались друг на друга.
Если кто хочет помочь, так сказать дать ему еще поработать, то здесь от души, спасибо!
HTML
Код
<div class="kuchatel-kavanok">
<input type="radio" name="veklucanel" id="demus1" checked>
<input type="radio" name="veklucanel" id="demus2">
<input type="radio" name="veklucanel" id="demus3">
<div class="veklucanel">
<label for="demus1"></label>
<label for="demus2"></label>
<label for="demus3"></label>
</div>
<div class="kuchatel-kavanok-inner">
<div class="prostoy-slayder">
<img src="https://www.roscosmos.ru/media/img/foto/2018/wallpapers/0014.jpg"/>
<img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_01-680x340.jpg"/>
<img src="http://conceptartworld.com/wp-content/uploads/2013/10/Mathieu_Latour-Duhaime_Concept_Art_Thief_07-680x340.jpg"/>
</div>
</div>
</div>
CSS
Код
.kuchatel-kavanok {
position: relative;
width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.kuchatel-kavanok input[name="veklucanel"] {
display: none;
}
.veklucanel {
position: absolute;
left: 0;
bottom: -40px;
text-align: center;
width: 100%;
}
.veklucanel label {
display: inline-block;
width: 8px;
height: 8px;
cursor: pointer;
margin: 0 3px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
border-radius: 50%;
border: 5px solid #2f363c;
background-color: #738290;
}
#demus1:checked~.veklucanel label[for="demus1"] {
background-color: white;
}
#demus2:checked~.veklucanel label[for="demus2"] {
background-color: white;
}
#demus3:checked~.veklucanel label[for="demus3"] {
background-color: white;
}
.kuchatel-kavanok-inner {
overflow: hidden;
}
.prostoy-slayder {
width: 300%;
transition: all 0.5s;
}
.prostoy-slayder img {
width: 680px;
height: 320px;
float: left;
}
#demus1:checked~kuchatel-kavanok-inner prostoy-slayder {
transform: translate(0);
}
#demus2:checked~.kuchatel-kavanok-inner .prostoy-slayder {
transform: translate(-680px);
}
#demus3:checked~.kuchatel-kavanok-inner .prostoy-slayder {
transform: translate(-1360px);
}
Демонстрация
