一个页面使用多次swiper，相互冲突的问题，或接接口不循环的问题

最新推荐文章于 2023-10-20 11:09:32 发布

swx980

最新推荐文章于 2023-10-20 11:09:32 发布

阅读量650

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/swx999/article/details/110000921

版权

在Vue项目中，当一个页面需要使用多个Swiper组件时，可能会遇到组件间冲突或者无法循环播放的问题。通过为每个Swiper设置独特的ID或class，可以避免样式和功能上的相互影响，确保每个Swiper正常工作。

摘要由CSDN通过智能技术生成

首先，可以用不同的 id 或 class 来区分他们，并设置样式

<template>
<div>
<!-- 第一个轮播 -->
   <div class="swiper-container" id="container1">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide1">
            <img src="" alt="" />
          </div>
          <div class="swiper-slide swiper-slide1">
            <img src="" alt="" />
          </div>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

swx980

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个页面使用多次swiper，相互冲突的问题，或接接口不循环的问题

首先，可以用不同的 id 或 class 来区分他们，并设置样式<template><div> <div class="swiper-container" id="container1"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide1"> <i
复制链接

扫一扫