კატეგორია/ სკრიპტები
კომენტარები/ 7
Code
<div class="slider middle">
<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">
<div class="slide s1">
<img src="https://ia.wampi.ru/2020/11/13/004.jpg" class="img">
</div>
<div class="slide">
<img src="https://ia.wampi.ru/2020/11/13/003.jpg" class="img">
</div>
<div class="slide">
<img src="https://ia.wampi.ru/2020/11/13/002.jpg" class="img">
</div>
<div class="slide">
<img src="https://ia.wampi.ru/2020/11/13/001.jpg" class="img">
</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>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.slider {
width: 800px;
height: 500px;
overflow: hidden;
border: 10px solid #000;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 30px;
height: 8px;
margin: 6px;
cursor: pointer;
background-color: #000;
opacity: .5;
border-radius: 10px;
transition: all 0.4s ease;
}
.bar:hover {
opacity: 1;
transform:scale(1.1);
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 400%;
height: 100%;
display: flex;
}
.slide {
width: 25%;
transition: all 0.6s ease;
}
.img {
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -25%;
}
#r3:checked ~ .s1 {
margin-left: -50%;
}
#r4:checked ~ .s1 {
margin-left: -75%;
}
</style>
<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">
<div class="slide s1">
<img src="https://ia.wampi.ru/2020/11/13/004.jpg" class="img">
</div>
<div class="slide">
<img src="https://ia.wampi.ru/2020/11/13/003.jpg" class="img">
</div>
<div class="slide">
<img src="https://ia.wampi.ru/2020/11/13/002.jpg" class="img">
</div>
<div class="slide">
<img src="https://ia.wampi.ru/2020/11/13/001.jpg" class="img">
</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>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.slider {
width: 800px;
height: 500px;
overflow: hidden;
border: 10px solid #000;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navigation {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar {
width: 30px;
height: 8px;
margin: 6px;
cursor: pointer;
background-color: #000;
opacity: .5;
border-radius: 10px;
transition: all 0.4s ease;
}
.bar:hover {
opacity: 1;
transform:scale(1.1);
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slides {
width: 400%;
height: 100%;
display: flex;
}
.slide {
width: 25%;
transition: all 0.6s ease;
}
.img {
width: 100%;
height: 100%;
}
#r1:checked ~ .s1 {
margin-left: 0;
}
#r2:checked ~ .s1 {
margin-left: -25%;
}
#r3:checked ~ .s1 {
margin-left: -50%;
}
#r4:checked ~ .s1 {
margin-left: -75%;
}
</style>
წარმოგიდგენთ
GELESON.AT.UA
დრო/ 03.05.2024 06:49
ნახვები/ 76
სიახლის გაზიარება
წარმოგიდგენთ საიტი GeLeson.at.Ua
|
|
|
|