Swiper你必须知道的参数配制-解析

第一步 上代码

JS

   var swiper = new Swiper(".news",{
        pagination: ".news_lis",
        paginationClickable: true,
        slidesPerView: 4,
        spaceBetween: 20,
        nextButton: ".news-next",
        prevButton: ".news-prev",
        autoplay: 3000,
        breakpoints: {
            1200: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            640: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        }
    });

html

    

        

            
Slide 1
            
Slide 2
            
Slide 3
            
Slide 4
        
        
        

        
        

        

    

第二步分析

   var swiper = new Swiper(".news",{ //绑定置顶容器class
        pagination: ".news_lis", //分页clss(就是下面小圆点的容器)
        paginationClickable: true ,//点击分页圆点是否切换
        slidesPerView: 4 ,//每页显示几个
        spaceBetween: 20 ,//每个间距是多少
        nextButton: ".news-next" ,//绑定下一个按钮容器的class
        prevButton: ".news-prev", //绑定上一个按钮容器的class
        autoplay: 3000, //设置多少毫秒会执行一次动画（可以理解为：翻页 / 切换）

      centeredSlides: false //值为【false】时左对齐，默认就是左对齐，值为【true】时居中对齐
        breakpoints: { //响应布局设置
            1200: { //如果屏幕宽度小于<1200
                slidesPerView: 3, //每页显示3个
                spaceBetween: 20 //每个间距是20
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            640: { //如果屏幕宽度小于 <640
                slidesPerView: 1, //每页显示1个
                spaceBetween: 10 //每个间距是10
            }
        }
    });

第三步 总结

你看过这篇文章后，你对swiper已经有个初步了解了！做一般常见项目已经可以游刃有余了！~！骚年！！！