Swiper.js内容溢出至下一张幻灯片+上一页点击幻灯片重复问题

一、幻灯片文本溢出到下一张的问题 #

• 给每个.swiper-slide加强制溢出隐藏：直接写CSS样式 overflow: hidden;，别只限制宽度，必须确保内容超出幻灯片范围后直接被裁掉。
• 检查文本的定位规则：如果文本用了position: absolute;，一定要给父元素.swiper-slide加position: relative;，不然绝对定位的文本会脱离幻灯片容器约束，跑到外面。
• 给文本容器加换行限制：给文本所在的内层盒子加max-width: 100%;，再配合word-wrap: break-word;，让长文本自动换行，别硬撑出容器边界。

二、连续点击prev按钮出现重复幻灯片的问题 #

• 核对loop模式配置：如果开了loop: true，连续点prev出重复大概率是loopedSlides参数没设对，这个值要和你实际的幻灯片数量完全一致，比如有4张就设loopedSlides: 4。
• 排查自定义点击事件：要是你给prev按钮加了自定义防抖逻辑，可能导致事件堆积触发多次滑动，直接去掉自定义防抖，用Swiper自带的滑动控制参数。
• 限制无效滑动触发：非loop模式下，手动调用slidePrev()前先判断mySwiper.isBeginning，如果已经是第一张就不再执行滑动，避免无效操作导致的重复显示。
• 重置Swiper状态：有时候缓存的异常状态会搞事情，初始化后或者出现问题时，调用mySwiper.update()或者mySwiper.slideTo(0, 0)重置到第一张，清除异常状态。

内容的提问来源于stack exchange，提问作者neessam moustafa