Swiper.js卡片翻转与轮播功能冲突问题排查

问题描述 #

想要实现多幻灯片视图的轮播效果（带箭头导航），同时给轮播内的卡片添加翻转动画。目前卡片翻转功能正常，但轮播完全无法工作，怀疑是Swiper.js与自定义翻转的CSS/JavaScript代码存在冲突，需要排查问题原因。

原代码 #

HTML/CSS代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>locationtemplate</title>
          <link rel="stylesheet" href="swiper-bundle.min.css">

        <style>
    * {
    margin: 0;
    padding: 0;
}
        
.card {
    width:100px;
    height:100px;
    transition: all .5s;
    transform-style: preserve-3d;
}
.front {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    backface-visibility: hidden;
    -webkit-backface-visibility:hidden;
    background:#36732A;
    
}
.card.flipCard {
    transform:rotateY(-180deg);
}
.back {
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    backface-visibility: hidden;
        -webkit-backface-visibility:hidden;

}
.back {
    transform: rotateY(-180deg);
    background: #2D63A9;
}

    </style>

</head>

<body>

<!--    <script>
            const mult = document.getElementById("bodyh");
        searchCities();
        
    async function searchCities() {

            const res = await fetch("https://raw.githubusercontent.com/millbj92/US-Zip-Codes-JSON/master/USCities.json");
            const cities = await res.json();

        var pic = "";
        cities.forEach( function(value){

        if (value.zip_code == 91030 )
        {
            pic = value.city;
        }                   

}        );
            
            let matches = cities.filter(element => {
                if(element.city === pic){
                    return element.city;
                }
            });
        outputHTML(matches);
        }
                       let arr = [];
                       var xmlhttp;
        const outputHTML = matches => {
            if(matches.length > 0){
                
                const html = matches
                .map(
                    map => {
                        
        
                        
                    }
                                

                    

        )
                .join('');
            
                } else {
                    mult.innerHTML = "<p>Don't see your city? Email us at localyco@gmail.com</p>";
                }
            
                                        
            };


    </script>

-->
        <!--    <h1>91030</h1>
        
<div class="locationhomepage" id ="91030"> -->
        <div class="swiper swiper3">
    <div class="swiper-wrapper">
            <div class="swiper-cards">

        <div class="card" id="1">
<div class="front"> <button onClick="flipOmelette(1)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(1)">Hello</button></div>
        </div></div>
                <div class="swiper-cards">

        <div class="card" id="2">
<div class="front"> <button onClick="flipOmelette(2)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(2)">Hello</button></div>
        </div></div>
            <div class="swiper-cards">

        <div class="card" id="3">
<div class="front"> <button onClick="flipOmelette(3)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(3)">Hello</button></div>
        </div></div>
            <div class="swiper-cards">

        <div class="card" id="4">
<div class="front"> <button onClick="flipOmelette(4)">Hello</button> <p>hello</p></div><div class="back"><p>hello</p> <button onClick="flipOmelette(4)">Hello</button></div>
        </div></div>
            </div>
        
        <div class="swiper-button-next swiper-navBtn"></div>
            <div class="swiper-button-prev swiper-navBtn"></div>
            </div>
    <!--    
    </div> -->  </body> </html>

JavaScript代码 #

<script src="swiper-bundle.min.js"></script>
    <script>
        let flip;
    function flipOmelette(hello){
         flip = document.getElementById(hello.toString());
        flip.classList.toggle("flipCard");
        console.log(hello);
    }
     var swiper3 = new Swiper('.swiper3', {
        slidesPerView: 10,
        spaceBetween: 2500,
         loop: true,
        spaceBetween: 300,
      
         navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    });
    
</script>

问题原因与修复方案 #

核心问题 #

1. Swiper轮播项类名错误：Swiper只会识别带有swiper-slide类的元素作为轮播项，自定义的swiper-cards无法被Swiper识别，这是轮播失效的主要原因。
2. 配置参数重复且不合理：重复设置了spaceBetween，最终生效的300数值过大，导致卡片间距超出可视范围，看起来像轮播没工作；同时slidesPerView:10如果容器宽度不足，会自动压缩卡片，影响显示效果。

修复后的代码 #

修改后的HTML（仅轮播项部分）

把所有swiper-cards替换为swiper-slide：

<div class="swiper swiper3">
    <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="card" id="1">
                    <div class="front"> <button onClick="flipOmelette(1)">Hello</button> <p>hello</p></div>
                    <div class="back"><p>hello</p> <button onClick="flipOmelette(1)">Hello</button></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="card" id="2">
                    <div class="front"> <button onClick="flipOmelette(2)">Hello</button> <p>hello</p></div>
                    <div class="back"><p>hello</p> <button onClick="flipOmelette(2)">Hello</button></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="card" id="3">
                    <div class="front"> <button onClick="flipOmelette(3)">Hello</button> <p>hello</p></div>
                    <div class="back"><p>hello</p> <button onClick="flipOmelette(3)">Hello</button></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="card" id="4">
                    <div class="front"> <button onClick="flipOmelette(4)">Hello</button> <p>hello</p></div>
                    <div class="back"><p>hello</p> <button onClick="flipOmelette(4)">Hello</button></div>
                </div>
            </div>
    </div>
    <div class="swiper-button-next swiper-navBtn"></div>
    <div class="swiper-button-prev swiper-navBtn"></div>
</div>

修改后的JavaScript配置

var swiper3 = new Swiper('.swiper3', {
    slidesPerView: 4, // 根据容器宽度调整，这里改为4更合理
    spaceBetween: 20, // 缩小间距，保证卡片在可视范围内
    loop: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

说明 #

• 卡片的3D翻转CSS代码没有问题，不会和Swiper冲突，修复轮播项类名和配置参数后，轮播和翻转功能可以同时正常工作。
• 如果需要实现类似多幻灯片滚动的效果，可以根据实际容器宽度调整slidesPerView的值，或者设置为'auto'让Swiper自动适配。

内容的提问来源于stack exchange，提问作者David Chong