H5——必备之使用swiper.js、常规且带点好看配置

这是H5项目用的最多的了，最近重新用上有些忘记，还是写出来方便查看基本的，也帮助其他人

HTML部分

这是pug的语法，不写标签名默认即div了，也很好看懂，主要是看层级关系。需要分页器，就要写上一个<div class=".swiper-pagination ">即可 上下页同理。

			.swiper-container     //最外层
                .swiper-wrapper  //主要显示层
                    .swiper-slide //某页具体内容
                            img.imgCover(src="https://res.********/miaoBest_1.png")
                    .swiper-slide
                            img.imgCover(src="https://res.********/miaoBest_1.png")
                    .swiper-slide
                            img.imgCover(src="https://res.********/miaoBest_1.png")

                .swiper-pagination   //分页器
                .swiper-button-next  //下一页切换
                .swiper-button-prev  //上一页

JS部分

// 初始化swiper
    swiper = new Swiper('.swiper', {
    
    
        init: true,  //初始化时候就开启 ，好像没声明用
        centeredSlides: true, //没啥用
        initialSlide: 1,  //默认第一个显示哪个
        slidesPerView: 'auto', //一页展示多少个，auto是根据页面宽度
        loop: true, //循环
        effect: 'coverflow',//翻页动画样式，有四种
        coverflowEffect: {
    
      //coverflow动画详细配置
            rotate: 0,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true, 
        },
        direction: 'vertical', // 垂直切换选项
        speed:300, //默认，切页动作花费的时间，
        autoplay:true, //自动播放，5s一页
        //开启分页、html也要写
        pagination: {
    
    
            el: '.swiper-pagination',  
            clickable :true,  //点击圆点跳页
        },
        //指定组件
        navigation: {
    
    
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

关于静态资源

需要引入两个文件，一个是swiper.min.css、另一个swiper.min.js.建议去官网下载好，放到自己的cdn服务器上。怎么引入就不说了。

上图

默认是左右切换、特地切成垂直来配置。发现还挺好看