解决一个页面多个 swiper 冲突

最新推荐文章于 2023-03-31 20:44:05 发布

·段公子

最新推荐文章于 2023-03-31 20:44:05 发布

阅读量3k

点赞数

分类专栏： Swiper

本文链接：https://blog.youkuaiyun.com/CedricD/article/details/106029974

版权

Swiper 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何处理一个页面上存在多个Swiper组件导致的冲突问题。通过为每个Swiper创建独立的实例，并使用不同的class或id进行区分，确保它们能够正常工作而不会相互干扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你在当前页面使用了多个swiper组件时，则会出现冲突，这个没什么可说的，直接上代码言简意赅

这是第一个Swiper

//这是第一个Swiper
<div id={style.banner} className="swiper-container swiper1">
    <div className="swiper-wrapper">
        {
            this.props.homeBannerList.map((v, i) => (
                <div key={i} className="swiper-slide">
                    <img src={v.image_url} alt="" title={v.title} />
                </div>
            ))
        }
    </div>
    <div className="swiper-pagination" id={'swiper1'}></div>
</div>

这是第二个Swiper

//这是第二个Swiper
<div id={style.swiper_container} className="swiper-container swiper2">
    <div className="swiper-wrapper">
        {
            this.props.vipHomeSchedular.map((v) => (
                <div key={v.schedular_id} className="swiper-slide">
                    <div className={style.swiper_list}>
                        <div className={style.swiper_list_item}>
                            <a href="">
                                <img src={v.pic} alt="" />
                            </a>
                        </div>
                        <div className={style.swiper_list_info}>
                            <a href="">
                                <h3>{v.schedular_name}</h3>
                                <p>
                                    <span>{v.min_discount}</span>
                                    <span>折起</span>
                                </p>
                            </a>
                        </div>
                        <a href="">
                            <span className={style.swiper_list_buy}>立即抢购</span>
                        </a>
                    </div>
                </div>
            ))
        }
    </div>
    <div className="swiper-pagination" id={'swiper2'}></div>
</div>

这是第三个Swiper

//这是第三个Swiper
<div className="swiper-container swiper3">
   <div className="swiper-wrapper">
        {
            this.props.hostShowList.map((v, i) => (
                <div key={i} className="swiper-slide" id={style.swiper_slide_active}>
                    <a href="">
                        <div className={style.hot_list_item}>
                            <img src={v.pic} alt="" />
                        </div>
                        <h3>{v.show_name}</h3>
                    </a>
                </div>
            ))
        }
    </div>
</div>

这是第四个Swiper

//这是第四个Swiper
<div className="swiper-container swiper4">
    <div className="swiper-wrapper">
        {
            this.props.postponeShowList.slice(1).map((v) => (
                <div key={v.sche_id} className="swiper-slide" id={style.stage_list_swiper_active}>
                    <a href="">
                        <div className={style.stage_list_swiper_pic}>
                            <img src={v.pic} alt="" />
                        </div>
                        <h3>{v.schedular_name}</h3>
                        <p>
                            <strong>¥{v.low_price}</strong>
                            <span>起</span>
                        </p>
                    </a>
                </div>
            ))
        }
    </div>
</div>

Swiper实例

//第一个Swiper的实例
new Swiper('.swiper1', {
    autoplay: true,
    direction: 'horizontal',//竖向轮播
    loop: true,//无缝轮播
    pagination: {//小圆点分页
        el: '#swiper1',
    }
})
//第二个Swiper的实例
new Swiper('.swiper2', {
    autoplay: true,
    direction: 'horizontal',//竖向轮播
    loop: true,//无缝轮播
    pagination: {//小圆点分页
        el: '#swiper2',
    }
})
//第三个Swiper的实例
new Swiper('.swiper3', {
    slidesPerView: 3,
    spaceBetween: 0
})
//第四个Swiper的实例
new Swiper('.swiper4', {
 slidesPerView: 3,
    spaceBetween: 0
})