用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. VUE组件如何与iframe通信问题

    vue组件内嵌一个iframe,现在想要在iframe内获取父vue组件内信息,由于本人技术有限,采用的是H5新特性PostMessage来解决跨域问题. postMessage内涵两个API: on ...

  2. phpqrcode生成带logo的二维码图片及带文字的二维码图片

    <?php require_once "./phpqrcode/phpqrcode.php"; /** * 这样就可以生成二维码了,实际上在png这个方法里还有几个参数需要使 ...

  3. IOS开发之----常用的基本GDB命令【转】

    原文地址:http://blog.sina.com.cn/s/blog_71715bf801016d2y.html gdb不是万能的,可是没有gdb却是万万不能的.这里给大家简单介绍下iOS开发中最基 ...

  4. Educational Codeforces Round 17 D. Maximum path DP

    题目链接:http://codeforces.com/contest/762/problem/D 多多分析状态:这个很明了 #include<bits/stdc++.h> using na ...

  5. How can I pass data from Flask to JavaScript in a template?

    https://stackoverflow.com/questions/11178426/how-can-i-pass-data-from-flask-to-javascript-in-a-templ ...

  6. 搭建基于Maven的SSM框架

    先展示文件结构图对工程结构有大致了解: 主要为  ssm-parent (用来管理jar包版本)是每个工程的父工程,ssm-common(用来处理底层数据),ssm-manager(对数据库信息进行操 ...

  7. vim插件：显示树形目录插件NERDTree安装 和 使用【转】

    本文转载自:https://my.oschina.net/VASKS/blog/388907 下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.c ...

  8. HDU3974 Assign the task —— dfs时间戳 + 线段树

    题目链接:https://vjudge.net/problem/HDU-3974 There is a company that has N employees(numbered from 1 to ...

  9. sphinx索引部分源码续——过程：连接到CSphSource对应的sql数据源，通过fetch row取其中一行，然后解析出field，分词，获得wordhit，最后再加入到CSphSource的Hits里

    后面就是初始化一些存储结构,其中重点说下缓存出来的几个临时文件分别的作用.结尾时tmp0的存储的是被上锁的Index,有些Index正在被查询使用 故上锁.tmp1,即对应将来生成的spp文件,存储词 ...

  10. idea项目文件名为红色的解决办法

    设置项目的版本控制为none或者对应的版本控制,如下图,添加对应项目的版本控制为none: