用data属性初始化swiper

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Swiper</title>

    <link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

    <script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.js"></script>

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

        }

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

        }

        .box {

            display: block;

            height: 500px;

        }

        .bg-gray {

            background: #eaeaea;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="swiper-container swiper-init"

         data-swiper="{slideToClickedSlide:false,autoplay:false,slidesPerView:2,spaceBetween:10,breakpoints:{992:{slidesPerView:1}}}">

        <div class="swiper-wrapper">

            <div class="swiper-slide bg-gray">

                <div class="swiper-container swiper-init" data-swiper="{autoplay:false,slidesPerView:2,spaceBetween:10,direction:'vertical',mousewheel:true,}">

                <div class="swiper-wrapper">

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

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

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

                </div>

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

            </div></div>

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

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

            <div class="swiper-slide">aaa 4</div>

            <div class="swiper-slide">aaa 5</div>

        </div>

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

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

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

    </div>

</div>

<script>

    $(function () {

        $('.swiper-container.swiper-init').each(function () {

            var $swiper = $(this);

            var defaults = {

                navigation: {

                    prevEl: $swiper.children('.swiper-button-prev')[0],

                    nextEl: $swiper.children('.swiper-button-next')[0],

                },

                pagination: {

                    el: $swiper.children('.swiper-pagination')[0],

                    clickable: true,

                },

                autoplay: {

                    disableOnInteraction: false,

                },

                /*slideToClickedSlide: true,*/

                /*centeredSlides : true,*/

                setWrapperSize: true,

                observer: true,

                observeParents: true,

                loop: true,

            };

            var options = (new Function('return ' + $swiper.data('swiper')))();

            var settings = $.extend({}, defaults, options);

            var swiper = new Swiper(this, settings);

            swiper.on('resize', function () {

                swiper.update();

            });

            /*if (!!settings.loop && swiper.slides.length <= 3) {

                swiper.destroy();

            }*/

        })

    });

</script>

</body>

</html>

swiper4初始化/swiper-init/data-swiper的更多相关文章

  1. swiper3初始化/swiper-init/用data实例化swiper/data-swiper

    Framework7直接用data属性实例化swiper用起来很爽,刚好最近又用到swiper插件,自己写一个 HTML <div class="swiper-container sw ...

  2. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  3. Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法

    问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...

  4. Vue源码学习02 初始化模块init.js

    接上篇,我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是 ...

  5. Linux0.11内核剖析--初始化程序(init)

    1.概述 在内核源代码的 init/目录中只有一个 main.c 文件. 系统在执行完 boot/目录中的 head.s 程序后就会将执行权交给 main.c.该程序虽然不长,但却包括了内核初始化的所 ...

  6. swiper轮播 swiper整屏轮播

    近期坐了几个移动端 整屏轮播的  效果 之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽 使用方法示例 <div class="swiper-cont ...

  7. iOS 初始化（init、initWithNibName、initWithCoder、initWithFrame）

    很多朋友如果是初学iOS开发,可能会被其中的几个加载方法给搞得晕头转向的,但是这几个方法又是作为iOS程序员必须要我们掌握的方法,下面我将对这几个方法做一下分析和对比,看看能不能增加大家对几个方法的理 ...

  8. Objective-C学习笔记（二十二）——初始化方法init的重写与自己定义

    初学OC.对init这种方法不是非常了解.我们如今来分别对init方法进行重写以及自己定义,来加深对他的了解. 本样例也是用Person类来进行測试. (一)重写init方法. (1)在Person. ...

  9. 4.layhm框架初始化准备Init

    hm\core\Boot 里 Boot 里run() 自动开起session 设置时区 <?php /** * Created by Haima. * Author:Haima * QQ:228 ...

随机推荐

  1. android findVIewById()在线生成工具

    今天突然发现一个好工具,能够依据你输入的XML布局文件,自己主动生成findViewById的代码.还支持android annotation的注解方式.真是太棒了.由于我正是使用androidann ...

  2. 深度学习笔记之使用Faster-Rcnn进行目标检测 （实践篇）

    实验 我使用的代码是Python版本的Faster Rcnn,官方也有Matlab版本的,链接如下: py-faster-rcnn(python) faster-rcnn(matlab) 环境配置 按 ...

  3. CSDN公开课：SCRUM敏捷开发（2015-8-19 免费）

    当前最火的敏捷可能就是SCRUM了.但敏捷无法落地.对人要求太高.老板对敏捷动机不良等问题怎样解决呢?我将在CSDN的公开课上为大家分享"SCRUM敏捷开发".各位朋友有杀错没放过 ...

  4. SetLocalTime API函数设置本地时间（DateTimeToSystemTime函数，把TDateTime转换成TSystemTime）

    procedure setLocalDateTime(Value: TDateTime);var  lSystemDateTime: TSystemTime;begin  DateTimeToSyst ...

  5. ToolBar修改返回按钮图标

    使用Toolbar时,有时因为不同的手机设备,不能使用系统默认的主题样式或者图标,必须指定特定的资源,防止APP在不同设备上的效果不一样! 我在使用Toolbar时,把这个布局作为一个公共的了,所以修 ...

  6. 安装tensorflow的最简单方法(Ubuntu 16.04 && CentOS)

    先说点题外话:在用anaconda安装很多次tensorflow失败之后,我放弃了,如果你遇到这样的问题:Traceback (most recent call last)-如果不是因为pip版本,就 ...

  7. BZOJ_4199_[Noi2015]品酒大会_后缀自动机

    BZOJ_4199_[Noi2015]品酒大会_后缀自动机 Description 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 酒家”和“首席 ...

  8. js中的call和apply方法

    call方法: 语法:call(thisObj,[arg1,arg2,arg3,...]); 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用 ...

  9. iOS开发，#define的使用

    1.判断当前设备是不是iOS7以上版本 #define IOS_VERSION_7_OR_ABOVE (([[[UIDevice currentDevice] systemVersion] float ...

  10. Vue解决安卓4.4不兼容的问题

    1.npm安装 npm install babel-polyfillnpm install es6-promise package.json中会出现 "babel-polyfill" ...