Swiper 8.3.0 视差切换效果（二）

更新了Swiper，版本8.3.0，实现更好看的视差切换效果。

HTML

<!-- start: parallax_swiper -->
<div class="swiper parallax_swiper">
    <div class="parallax-bg" style="background-image:url(19.jpg);" data-swiper-parallax="-23%"></div>
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <div class="text">
                <h2>15</h2>
                <div class="cr">
                    <h3>年</h3>
                    <p>行业经验</p>
                </div>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="text">
                <h2>5</h2>
                <div class="cr">
                    <h3>位</h3>
                    <p>设计专家</p>
                </div>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="text">
                <h2>100</h2>
                <div class="cr">
                    <h3>项</h3>
                    <p>实战案例</p>
                </div>
            </div>
        </div>

    </div>
    <div class="swiper-pagination"><span></span></div>
    <div class="swiper-button-next"><i></i></div>
    <div class="swiper-button-prev"><i></i></div>
</div>
<!-- end: parallax_swiper -->

CSS

/* parallax_swiper */
.parallax_swiper {margin:0 auto; width:800px; height:450px; position:relative; font-family:sans-serif; overflow:hidden;}
.parallax_swiper .parallax-bg {position:absolute; left:0; top:0; width:130%; height:100%; background-size:cover;background-position:center;}
.parallax_swiper .swiper-slide {display:flex; align-items:center; padding:100px 150px; color:#FFFFFF;}
.parallax_swiper .swiper-slide .text {display:flex;}
.parallax_swiper .swiper-slide h2 {font-size:180px; line-height:1;}
.parallax_swiper .swiper-slide .text .cr {display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:24px 0 24px 40px;}
.parallax_swiper .swiper-slide h3 {padding:4px 8px; font-size:18px; color:#333333; background:#FFFFFF;}
.parallax_swiper .swiper-slide p {font-size:32px;}
.parallax_swiper .swiper-button-prev,
.parallax_swiper .swiper-button-next {position:absolute; top:0; bottom:0; width:50px; height:30px; margin:auto; outline:none; -webkit-tap-highlight-color:rgba(255,255,255,0);}
.parallax_swiper .swiper-button-prev::after,
.parallax_swiper .swiper-button-next::after {display:none;}
.parallax_swiper .swiper-button-prev i,
.parallax_swiper .swiper-button-next i {display:block; position:relative; width:20px; height:1px; background:rgba(255, 255, 255, 1); transition:all 0.3s ease 0s;}
.parallax_swiper .swiper-button-prev {left:40px;}
.parallax_swiper .swiper-button-prev i::after {content:""; position:absolute; left:-10px; top:0; bottom:0.5px; margin:auto; width:1px; height:10px; background:#FFFFFF; transition:all 0.3s ease 0s;}
.parallax_swiper .swiper-button-next {right:40px;}
.parallax_swiper .swiper-button-next i::after {content:""; position:absolute; right:-10px; top:0; bottom:0.5px; margin:auto; width:1px; height:10px; background:#FFFFFF; transition:all 0.3s ease 0s;}
.parallax_swiper .swiper-button-prev:hover i,
.parallax_swiper .swiper-button-next:hover i {width:40px;}
.parallax_swiper .swiper-button-prev:hover i::after {left:-15px;}
.parallax_swiper .swiper-button-next:hover i::after {right:-15px;}
.parallax_swiper .swiper-button-prev:hover i,
.parallax_swiper .swiper-button-next:hover i {}
.parallax_swiper .swiper-pagination {left:20%; bottom:60px;}
.parallax_swiper .swiper-pagination .swiper-pagination-bullet {margin:0 4px; width:4px; height:4px; position:relative; background:#ffffff; opacity:0.5; border-radius:0; transition:all 0.3s ease 0s;}
.parallax_swiper .swiper-pagination .swiper-pagination-bullet::before {opacity:0; content:""; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); width:200%; height:200%; transition:all 0.3s ease 0s;}
.parallax_swiper .swiper-pagination .swiper-pagination-bullet-active {opacity:1;}
.parallax_swiper .swiper-pagination .swiper-pagination-bullet-active::before {opacity:1;}

JavaScript

// parallax_swiper
var swiper = new Swiper(".parallax_swiper", {
    loop: true,
    speed: 600,
    parallax: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});