swiper轮播 swiper整屏轮播

近期坐了几个移动端 整屏轮播的  效果

之前都是自己一个个写，之前听说过swiper插件，没有使用过，今天一尝试，果然，爽

使用方法示例

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">slider1</div><div class="swiper-slide">slider2</div><div class="swiper-slide">slider3</div></div></div><script> var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项，自动滑动 }) </script>

=============================

结构如此布局

引入对应的 插件内置的 样式及js

<link href="../styles/swiper.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="scripts/swiper.js"></script>

即可

================================================================

 

==========================================================================================================

<div class="content">
　　<div class="swiper-container">
　　　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">1</div>
　　　　<div class="swiper-slide">2</div>
　　　　<div class="swiper-slide">3</div>
　　　　<div class="swiper-slide">4</div>
　　　　<div class="swiper-slide">5</div>
　　　　<div class="swiper-slide">6</div>
　　</div>
　　<div class="swiper-pagination" id="companyDot"></div>//下面的小圆点
　　<div class="swiper-button-next"></div>//左右切换箭头
　　<div class="swiper-button-prev"></div>
　　</div>
</div>

=========================================================

详情可以附件文件夹

下载地址：https://files.cnblogs.com/files/leshao/swiper%E6%95%B4%E5%B1%8F%E8%BD%AE%E6%92%AD.rar

纯作为备忘录而已，便于迅速查阅

 

转载于:https://www.cnblogs.com/leshao/p/9439188.html