console 命令行工具 X clear

console

const loopInfo = {
    activeIndex:2,
    direction:'',
    backgroundSize:'75% 240px',
    initBackgroundSize:'0'
}
let doms = [];
let swiperWrapper = document.querySelector('.swiper');
let imgDoms = document.getElementsByClassName('swiper-slide-content');

const mySwiper = new Swiper ('.swiper', {
    loop: true, // 循环模式选项
    longSwipesRatio:.35,//触发过渡
    effect : 'creative',
    parallax : true,//使用视差
    creativeEffect: {
       prev: {
        origin: "left",
        translate: ["-100%", 0, 0],
      },
      next: {
        origin: "right",
        translate: ["100%", 0, 0],
      },
    },
    pagination: {
        el: '.swiper-pagination',
    },
    on:{
        init:function(){
            doms = document.getElementsByClassName('swiper-slide');
            ([...imgDoms]).forEach((dom,index)=>{
                dom.style.backgroundImage=`url(${doms[index].getAttribute('data-url')})`
            })
            swiperWrapper.style.backgroundSize = loopInfo.backgroundSize
            swiperWrapper.style.backgroundImage = `url(${doms[loopInfo.activeIndex].getAttribute('data-url')})`
        },
        sliderMove: function(swiper,event){
            const isLeft =  swiper.touches.diff <0;
            let direction = isLeft?'left':'right'
            let currentBackgroundDom = isLeft?(doms[loopInfo.activeIndex+1]||doms[1]):doms[loopInfo.activeIndex]
            let currentImgDom = isLeft?(imgDoms[loopInfo.activeIndex+1]||imgDoms[1]):imgDoms[loopInfo.activeIndex]
            if(direction!=loopInfo.direction){
                console.log(direction)
                loopInfo.direction=direction
                direction=null
            }else{
                // 
                ([...imgDoms]).forEach((dom,index)=>{
                    dom.style.backgroundSize=loopInfo.backgroundSize
                })
                const url = currentBackgroundDom.getAttribute('data-url')
                swiperWrapper.style.backgroundImage=`url(${url})`;
                swiperWrapper.style.backgroundSize=loopInfo.backgroundSize
                currentImgDom.style.backgroundSize=loopInfo.initBackgroundSize
            }
        },
        transitionEnd: function(){
            loopInfo.activeIndex=this.activeIndex;
            ([...imgDoms]).forEach((dom,index)=>{
                // 没用的图片不需要显示
                dom.style.backgroundSize=loopInfo.initBackgroundSize
            });
            // 只显示要用到的
            imgDoms[loopInfo.activeIndex].style.backgroundSize=loopInfo.backgroundSize
        },
    },
})

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">  

</head>
<body>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <div class="out-box">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" data-url='https://cdn.pixabay.com/photo/2024/04/29/17/37/boxer-8728528_1280.jpg'>
                    <div class="swiper-slide-content"  data-swiper-parallax="100%" align='left'>
                        <br> <br> <br>1湖光山色
                    </div>
                </div>
                <div class="swiper-slide" data-url="https://cdn.pixabay.com/photo/2023/11/17/14/40/street-art-8394476_1280.jpg">
                    <div class="swiper-slide-content" data-swiper-parallax="100%" >
                        <br> <br> <br> <br> <br>新芽抽枝2
                    </div>
                </div>
                <div class="swiper-slide" data-url='https://cdn.pixabay.com/photo/2023/03/17/16/41/road-7859036_1280.jpg'>
                    <div class="swiper-slide-content"  data-swiper-parallax="100%" >
                        <br>黑豹突击3
                        <br>黑豹突击3
                        <br>黑豹突击3
                    </div>
                </div>
                <div class="swiper-slide" data-url="https://cdn.pixabay.com/photo/2016/12/31/21/22/discus-fish-1943755_1280.jpg" >
                    <div class="swiper-slide-content"  data-swiper-parallax="100%">
                        <br> <br> <br> <br>飞船归仓4
                    </div>
                </div>
                
                
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
    </div>

    <script>        
       
  </script>
</body>

.out-box{
    /* 线框和过大的宽高是为了更好的理解思路 */
    /* width: 700px; */
    /* padding: 10px; */
    /* 调整到合适的宽 */
    position: relative;
    left: -20%;
    width: 80%;
    min-width: 420px;
    height: 240px;
    padding: 10x;
    /* outline: 1px solid salmon; */
    border-radius: 10px;
    overflow: hidden;

}
.swiper{
    position: relative;
    left: 25%;
    width:100%;
    height: 240px;
    border-radius: 10px;
    background-repeat: no-repeat;
} 

.swiper-slide{
    border-top-right-radius: 20% 50%;
    border-bottom-right-radius: 40% 90%;

}
.swiper-slide-content{
    height: 100%;
    background-repeat: no-repeat;
    text-align: center;
    color:white; 
    font-size: 18px;
    font-weight: 900;
}