秋痕语录

Swiper-强大的触摸滑动插件

QQ截图20170410163918.jpg

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

&&能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

&&开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="http://www.swiper.com.cn/dist/css/swiper.min.css">

    <!-- Demo styles -->
    <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%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        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;
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
                    <div style="background-color: darkorange;" class="swiper-slide">Slide 1</div>
                    <div style="background-color: orangered;" class="swiper-slide">Slide 2</div>
                    <div style="background-color: darkred;" class="swiper-slide">Slide 3</div>
                    <div style="background-color: olivedrab;" class="swiper-slide">Slide 4</div>
                    <div style="background-color: cornflowerblue;" class="swiper-slide">Slide 5</div>
                    <div style="background-color: dodgerblue;" class="swiper-slide">Slide 6</div>
                </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true
    });
    </script>
</body>
//from http://www.swiper.com.cn/
</html>

//若运行失效 请自行复制代码运行

打赏

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

©2017 Lxy 豫ICP备17013024号
Copyright2017 lixueyang All Rights Reserved

公告

Welcome to my blog, where you will experience the thrill of not exceeding