用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. 有关java构造器的笔记

    当程序中首次出现使用一个类A时, 无论是使用A的静态成员还是创建一个对象(声明一个A类对象不算), 那么类加载器就会首先对A进行加载, 在对A进行加载的过程中, 如果A有一个extends的父类B, ...

  2. 【剑指offer】数组中仅仅出现一次的数字（1）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/27649027 题目描写叙述: 一个整型数组里除了两个数字之外.其它的数字都出现了两次. 请 ...

  3. mt7620 uboot

    我本机装的是64位Ubuntu, SDK 里提供的 buildroot-gcc342 是32位的,无法直接运行,需要先安装 gcc-multilib. sudo apt-get install gcc ...

  4. ufldl学习笔记与编程作业：Logistic Regression（逻辑回归）

    ufldl学习笔记与编程作业:Logistic Regression(逻辑回归) ufldl出了新教程,感觉比之前的好,从基础讲起.系统清晰,又有编程实践. 在deep learning高质量群里面听 ...

  5. 最新Bootstrap手册

    http://www.jqhtml.com/bootstraps-syntaxhigh/index.html

  6. 移动端和PC端有什么区别

    1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨 ...

  7. Tool：XMind

    ylbtech-Tool:XMind XMind 是一款非常实用的商业思维导图软件,应用全球最先进的Eclipse RCP 软件架构,全力打造易用.高效的可视化思维软件,强调软件的可扩展.跨平台.稳定 ...

  8. sass 安装与各种命令

    css 是一种编程语言,可以用来开发网页样式,但是却不能编程,没有变量,没有条件语句,于是就有了“css预处理器”, 它的原理就是:利用编程语言进行网页样式设计,然后再编译成正常的css文件: sas ...

  9. P3398 仓鼠找sugar 又一次血的教训

    做什么题都要注意数组的大小,不要犯下数组越界的错误(温馨(狠心)提示): 做了好多遍就是不对,原来是[20]的数组,在for下循环1——>20,神奇爆零: 链接:https://www.luog ...

  10. OC：基础总结

    OC面向对象的编程语言思想 类与对象.继承与实例化.属性点语法.内存管理.字符串.可见度. 类是一组具有相同特征和行为的事物的抽象 OC的与C相比所具有的新的特点: 定义新的类.类的实例和方法.方法的 ...