Как сделать слайдер изображений с помощью HTML и CSS | Скольжение изображений по клику || How to make Image Slider with HTML snd CSS | Image Slide on Click
В этом видео вы узнаете, как создать слайдер изображений с помощью HTML и CSS. Слайдер начинает скольжение только по клику на изображение.
Надеюсь, это видео будет полезным для вас. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ».
Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Image Slide on Click</title>
</head>
<body>
<div class="container">
<span class="slider" id="slider1"></span>
<span class="slider" id="slider2"></span>
<span class="slider" id="slider3"></span>
<span class="slider" id="slider4"></span>
<span class="slider" id="slider5"></span>
<span class="slider" id="slider6"></span>
<span class="slider" id="slider7"></span>
<div class="imgContainer">
<div class="slide_div" id="slide_1">
<img src="images/a61.jpg" alt="" class="img" id="img1">
<a href="#slider1" class="button" id="button1"></a>
</div>
<div class="slide_div" id="slide_2">
<img src="images/a70.jpg" alt="" class="img" id="img2">
<a href="#slider2" class="button" id="button2"></a>
</div>
<div class="slide_div" id="slide_3">
<img src="images/a63.jpg" alt="" class="img" id="img3">
<a href="#slider3" class="button" id="button3"></a>
</div>
<div class="slide_div" id="slide_4">
<img src="images/a72.jpeg" alt="" class="img" id="img4">
<a href="#slider4" class="button" id="button4"></a>
</div>
<div class="slide_div" id="slide_5">
<img src="images/a67.jpg" alt="" class="img" id="img5">
<a href="#slider5" class="button" id="button5"></a>
</div>
<div class="slide_div" id="slide_6">
<img src="images/a66.jpg" alt="" class="img" id="img6">
<a href="#slider6" class="button" id="button6"></a>
</div>
<div class="slide_div" id="slide_7">
<img src="images/a60.jpg" alt="" class="img" id="img7">
<a href="#slider7" class="button" id="button7"></a>
</div>
</div>
</div>
</body>
</html>
CSS КОД:
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(30deg, rgb(100, 241, 84), rgb(92, 92, 229), rgb(111, 30, 30));
}
.container{
width: 100%;
height: 90vh;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.imgContainer{
width: 100%;
height: 600px;
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.slide_div{
display: flex;
align-items: center;
justify-content: center;
margin: 0 30px 0 30px;
}
img{
position: relative;
height: 370px;
width: 240px;
filter: saturate(10%);
transition: 0.7s;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 20px;
}
.button{
position: absolute;
width: 240px;
height: 370px;
transition: 0.7s;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 20px;
}
.button:hover{
background-color: rgba(0, 0, 0, 0.2);
}
#slider1:target ~ .imgContainer #img1,
#slider1:target ~ .imgContainer #button1{
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider2:target ~ .imgContainer #img2,
#slider2:target ~ .imgContainer #button2{
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider3:target ~ .imgContainer #img3,
#slider3:target ~ .imgContainer #button3{
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider4:target ~ .imgContainer #img4,
#slider4:target ~ .imgContainer #button4{
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider5:target ~ .imgContainer #img5,
#slider5:target ~ .imgContainer #button5{
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider6:target ~ .imgContainer #img6,
#slider6:target ~ .imgContainer #button6{
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider7:target ~ .imgContainer #img7,
#slider7:target ~ .imgContainer #button7{
width: 390px;
height: 600px;
background-color: transparent;
filter: saturate(100%);
}
#slider1:target ~ .imgContainer{
left: 60%;
}
#slider2:target ~ .imgContainer{
left: 40%;
}
#slider3:target ~ .imgContainer{
left: 20%;
}
#slider4:target ~ .imgContainer{
left: 0%;
}
#slider5:target ~ .imgContainer{
left: -20%;
}
#slider6:target ~ .imgContainer{
left: -40%;
}
#slider7:target ~ .imgContainer{
left: -60%;
}
0 Комментарии