实用的Swiper轮播图配置

speed：切换速度，即slider⾃动滑动开始到结束的时间（单位ms），也是触摸滑动时释放⾄贴合的时间。pagination：分页器el：分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。clickable：点击分页器的指⽰点分页器会控制Swiper切换。navigation：使⽤前进后退按钮来控制Swiper切换。nextEl：设置前进按钮的css选择器或HTML标签。prevEl：设置后退按钮css选择器或HTML标签。四、效果预览 五、问题解决采⽤ajax⽅式循环遍历slide模块时，会出现轮播装载不成功的情况出现，原因是同为js，在slide模块未加载完成时就进⾏了Swiper组件的注册，导致装载失败。解决⽅案为在ajax执⾏成功，并将循环遍历的slide模块放⼊容器后，再执⾏Swiper的注册即可。若需要绑定点击事件，也需要再注册Swiper之后绑定。

2023年6月21日发(作者：)

实⽤的Swiper轮播图配置⼀、引⼊相关⽂件⼆、css样式html, body { position: relative; height: 100%;}body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0;}.swiper-container { width: 100%; height: 200px;}.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}其余样式已在css⽂件中，也可⾃⾏据需修改。⼆、搭建Swiper容器

其中，swiper-pagination为cite模块，需保证swiper-container>swiper-wrapper>swiper-slide三层结构，slider内部可⾃由发挥。三、相关配置 var swiper = new Swiper('.swiper-container', { loop: true, spaceBetween: 0, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false, }, speed:1000, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });在new了Swiper组件后，增加了多个配置项，保证轮播的易⽤：loop：设置为true 则开启loop模式。loop模式：会在原本slide前后复制若⼲个slide(默认⼀个)并在合适的时候切换，让Swiper看 起来是循环的。loop模式在与free模式同⽤时会产⽣抖动，因为free模式下没有复制slide的时间点。spaceBetween：在slide之间设置距离（单位px）。centeredSlides：设定为true时，active slide会居中，⽽不是默认状态下的居左。autoplay：设置为true启动⾃动切换，并使⽤默认的切换设置，默认停留三秒。delay：⾃动切换的时间间隔，单位ms。若需要单独配置某个slide块的停留时间，可通过添加data-swiper-autoplay属性实现，例如：