Exemplo de controle deslizante de blog Swiper

Abrir no Editor Publique Seu Código

Recomendado

3 March 2025

Animação de carregamento CSS com imagem de fundo

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>

Exemplo de controle deslizante de blog Swiper

Recomendado

Cilindros Grade Fundo 3D

Página de contato futurista

Animação de carregamento CSS com imagem de fundo

HTML

CSS

JS

Recomendado

Cilindros Grade Fundo 3D

Página de contato futurista

Animação de carregamento CSS com imagem de fundo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS