Ejemplo de control deslizante de blog de Swiper

Abrir en el editor Publica tu código

Recomendado

28 August 2025

Ejemplo de código HTML de la página de inicio de sesión en turco

9 November 2023

<!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>

Ejemplo de control deslizante de blog de Swiper

Recomendado

Ejemplo de código HTML de la página de inicio de sesión en turco

Menú de Pestañas en JavaScrip

Un código de Metehan

HTML

CSS

JS

Recomendado

Ejemplo de código HTML de la página de inicio de sesión en turco

Menú de Pestañas en JavaScrip

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS