html – How to make swiper transition work in both directions?

var swiper = new Swiper( '.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next.hero-slider-btn',
            prevEl: '.swiper-button-prev.hero-slider-btn',
        },
        pagination: {
            el: '.hero-slider-pagination',
            type: 'bullets',
            clickable: true,
        },    
        effect: 'creative',
        creativeEffect: {
            prev: {            
                scale: 1,
            },
            next: {            
                scale: 1,
            },
        },
        loop: false,
        centeredSlides: false,
        slidesPerView: 1,
        autoplay: false,
        on: {
            activeIndexChange: function () {
                setTimeout(function() { 
                    $('.hero-slide__media.active-media').removeClass('active-media');    
                }, 1000);                
            }
        },
    });    
.hero {
    max-width: 100%;
    min-height: 970px;
    height: 100vh;
    overflow: hidden;
}
.hero-slider.swiper-container {
    position: relative;
    height: 100%;
}
.swiper-slide.hero-slide {
    position: relative;
}
.swiper-slide.hero-slide > .container {
    height: 100%;
}
.hero-slide__media {
    position: absolute;
    top: 50%;
    right: 0;
    width: 295px;
    height: 170px;
    transform: translateY(-50%) skewX(-7deg);
    transition: 0.45s all linear;
}
.swiper-slide.hero-slide.swiper-slide-active .hero-slide__media,
.swiper-slide.hero-slide.swiper-slide-prev .hero-slide__media {
    width: 100%;
    height: 100%;
    transform: translateY(-50%) skewX(0);
}
.hero-slide__media.active-media,
.swiper-slide.hero-slide.swiper-slide-active .hero-slide__media.active-media {
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}
.hero-slide__media:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.hero-slide-content {
    position: relative;
    top: 50%;
    left: 0;
    width: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.hero-slide__title {
    font-size: 3.125rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}
.hero-slide__subtitle {
    font-size: 1.5rem;
    font-weight: 700;
}
.hero-slide__actions {
    display: flex;
    align-items: center;
    margin: 50px -5px 0 -5px;
}
.hero-slide__actions a {
    margin: 0 5px;
}
.swiper-slide.hero-slide.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slider-btn {
    border: 2px solid #FFFFFF;
    border-radius: 6px;
    width: 72px;
    height: 49px;
    background: transparent;
    transform: skewX(-7deg);
    cursor: pointer;
    transition: 0.3s background ease;
}
.hero-slider-btn svg {
    transform: skewX(7deg);
}
.hero-slider-btn svg path {
    fill: #fff;
    transition: 0.3s background ease;
}
.hero-slider-btn:hover {
    background: #fff;
}
.hero-slider-btn:hover svg path {
    fill: #000;
}
.swiper-button-prev.hero-slider-btn:after,
.swiper-button-next.hero-slider-btn:after {
    content: '';
    display: none;
}
.swiper-button-prev.hero-slider-btn {
    right: auto;
    left: 165px;
}
.swiper-button-next.hero-slider-btn {
    right: 165px;
    left: auto;
}
.hero-slide-preview {
    display: none;
    position: absolute;
    top: 50%;
    width: 290px;
    height: 170px;
    overflow: hidden;    
    border-radius: 5px;
    z-index: 1;
}
.hero-slide-preview.shown {
    display: block;
    box-shadow: 49px 53px 36px rgba(0, 0, 0, 0.25), 0px 30px 30px rgba(0, 0, 0, 0.25);
}
.hero-slide-preview.shown:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    z-index: 1;
}
.hero-preview__prev {
    left: -10px;
    transform: skewX(7deg) translateY(-50%);
}
.hero-preview__next {
    right: -10px;
    transform: skewX(-7deg) translateY(-50%);
}
.hero-slide-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-pagination.hero-slider-pagination {
    margin: 0 -5px;
    bottom: 80px;
}
.swiper-pagination.hero-slider-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #fff;
    opacity: 0.2;
    border: 2px solid transparent;
}
.swiper-pagination.hero-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    border: 2px solid #fff;
    background: transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.1/swiper-bundle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.1/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero">
        <div class="hero-slider swiper-container">
<div class="hero-slider-wrap swiper-wrapper">
                <div class="swiper-slide hero-slide">
                    <div class="container">
                        <div class="hero-slide-content text-white">                            
                            <p class="hero-slide__title">Title 1</p>
                            <span class="hero-slide__subtitle">subtitle 1</span>
                            <div class="hero-slide__actions">
                                <a href="" class="btn btn-theme"><span class="btn-text">Button 1</span></a>
                                <a href="" class="btn btn-white"><span class="btn-text">Button 2</span></a>
                            </div>                            
                        </div>
                    </div>
                    <div class="hero-slide__media active-media">
                        <img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGVuc3xlbnwwfHwwfHw%3D&w=1000&q=80" alt="slide 1">
                    </div>
                </div>
                <div class="swiper-slide hero-slide">
                    <div class="container">
                        <div class="hero-slide-content text-white">                            
                            <p class="hero-slide__title">Title 2</p>
                            <span class="hero-slide__subtitle">subtitle 2</span>
                            <div class="hero-slide__actions">
                                <a href="" class="btn btn-theme"><span class="btn-text">Button 1</span></a>
                                <a href="" class="btn btn-white"><span class="btn-text">Button 2</span></a>
                            </div>                            
                        </div>
                    </div>
                    <div class="hero-slide__media">
                        <img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" alt="Slide 2">
                    </div>
                </div>
                <div class="swiper-slide hero-slide">
                    <div class="container">
                        <div class="hero-slide-content text-white">                            
                            <p class="hero-slide__title">Title 3</p>
                            <span class="hero-slide__subtitle">subtitle 3</span>
                            <div class="hero-slide__actions">
                                <a href="" class="btn btn-theme"><span class="btn-text">Button 1</span></a>
                                <a href="" class="btn btn-white"><span class="btn-text">Button 2</span></a>
                            </div>                            
                        </div>
                    </div>
                    <div class="hero-slide__media">
                        <img src="https://s1.1zoom.ru/big0/359/Tigers_Grass_Lying_down_Snout_Glance_579639_1280x853.jpg" alt="slide 3">
                    </div>
                </div>
            </div>
             </div>
            </div>

Leave a Comment