Exemple de curseur de blog Swiper

98 mambetovbekzat39

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 August 2025

Formulaire de connexion et d'inscription avec authentification biométrique

19 July 2025

Extrait HTML d'animation de texte 3D

23 August 2025

Modèle HTML/CSS/JS de formulaire de connexion et d'inscription

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Красивый слайдер</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Montserrat', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

.blog-slider {
            width: 95%;
            position: relative;
            max-width: 900px;
            margin: auto;
            background: #fff;
            box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
            padding: 30px;
            border-radius: 25px;
            height: 450px;
            transition: all 0.3s ease;
        }

@media screen and (max-width: 992px) {
            .blog-slider {
                max-width: 700px;
                height: 420px;
            }
        }

@media screen and (max-width: 768px) {
            .blog-slider {
                min-height: 550px;
                height: auto;
                margin: 20px auto;
                padding: 20px;
            }
        }

@media screen and (max-height: 500px) and (min-width: 992px) {
            .blog-slider {
                height: 380px;
            }
        }

.blog-slider__wrp {
            height: 100%;
        }

.blog-slider__item {
            display: flex;
            align-items: center;
            height: 100%;
        }

@media screen and (max-width: 768px) {
            .blog-slider__item {
                flex-direction: column;
                text-align: center;
            }
        }

.blog-slider__item.swiper-slide-active .blog-slider__img img {
            opacity: 1;
            transform: scale(1.05);
            transition-delay: 0.3s;
        }

.blog-slider__item.swiper-slide-active .blog-slider__content > * {
            opacity: 1;
            transform: translateY(0);
        }

.blog-slider__item.swiper-slide-active .blog-slider__content .blog-slider__title {
            transition-delay: 0.3s;
        }

.blog-slider__item.swiper-slide-active .blog-slider__content .blog-slider__text {
            transition-delay: 0.4s;
        }

.blog-slider__item.swiper-slide-active .blog-slider__content .blog-slider__button {
            transition-delay: 0.5s;
        }

.blog-slider__img {
            width: 320px;
            flex-shrink: 0;
            height: 320px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 8px 15px 40px rgba(102, 126, 234, 0.3);
            border-radius: 20px;
            transform: translateX(-60px);
            overflow: hidden;
            position: relative;
        }

.blog-slider__img::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
            border-radius: 20px;
            opacity: 0.7;
        }

.blog-slider__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            opacity: 0;
            border-radius: 20px;
            transition: all 0.6s ease;
            transform: scale(1);
        }

@media screen and (max-width: 992px) {
            .blog-slider__img {
                width: 280px;
                height: 280px;
            }
        }

@media screen and (max-width: 768px) {
            .blog-slider__img {
                transform: translateY(-50px);
                width: 250px;
                height: 250px;
                margin-bottom: 20px;
            }
        }

@media screen and (max-width: 576px) {
            .blog-slider__img {
                width: 220px;
                height: 220px;
            }
        }

.blog-slider__content {
            padding-right: 30px;
            padding-left: 20px;
        }

@media screen and (max-width: 768px) {
            .blog-slider__content {
                padding: 0 15px;
                margin-top: -30px;
            }
        }

.blog-slider__content > * {
            opacity: 0;
            transform: translateY(25px);
            transition: all 0.6s ease;
        }

.blog-slider__code {
            color: #8e8ea0;
            margin-bottom: 15px;
            display: block;
            font-weight: 500;
            font-size: 14px;
            letter-spacing: 1px;
        }

.blog-slider__title {
            font-size: 28px;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 25px;
            line-height: 1.3;
        }

.blog-slider__text {
            color: #718096;
            margin-bottom: 35px;
            line-height: 1.7;
            font-size: 16px;
        }

.blog-slider__button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 16px 40px;
            border-radius: 50px;
            color: #fff;
            box-shadow: 0px 10px 40px rgba(102, 126, 234, 0.4);
            text-decoration: none;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 15px;
        }

.blog-slider__button:hover {
            transform: translateY(-3px);
            box-shadow: 0px 15px 50px rgba(102, 126, 234, 0.5);
        }

@media screen and (max-width: 576px) {
            .blog-slider__button {
                width: 100%;
                justify-content: center;
            }
        }

.blog-slider__pagination {
            position: absolute;
            z-index: 21;
            right: 25px;
            width: 12px !important;
            text-align: center;
            left: auto !important;
            top: 50%;
            bottom: auto !important;
            transform: translateY(-50%);
        }

@media screen and (max-width: 768px) {
            .blog-slider__pagination {
                transform: translateX(-50%);
                left: 50% !important;
                top: auto;
                bottom: 20px !important;
                width: 100% !important;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
            margin: 10px 0;
        }

@media screen and (max-width: 768px) {
            .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
                margin: 0 6px;
            }
        }

.blog-slider__pagination .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            display: block;
            border-radius: 12px;
            background: #cbd5e0;
            opacity: 0.4;
            transition: all 0.4s ease;
            cursor: pointer;
        }

.blog-slider__pagination .swiper-pagination-bullet-active {
            opacity: 1;
            background: #667eea;
            height: 35px;
            box-shadow: 0px 5px 20px rgba(102, 126, 234, 0.4);
        }

@media screen and (max-width: 768px) {
            .blog-slider__pagination .swiper-pagination-bullet-active {
                height: 12px;
                width: 35px;
            }
        }

.blog-slider__icon {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="blog-slider">
        <div class="blog-slider__wrp swiper-wrapper">
            <div class="blog-slider__item swiper-slide">
                <div class="blog-slider__img">
                    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Горный пейзаж">
                </div>
                <div class="blog-slider__content">
                    <span class="blog-slider__code"><i class="fas fa-calendar-alt blog-slider__icon"></i> 15 Октябрь 2025</span>
                    <div class="blog-slider__title">Невероятные горные пейзажи</div>
                    <div class="blog-slider__text">
                        Откройте для себя захватывающие дух горные вершины и кристально чистые озера. 
                        Идеальное место для любителей природы и приключений. Незабываемые впечатления гарантированы!
                    </div>
                    <a href="#" class="blog-slider__button">
                        <i class="fas fa-book-open blog-slider__icon"></i> ЧИТАТЬ ДАЛЕЕ
                    </a>
                </div>
            </div>
            
            <div class="blog-slider__item swiper-slide">
                <div class="blog-slider__img">
                    <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Лесной пейзаж">
                </div>
                <div class="blog-slider__content">
                    <span class="blog-slider__code"><i class="fas fa-calendar-alt blog-slider__icon"></i> 22 Июня 2024</span>
                    <div class="blog-slider__title">Магия лесных троп</div>
                    <div class="blog-slider__text">
                        Погрузитесь в атмосферу древних лесов, где каждый шаг открывает новые тайны природы. 
                        Уникальная флора и фауна ждут своих исследователей.
                    </div>
                    <a href="#" class="blog-slider__button">
                        <i class="fas fa-book-open blog-slider__icon"></i> ЧИТАТЬ ДАЛЕЕ
                    </a>
                </div>
            </div>
            
            <div class="blog-slider__item swiper-slide">
                <div class="blog-slider__img">
                    <img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Озерный пейзаж">
                </div>
                <div class="blog-slider__content">
                    <span class="blog-slider__code"><i class="fas fa-calendar-alt blog-slider__icon"></i> 30 Июня 2024</span>
                    <div class="blog-slider__title">Озера мечты</div>
                    <div class="blog-slider__text">
                        Кристально чистые воды, окруженные величественными скалами. 
                        Идеальное место для медитации, рыбалки и наслаждения прекрасными закатами.
                    </div>
                    <a href="#" class="blog-slider__button">
                        <i class="fas fa-book-open blog-slider__icon"></i> ЧИТАТЬ ДАЛЕЕ
                    </a>
                </div>
            </div>
        </div>
        <div class="blog-slider__pagination"></div>
    </div>

Recommandé

Formulaire de connexion et d'inscription avec authentification biométrique

Extrait HTML d'animation de texte 3D

Modèle HTML/CSS/JS de formulaire de connexion et d'inscription

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS