Ejemplo de control deslizante de blog de Swiper

954 mambetovv

Abrir en el editor Publica tu código

Ejemplo de control deslizante de blog de Swiper

Recomendado

28 July 2023

Barra de búsqueda con CSS

10 July 2025

Plantilla de formulario de inicio de sesión HTML CSS

9 December 2025

Plantilla de formulario de inicio de sesión HTML CSS de Deezer Aesthetic

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>

CSS