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

前端之家收集整理的这篇文章主要介绍了jQuery自适应轮播图插件Swiper用法示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery自适应轮播图插件Swiper用法分享给大家供大家参考,具体如下:

运行效果截图如下:

示例代码如下:

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 新建H5自适应模板 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: 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; }

关于swiper的内容读者可参考相关网站:http://www.swiper.com.cn/download/index.html

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《

希望本文所述对大家jQuery程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/46343.html

猜你在找的jQuery相关文章