[html]<div class="adaptivny-slayder-2">
<input type="radio" name="kadoves-2" id="slaid001" checked>
<input type="radio" name="kadoves-2" id="slaid002">
<input type="radio" name="kadoves-2" id="slaid003">
<input type="radio" name="kadoves-2" id="slaid004">
<input type="radio" name="kadoves-2" id="slaid005">
<input type="radio" name="kadoves-2" id="slaid006">
<input type="radio" name="kadoves-2" id="slaid007">
<input type="radio" name="kadoves-2" id="slaid009">
<input type="radio" name="kadoves-2" id="slaid0010">
<input type="radio" name="kadoves-2" id="slaid0011">
<input type="radio" name="kadoves-2" id="slaid0012">
<input type="radio" name="kadoves-2" id="slaid0013">
<input type="radio" name="kadoves-2" id="slaid0014">
<input type="radio" name="kadoves-2" id="slaid0015">
<input type="radio" name="kadoves-2" id="slaid0016">
<input type="radio" name="kadoves-2" id="slaid0017">
<input type="radio" name="kadoves-2" id="slaid0018">
<input type="radio" name="kadoves-2" id="slaid0019">
<input type="radio" name="kadoves-2" id="slaid0020">
<input type="radio" name="kadoves-2" id="slaid0021">
<input type="radio" name="kadoves-2" id="slaid0022">
<div class="kadoves-2">
<label for="slaid001"></label>
<label for="slaid002"></label>
<label for="slaid003"></label>
<label for="slaid004"></label>
<label for="slaid005"></label>
<label for="slaid006"></label>
<label for="slaid007"></label>
<label for="slaid009"></label>
<label for="slaid0010"></label>
<label for="slaid0011"></label>
<label for="slaid0012"></label>
<label for="slaid0013"></label>
<label for="slaid0014"></label>
<label for="slaid0015"></label>
<label for="slaid0016"></label>
<label for="slaid0017"></label>
<label for="slaid0018"></label>
<label for="slaid0019"></label>
<label for="slaid0020"></label>
<label for="slaid0021"></label>
<label for="slaid0022"></label>
</div>
<div class="adaptivny-slayder-lasekun-2">
<div class="abusteku-deagulus-2">
<img src="https://forumstatic.ru/files/0011/93/3d/67208.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/76087.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/11441.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/94822.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/10456.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/48255.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/61864.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/79198.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/10549.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/38186.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/99273.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/80619.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/90527.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/51400.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/85673.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/41849.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/19907.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/32157.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/98544.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/90892.jpg"/>
<img src="https://forumstatic.ru/files/0011/93/3d/76110.jpg"/>
</div>
</div>
</div>
<style>
.adaptivny-slayder-2 {
position: relative;
max-width: 680px;
margin: 50px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.adaptivny-slayder-2 input[name="kadoves-2"] {
display: none;
}
.kadoves-2 {
position: absolute;
left: 0;
bottom: -40px;
text-align: center;
width: 100%;
}
.kadoves-2 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;
}
#slaid001:checked~.kadoves-2 label[for="slaid001"] {
background-color: white;
}
#slaid002:checked~.kadoves-2 label[for="slaid002"] {
background-color: white;
}
#slaid003:checked~.kadoves-2 label[for="slaid003"] {
background-color: white;
}
#slaid004:checked~.kadoves-2 label[for="slaid004"] {
background-color: white;
}
#slaid005:checked~.kadoves-2 label[for="slaid005"] {
background-color: white;}
#slaid006:checked~.kadoves-2 label[for="slaid006"] {
background-color: white;
}
#slaid007:checked~.kadoves-2 label[for="slaid007"] {
background-color: white;
}
#slaid009:checked~.kadoves-2 label[for="slaid009"] {
background-color: white;
}
#slaid0010:checked~.kadoves-2 label[for="slaid0010"] {
background-color: white;}
#slaid0011:checked~.kadoves-2 label[for="slaid0011"] {
background-color: white;
}
#slaid0012:checked~.kadoves-2 label[for="slaid0012"] {
background-color: white;
}
#slaid0013:checked~.kadoves-2 label[for="slaid0013"] {
background-color: white;
}
#slaid0014:checked~.kadoves-2 label[for="slaid0014"] {
background-color: white;
}
#slaid0015:checked~.kadoves-2 label[for="slaid0015"] {
background-color: white;
}
#slaid0016:checked~.kadoves-2 label[for="slaid0016"] {
background-color: white;
}
#slaid0017:checked~.kadoves-2 label[for="slaid0017"] {
background-color: white;
}
#slaid0018:checked~.kadoves-2 label[for="slaid0018"] {
background-color: white;
}
#slaid0019:checked~.kadoves-2 label[for="slaid0019"] {
background-color: white;
}
#slaid0020:checked~.kadoves-2 label[for="slaid0020"] {
background-color: white;
}
#slaid0021:checked~.kadoves-2 label[for="slaid0021"] {
background-color: white;
}
#slaid0022:checked~.kadoves-2 label[for="slaid0022"] {
background-color: white;
}
.adaptivny-slayder-lasekun-2 {
overflow: hidden;
}
.abusteku-deagulus-2 {
display: flex;
width: 100%;
transition: all 0.5s;
}
.abusteku-deagulus-2 img {
width: 100%;
flex-shrink:0;
}
#slaid001:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translate(0);
}
#slaid002:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-100%);
}
#slaid003:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-200%);
}
#slaid004:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-300%);
}
#slaid005:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-400%);
}
#slaid006:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-500%);
}
#slaid007:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-600%);
}
#slaid009:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-700%);
}
#slaid0010:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-800%);
}
#slaid0011:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-900%);
}
#slaid0012:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1000%);
}
#slaid0013:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1100%);
}
#slaid0014:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1200%);
}
#slaid0015:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1300%);
}
#slaid0016:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1400%);
}
#slaid0017:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1500%);
}
#slaid0018:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1600%);
}
#slaid0019:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1700%);
}
#slaid0020:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1800%);
}
#slaid0021:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-1900%);
}
#slaid0022:checked~.adaptivny-slayder-lasekun-2 .abusteku-deagulus-2 {
transform: translateX(-2000%);
}
</style>[/html]
[hideprofile]