jQuery自适应轮播图插件Swiper用法示例_

1、jQuery自适应轮播图插件Swiper用法示例_ 这篇文章主要介绍了jQuery自适应轮播图插件Swiper用法,结合实例形式分析了jQuery轮播图插件的功能与具体用法方法,需要的伴侣可以参考下 示例代码如下： !DOCTYPE html html lang=zh-cn head meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no title新建H5自适应模板/title link rel=stylesheet

2、href=swiper-3.3.1.min.css style 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: 100%; .swiper-slide text-align: center; font-size:

3、 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-

4、items: center; /style /head body div class=swiper-container div class=swiper-wrapper div class=swiper-slideimg src=images/banner01.jpg/div div class=swiper-slideimg src=images/banner02.jpg/div div class=swiper-slideimg src=images/banner03.jpg/div /div div class=swiper-pagination/div /div script src=jquery-1.10.1.min.js/script script src=swiper-3.3.1.jquery.min.js/script script var swiper = new Swiper(.swiper-container, pagination: .swiper-pagination, pagi