Потрясающий слайдер изображений на чистом CSS с использованием только HTML и CSS || Без JavaScript

Всем привет, добро пожаловать на урок. В этом видео я покажу вам, как создать потрясающий слайдер изображений с помощью HTML и CSS.

Надеюсь, вам понравилось видео, не забудьте поставить лайк и поделиться им, а также нажать кнопку подписки, чтобы получать последние новости о новых предстоящих видео на моем канале.

Потрясающий слайдер изображений на чистом CSS с использованием только HTML и CSS || Без JavaScript

СКАЧАТЬ

Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.

Большое спасибо за просмотр, следите за следующим видео, а до тех пор будьте здоровы и продолжайте программировать. 😊🙏

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;
    }
}