Swiper学习之旅（1）

引入文件

先去Swiper官网下载Swiper相关js和css文件，当然可以用cdn引入

<link rel="stylesheet" href="css/swiper.css"/>
<script type="text/javascript" src="js/swiper.min.js"></script>

html部分

先用3个div做实例

<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

js部分

首先初始化，然后用相关API进行设置

window.onload = function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        direction: 'vertical',
        loop: false,
    })
};

DEMO

查看demo

自适应page

因为swiper主要是用在手机上，用来滑动的一个插件，所以我们接下来看一个用在手机端的自适应的一个Demo