swiper需要选中swiper-slide项添加样式时，出现两项同时添加样式的问题

已于 2022-04-01 10:48:40 修改
阅读量1.1k 收藏
点赞数
分类专栏： 关于学习、开发中遇到的各种问题 文章标签： javascript html5 html
于 2022-04-01 10:42:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsy0827/article/details/123891909
版权

swiper需要选中swiper-slide项添加样式时，出现两项同时添加样式的问题

问题

需要选中swiper-slide项添加样式时，出现两项同时添加样式的问题，如图
在这里插入图片描述

原因

开启loop循环模式时，里面有一些swiper-slide项是复制生成的，就会导致它们拥有一样的id属性，当你根据这个id属性去添加class时，就会出现重复的问题
在这里插入图片描述

解决

需要设置 loop: false
（暂时没去想在开启loop模式的同时解决这个问题的方法）

舍予一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
swper_Swiper 中文API手册（share）
weixin_39595085的博客
12-19 484
Usage:1、下载swiper最新版本https://github.com/nolimits4web/Swiper2、在HTMLHead中添加Swiper'sCSSandJS:1 2 ....3 4 5 ....6 其中引用的文件名以下载的为准。3、使用下面的HTML布局1 2 3 4 5 6 7 8...
swiper显示多个slide并且箭头在框外
Is_ayanya的博客
10-19 478
在这里插入图片描述](https://img-blog.csdnimg.cn/cb21a3bcafa140f094e62dd1cdda9d32.png)[在这里插入图片描述](https://img-blog.csdnimg.cn/a1a24dc462d94062ac4aad07b53b7258.png)在原来的swiper外嵌套一层div，position为relative，将切换button放到新增的div下。
swiper 插件小圆点选中时样式穿透
Jonn1124的博客
04-21 278
/swiper 小圆点选中时样式穿透/ .swiper-pagination >>> .swiper-pagination-bullet-active{ background-color:#F86B7C }
解决vue-awesome-swiper点击slide选中错误的问题
ALSO666的博客
11-15 630
解决vue-awesome-swiper点击slide选中错误的问题问题描述解决方法 问题描述 在使用loop: true模式下： 动态循环数据 ，轮播有的点击生效，有的不生效。所以不能直接在dom上进行绑定事件，在swiper上进行绑定。 解决方法 html代码如下： <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(item, index) in noticeLi
swiper轮播定制自己想要的样式
farmerXU的博客
05-23 1617
懒得重新把问题一个一个列出来，里面遇到的问题及解决方法都有注释。记录是为了遇到同样的问题，忘记怎么弄的时候就打开看一下。 效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, ini.
swiper滑动切换变换样式，实时显示当前索引
judykang123的博客
12-07 2066
需求 参加活动送的车模型有一个展示页，展示页需要可以滑动查看，并且查看的那个车在最中心且背景颜色、车的大小、文字颜色发生改变。 下面的例子是做完后又在swiper官网的案例中改的，我一般都不会直接用给公司做的项目，另外写一个可以实现功能的小demo作为总结。一个是不会产生什么纠纷，另一个就是单拿出来后加深了印象，下次再用也方便 效果 ...
react-native-web-swiper:适用于React-Native和React-Native-Web的Swiper-Slider
05-22
react-native-web-swiper 简单的滑动器/滑块。 在React-Native和React-Native-Web上均可使用。 演示版 混合小吃： : 安装 $ npm i react-native-web-swiper --save 用法 import React from 'react' ; import { ...
swiper-bundle.min_swiper-bundle.min_swiper-bundle_Modified_jquer
10-02
标题中的"swiper-bundle.min"指的是Swiper.js的压缩版库，这是一个流行的触摸滑动插件，常用于创建轮播图、幻灯片和其他需要滚动效果的网页元素。"swiper-bundle"通常包含了所有必要的模块，使得开发者无需额外引入...
js-swiper-分页标签加进度条-自定义位置加进度条
07-30
要在Swiper中启用分页，你需要在初始化Swiper时设置`pagination`选项。例如： ```javascript var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', type: 'bullets', // 可...
swiper-multiple-video-slider-with-text-animation-effects
05-17
本文将深入探讨“swiper-multiple-video-slider-with-text-animation-effects”这个项目，这是一个利用JavaScript实现的滑动多视频播放器，同时伴有文本动画效果。 Swiper是一个流行的、免费的开源触摸滑动插件，...
小程序swiper实现tab切换--下拉刷新、上拉加载更多.zip
07-23
同时，可以监听`bindchange`事件，当用户滑动Swiper时触发，获取当前显示的页码，从而更新tab样式。 4. **下拉刷新（Pull-down Refresh）**： 微信小程序提供了`onPullDownRefresh`生命周期方法来处理下拉刷新事件...
swiper 虚拟slide on事件_由浅及深实现虚拟DOM和DOM-Diff
weixin_34338129的博客
01-06 701
由浅及深实现虚拟DOM和DOM-Diff一、前言随着前端框架比如Vue和React的不断发展，虚拟DOM和DOM-Diff也随着这些框架被越来越多的人重视。在学习和面试的过程中，越来越成为我们无法回避的知识点。面试时经常会被问到：了解虚拟DOM吗？知道Vue和React的虚拟DOM是什么样的吗？知道他们的DOM-Diff是如何实现的吗？如果你没有认真去看过他们的源码，可能会一问三不知。但是去看源码...
使用swiper时踩过的坑（解决一个网页使用多个swiper冲突问题）
热门推荐
冰雪为融的博客
03-29 2万+
1、如果一个页面中要使用多个轮播图（用swiper实现）,最好的方法，也是最不容易出错的方法是，加一个类名和swiper-container同级的类。，然后初始化swiper时用这个新增加的类，不要用swiper-container，如下示例： <div class="swiper-container banner_swiper"> ...
动态创建swiper注意事项
lihui61357457的博客
10-25 679
swiper动态生成的时候，滑动不生效，loop失效 这个时候需要在swiper动态生成渲染到页面中后去初始化new Swiper () 使用定时器延时初始化 //动态创建slide <div class="swiper-container" > <div class="swiper-wrapper five-wrapper"> <!--<div class="swiper-slide"></div>--> <!--<di
swiper基本用法之设置分页器样式（二）
疏雨萧萧千行泪
01-31 2万+
.banner { width: 100%; height: 100%; overflow: hidden; } .swiper-container, .swiper-wrapper, .swiper-slide, .swiper-slide i
vue3项目一个页面引入多个swiper的Thumbs(略缩图)，swiper之间相互冲突
l_sss2019的博客
08-21 718
vue3项目一个页面引入多个swiper的Thumbs(略缩图)，swiper之间相互冲突。
自己做的几个Slide简单效果
ColorWaterer的专栏
12-10 2707
Web 前端 Slide 样式。
vue-cli2.0使用swiper
行如逆水行舟，不进则退
03-24 1439
网上教程很多，但因为各个版本兼容等等问题，试了好久才引入运用成功。 以下是直接引用swiper的方式（非vue-awesome-swiper） （vue-awesome-swiper的方式引用后有问题，目前不知道怎么解决） 安装 npm install swiper@5 main.js引入样式 import "swiper/css/swiper.css" 在需要使用到的组件内引入swiper import Swiper from 'swiper' 例子 <template> <d
解决swiper loop为true时slide数量较少时候会复制数据，重复显示问题
sunnyboysix的博客
09-27 6353
场景一 使用swiper时候需要loop轮播，但是如果数据较少的时候swiper会重复渲染数据， 我这里时切换形式，前面两个数量多可以loop但是第三个数据比较少就产生这个问题了 其实我的数据只有2条，但是却给我渲染了6条 我第一想法想通过v-if,设置两个组变量渲染，结果fail <swiper class="Swiper" :options="swiperOption" ref="mySwiper" v-if="currentBrandName != 'xxx'"> .
怎么给swiper 设置swiper-slide-active
最新发布
03-08
要给Swiper设置swiper-slide-active，可以通过以下步骤进行操作： 1. 首先，确保你已经引入了Swiper的相关文件，并在页面中创建了Swiper的实例。 2. 在HTML结构中，给每个swiper-slide元素添加一个唯一的标识符，比如给第一个swiper-slide添加id="slide1"，第二个swiper-slide添加id="slide2"，以此类推。 3. 在Swiper的初始化代码中，找到on事件回调函数，该函数会在每次切换到新的slide时触发。 4. 在on事件回调函数中，使用JavaScript或jQuery来获取当前活动的slide元素，并为其添加一个自定义的类名，比如"swiper-slide-active"。 下面是一个示例代码： ```javascript var swiper = new Swiper('.swiper-container', { // Swiper的其他配置项 // ... on: { slideChange: function () { // 获取当前活动的slide元素 var activeSlide = document.querySelector('.swiper-slide-active'); // 添加自定义的类名 activeSlide.classList.add('swiper-slide-active'); } } }); ``` 这样，当Swiper切换到新的slide时，会自动为当前活动的slide元素添加"swiper-slide-active"类名。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值