swiper-slide

Swiper-slide是Swiper插件中的一个类名，用于定义每个滑动的单元。在Swiper插件中，每个swiper-slide代表一个滑动的页面或内容块。通过设置不同的样式和内容，可以创建多个swiper-slide来实现滑动切换的效果。\[1\]在给定的代码示例中，通过使用swiper-container和swiper-slide类名，可以创建一个包含4个滑动页面的Swiper实例。每次点击或轻触Swiper时，通过click方法来切换到下一个slide。如果开启了循环模式(loop:true)，则会在原本slide前后复制若干个slide，并在合适的时候切换，使Swiper看起来像是循环的。\[2\]此外，还可以通过设置centeredSlides为true来使活动的slide居中显示，通过设置slidesPerView来定义slider容器能够同时显示的slides数量，通过设置spaceBetween来设置slide之间的距离，通过设置autoplay来实现自动播放下一个slide的功能。\[3\]
#### 引用[.reference_title]
- *1* *2* [swiper实现点击切换slide/图片效果](https://blog.csdn.net/weixin_49098968/article/details/129008245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [2021-6-25 工作记录 Swiper--解决swiper滑动迟钝现象+实现swiper-slide-active居中+轮播到某slide时，修改...](https://blog.csdn.net/weixin_48850734/article/details/118332427)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]