swiper一行中展示三列的效果—案例（一）

移动端H5 使用swiper

移动端的布局可以采用hotcss的方式，这里就不进行布局介绍了；可以参考

链接：https://www.w2bc.com/article/205451  ，本文内代码没有做适配；

1:引入swiper连接

（cdn方式引入,可以使用文件引入的方式）

（1）css

（2） js

2:swiper配置

3：html

4：效果

2列多

 

css可以控制 swiper-slide内容宽高，但是要在移动端合理的范围内；

例如移动端手机屏幕宽高是：375*667，那么swiper-slide 的宽高就要设置在这个宽度以内，单个太宽的话，swiper里面的配置就不能正确产生想要的效果。

5：接口返回数据

使用swiper请求后台接口时，进行遍历，swiper失效，因为这时候dom还没加载出来，初始化

（1）setTimeout()，加一个延时器

setTimeout( () => {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 2.6,
        spaceBetween: 90,
        slidesOffsetAfter : 120,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
},200)

（2）添加swiper的两个属性

observer:true,                      //修改swiper自己或子元素时，自动初始化swiper
observeParents:true,                //修改swiper的父元素时，自动初始化swiper