Ejemplo de control deslizante de blog de Swiper

622 mambetovv

Abrir en el editor Publica tu código

Ejemplo de control deslizante de blog de Swiper

Recomendado

13 August 2023

Formulario de inicio de sesión con redes sociales

30 November 2024

Animaciones controladas por desplazamiento

17 July 2024

Formulario de pago HTML y CSS

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>

Recomendado

Formulario de inicio de sesión con redes sociales

Animaciones controladas por desplazamiento

Formulario de pago HTML y CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS