Всем привет, добро пожаловать на урок. В этом видео я покажу вам, как создать потрясающий слайдер изображений с помощью HTML и CSS. Надеюсь, вам понравилось видео, не забудьте поставить лайк и поделиться им, а также нажать кнопку подписки, чтобы получать последние новости о новых предстоящих видео на моем канале.
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Все демонстрационные изображения
- Исходные файлы HTML
- Исходные файлы CSS
- Иконки шрифтов
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<title>Automatic Popup</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--Font Awesome -->
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!--Stylesheets-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<ul class="slides">
<li id="slide1"><img src="img/1.png" alt=""></li>
<li id="slide2"><img src="img/2.webp" alt=""></li>
<li id="slide3"><img src="img/3.png" alt=""></li>
<li id="slide4"><img src="img/4.png" alt=""></li>
<li id="slide5"><img src="img/5.png" alt=""></li>
</ul>
<ul class="poster">
<li><a href="#slide1"><img src="img/1.png" alt=""></a></li>
<li><a href="#slide2"><img src="img/2.webp" alt=""></a></li>
<li><a href="#slide3"><img src="img/3.png" alt=""></a></li>
<li><a href="#slide4"><img src="img/4.png" alt=""></a></li>
<li><a href="#slide5"><img src="img/5.png" alt=""></a></li>
</ul>
</div>
<!--Script-->
<script src="js/script.js"></script>
</body>
</html>CSS КОД:
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
height: 100%;
background-image: linear-gradient(to left, #383535 0%, #1c1717 100%);
}
.container {
display: flex;
justify-content: center;
}
.poster {
display: flex;
flex-direction: column;
overflow: hidden;
line-height: 0;
}
#slide1,
#slide2,
#slide3,
#slide4,
#slide5 {
overflow: hidden;
}
.poster li {
flex: auto;
}
.poster a {
display: block;
}
.poster img {
width: 30vmin;
height: 20vmin;
object-fit: cover;
object-position: top;
filter: grayscale(100%);
}
.poster img:hover {
filter: grayscale(0%);
}
.slides {
overflow: hidden;
width: 85vmin;
height: 100vmin;
}
.slides li {
width: 85vmin;
height: 100vmin;
position: absolute;
z-index: 1;
}
.slides img {
width: 100vmin;
object-fit: cover;
object-position: top;
}
.slides li:target {
z-index: 3;
animation: slide 1s 1;
}
.slides li:not(:target) {
animation: hide 1s 1;
}
@keyframes slide {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hide {
0% {
z-index: 2;
}
100% {
z-index: 2;
}
}
