• swiper初步探索


    最近要做一个效果,初步想到了使用swiper,不过貌似最后并不能完全通过swiper来实现,整整试了一天的时间都没有试出来,真是。。。压力很大,不过自己选的路,总要坚持走下去了。

    Swiper(Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用与移动端的网站、网页应用程序(web apps),以及原生的应用程序(native apps)。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验。

    Swiper基本结构

    这样的图片相信大家应该都很清楚,做过轮播图的都熟悉的很,如下表,就不多言了

    名词翻译描述
    Swiper 滑动、切换 整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡)
    container 容器 Swiper的容器,里面包括滑动块(slides)的集合(wrapper)、分页器(pagination)、前进按钮等
    wrapper 包含 触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移
    slider 滑块 切换的块中的一个,可以包含文字、图片、html元素或另外一个Swiper
    pagination 分页器 指示slide的数量和当前活动的slide
    active 活动的,激活的 可视的(visible)slide是活动的,当可视slide不止一个时,默认最左边那个是活动的
    callback 回调函数 在某些情况下触发

    下面结合一个实例

    和其他插件使用方法一样,我们需加载swiper.min.jsswiper.min.css文件

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="swiper.min.css" type="text/css" />
    <script src="swiper.min.js"></script>
    </head>
    <body>
    输入您的内容
    </body>
    </html>

    接下来在文档部分加入我们相应的主体内容,包含容器,包含,滑块,分页器,滚动条等,在相应位置加入对应class类即可,当然我们也可以自己通过class类设置相应的属性,如swiper-container的width及height

    <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>

    然后再加上下面的代码就可以正式运行了

    <script>        
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical',
        loop: true,
        grabCursor:true// 如果需要分页器
        pagination: '.swiper-pagination',
        
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
      })        
      </script>

     

     这是典型的swiper类型,

    我们可以通过一些参数的设置来取得更加精彩多变的效果;

    如slidesPerView;设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量

    effect  切换效果

    fade:  淡入,淡出

    cube:可以对阴影进行相关设置。

    还有 coverflow:

    另外,我们还可以通过设置observer来动态更新初始化swiper。如下图。

    <!DOCTYPE html>
    <html lang="en">
    <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="../dist/css/swiper.min.css">
    
        <!-- Demo styles -->
        <style>
        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: 300px;
            margin: 20px 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;
        }
        .append-buttons {
            text-align: center;
            margin-top: 20px;
        }
        .append-buttons a {
            display: inline-block;
            border: 1px solid #007aff;
            color: #007aff;
            text-decoration: none;
            padding: 4px 10px;
            border-radius: 4px;
            margin: 0 10px;
            font-size: 13px;
        }
        </style>
    </head>
    <body>
        <!-- Swiper -->
        <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 class="swiper-slide">Slide 4</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <p class="append-buttons">
            <a href="#" class="prepend-2-slides">Prepend 2 Slides</a>
            <a href="#" class="prepend-slide">Prepend Slide</a>
            <a href="#" class="append-slide">Append Slide</a>
            <a href="#" class="append-2-slides">Append 2 Slides</a>
        </p>
        <!-- Swiper JS -->
        <script src="../dist/js/swiper.min.js"></script>
    
        <!-- Initialize Swiper -->
        <script>
        var appendNumber = 4;
        var prependNumber = 1;
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 3,
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 30,
        });
        document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
            e.preventDefault();
            swiper.prependSlide([
                '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
                '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
            ]);
        });
        document.querySelector('.prepend-slide').addEventListener('click', function (e) {
            e.preventDefault();
            swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
        });
        document.querySelector('.append-slide').addEventListener('click', function (e) {
            e.preventDefault();
            swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
        });
        document.querySelector('.append-2-slides').addEventListener('click', function (e) {
            e.preventDefault();
            swiper.appendSlide([
                '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
                '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
            ]);
        });
        </script>
    </body>
    </html>

    更多的属性,方法,回调函数等就不一 一列举了,http://www.swiper.com.cn/api/index.html,应有尽有

  • 相关阅读:
    远程下载文件并设置进度显示
    python调用函数超时设置
    Ubuntu安装PostgreSQL
    sessionStatMap is full
    LdapTemplate忽略ssl证书
    MySQL5.6 Online DDL
    Mysql5.7编译调试(windows环境)
    Disruptor
    mybatis generator自定义文件后缀名
    maven占位符$变量无法替换
  • 原文地址:https://www.cnblogs.com/mopagunda/p/4486388.html
Copyright © 2020-2023  润新知