swiper動畫效果

參考swiper官方網站：http://www.swiper.com.cn/

 Swiper經常使用於移動端網站的內容觸摸滑動；

結構展現：

 

純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端；能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果；開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

 

使用的方法：

一、下載swiper最新版本https://github.com/nolimits4web/Swiper

二、.首先加載插件，須要用到的文件有swiper.min.js和swiper.min.css文件。

<link rel="stylesheet" href="path/to/swiper.min.css">

<script src="path/to/swiper.min.js"></script>

三、若是你的頁面加載了jQuery.js或者zepto.js，你能夠選擇使用更輕便的swiper.jquery.min.js。

<link rel="stylesheet" href="path/to/swiper.min.css">

<script src="path/to/jquery.js"></script>

<script src="path/to/swiper.jquery.min.js"></script>

四、html部分

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div><!-- 若是須要分頁器 -->

<div class="swiper-pagination"></div>

<!-- 若是須要導航按鈕 -->

<div class="swiper-button-prev">

</div><div class="swiper-button-next"></div>

<!-- 若是須要滾動條 --><div class="swiper-scrollbar">

</div></div>導航等組件能夠放在container以外

5.你可能想要給Swiper定義一個大小，固然不要也行。

.swiper-container{

width: 600px;

height: 300px;

}

6.初始化Swiper：最好是挨着</body>標籤 

<script>

var swiperDOM = document.querySelector('.swiper-container');

var mySwiper = new Swiper(swiperDOM, {

//swiper經常使用配置項

pagination: '.swiper-pagination',

initialSlide: 0,

//初始的頁面 nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

scrollbar: '.swiper-scrollbar',

paginationClickable :true,

// direction: 'vertical',

//滾動方向 // speed: 50,

滑動的速度 // autoplay: 2000,

//自動播放 loop: true,

//循環滾動 onInit: function(swiper){ console.log('init');

console.log(swiper); },

onSlideChangeEnd: function(swiper){ // console.log('翻頁完成');

// console.log(swiper.activeIndex); } });

</script>

</body>

7.若是不能寫在HTML內容的後面，則須要在頁面加載完成後再初始化。

<script type="text/javascript"> window.onload = function() { ... } </script>

或者這樣（Jquery和Zepto）

<script type="text/javascript"> $(document).ready(function () { ... }) </script>

8.完成

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div><!-- 若是須要分頁器 -->

<div class="swiper-pagination"></div>

<!-- 若是須要導航按鈕 --><div class="swiper-button-prev"></div>

<div class="swiper-button-next"></div>

<!-- 若是須要滾動條 --><div class="swiper-scrollbar"></div>

</div>導航等組件能夠放在container以外