[html]<div class="adaptivny-slayder">
<input type="radio" name="kadoves" id="slaid24" checked>
<input type="radio" name="kadoves" id="slaid25">
<input type="radio" name="kadoves" id="slaid26">
<input type="radio" name="kadoves" id="slaid27">
<input type="radio" name="kadoves" id="slaid28">
<input type="radio" name="kadoves" id="slaid6">
<input type="radio" name="kadoves" id="slaid7">
<input type="radio" name="kadoves" id="slaid8">
<input type="radio" name="kadoves" id="slaid9">
<input type="radio" name="kadoves" id="slaid10">
<input type="radio" name="kadoves" id="slaid11">
<input type="radio" name="kadoves" id="slaid12">
<input type="radio" name="kadoves" id="slaid13">
<input type="radio" name="kadoves" id="slaid14">
<input type="radio" name="kadoves" id="slaid15">
<input type="radio" name="kadoves" id="slaid16">
<input type="radio" name="kadoves" id="slaid17">
<input type="radio" name="kadoves" id="slaid18">
<input type="radio" name="kadoves" id="slaid19">
<input type="radio" name="kadoves" id="slaid20">
<input type="radio" name="kadoves" id="slaid21">
<input type="radio" name="kadoves" id="slaid22">
<input type="radio" name="kadoves" id="slaid23">
<input type="radio" name="kadoves" id="slaid29">
<input type="radio" name="kadoves" id="slaid30">
<div class="kadoves">
<label for="slaid24"></label>
<label for="slaid25"></label>
<label for="slaid26"></label>
<label for="slaid27"></label>
<label for="slaid28"></label>
<label for="slaid6"></label>
<label for="slaid7"></label>
<label for="slaid8"></label>
<label for="slaid9"></label>
<label for="slaid10"></label>
<label for="slaid11"></label>
<label for="slaid12"></label>
<label for="slaid13"></label>
<label for="slaid14"></label>
<label for="slaid15"></label>
<label for="slaid16"></label>
<label for="slaid17"></label>
<label for="slaid18"></label>
<label for="slaid19"></label>
<label for="slaid20"></label>
<label for="slaid21"></label>
<label for="slaid22"></label>
<label for="slaid23"></label>
<label for="slaid29"></label>
<label for="slaid30"></label>
</div>
<div class="adaptivny-slayder-lasekun">
<div class="abusteku-deagulus">
<img src="https://forumstatic.ru/files/001b/f3/20/56088.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/47288.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/78666.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/84888.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/90874.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/46901.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/37925.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/83933.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/20472.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/57022.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/94040.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/32484.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/39797.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/49432.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/25751.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/96977.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/79021.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/72087.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/92907.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/42615.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/13256.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/81653.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/34498.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/39273.jpg"/>
<img src="https://forumstatic.ru/files/001b/f3/20/61309.jpg"/>
</div>
</div>
</div>
<style>
.adaptivny-slayder {
position: relative;
max-width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.adaptivny-slayder input[name="kadoves"] {
display: none;
}
.kadoves {
position: absolute;
left: 0;
bottom: -40px;
text-align: center;
width: 100%;
}
.kadoves 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;
}
#slaid24:checked~.kadoves label[for="slaid24"] {
background-color: white;
}
#slaid25:checked~.kadoves label[for="slaid25"] {
background-color: white;
}
#slaid26:checked~.kadoves label[for="slaid26"] {
background-color: white;
}
#slaid27:checked~.kadoves label[for="slaid27"] {
background-color: white;
}
#slaid28:checked~.kadoves label[for="slaid28"] {
background-color: white;
}
#slaid6:checked~.kadoves label[for="slaid6"] {
background-color: white;
}
#slaid7:checked~.kadoves label[for="slaid7"] {
background-color: white;
}
#slaid8:checked~.kadoves label[for="slaid8"] {
background-color: white;
}
#slaid9:checked~.kadoves label[for="slaid9"] {
background-color: white;
}
#slaid10:checked~.kadoves label[for="slaid10"] {
background-color: white;
}
#slaid11:checked~.kadoves label[for="slaid11"] {
background-color: white;
}
#slaid12:checked~.kadoves label[for="slaid12"] {
background-color: white;
}
#slaid13:checked~.kadoves label[for="slaid13"] {
background-color: white;
}
#slaid14:checked~.kadoves label[for="slaid14"] {
background-color: white;
}
#slaid15:checked~.kadoves label[for="slaid15"] {
background-color: white;
}
#slaid16:checked~.kadoves label[for="slaid16"] {
background-color: white;
}
#slaid17:checked~.kadoves label[for="slaid17"] {
background-color: white;
}
#slaid18:checked~.kadoves label[for="slaid18"] {
background-color: white;
}
#slaid19:checked~.kadoves label[for="slaid19"] {
background-color: white;
}
#slaid20:checked~.kadoves label[for="slaid20"] {
background-color: white;
}
#slaid21:checked~.kadoves label[for="slaid21"] {
background-color: white;
}
#slaid22:checked~.kadoves label[for="slaid22"] {
background-color: white;
}
#slaid23:checked~.kadoves label[for="slaid23"] {
background-color: white;
}
#slaid29:checked~.kadoves label[for="slaid29"] {
background-color: white;
}
#slaid30:checked~.kadoves label[for="slaid30"] {
background-color: white;
}
.adaptivny-slayder-lasekun {
overflow: hidden;
}
.abusteku-deagulus {
display: flex;
width: 100%;
transition: all 0.5s;
}
.abusteku-deagulus img {
width: 100%;
flex-shrink:0;
}
#slaid24:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translate(0);
}
#slaid25:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-100%);
}
#slaid26:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-200%);
}
#slaid27:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-300%);
}
#slaid28:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-400%);
}
#slaid6:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-500%);
}
#slaid7:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-600%);
}
#slaid8:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-700%);
}
#slaid9:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-800%);
}
#slaid10:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-900%);
}
#slaid11:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1000%);
}
#slaid12:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1100%);
}
#slaid13:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1200%);
}
#slaid14:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1300%);
}
#slaid15:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1400%);
}
#slaid16:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1500%);
}
#slaid17:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1600%);
}
#slaid18:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1700%);
}
#slaid19:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1800%);
}
#slaid20:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-1900%);
}
#slaid21:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-2000%);
}
#slaid22:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-2100%);
}
#slaid23:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-2200%);
}
#slaid29:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-2300%);
}
#slaid30:checked~.adaptivny-slayder-lasekun .abusteku-deagulus {
transform: translateX(-2400%);
}
</style>[/html]
[hideprofile]