用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. html2canvas 导出包含滚动条的内容

    import html2canvas from 'html2canvas'; exportPDF() { // 导出为 pdf let dom = document.querySelector('yo ...

  2. 追踪分布式Memcached默认的一致性hash算法

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  3. [BZOJ2144]国家集训队 跳跳棋

    题目描述 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子. 我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动把他们的位置移动 ...

  4. beego07----web博客

    conf/app.conf appname = blog1 httpport = 8080 runmode = dev name=admin pwd=admin controllersmy/attac ...

  5. idea导出配置

  6. java生成随机汉字

    方法一: public static char getRandomChar() { return (char) (0x4e00 + (int) (Math.random() * (0x9fa5 - 0 ...

  7. git lfs

    https://git-lfs.github.com/ 1.从这个网址下载git-lfs-windows-amd64-1.1.0.exe,运行这个安装包 2.然后打开git bash 输入git lf ...

  8. go string []byte相互转换

    string 不能直接和byte数组转换 string可以和byte的切片转换 1,string 转为[]byte var str string = "test" var data ...

  9. RDD基础

    RDD的两种操作 1.Tansformation(转化操作):返回值还是一个RDD 2.Action(行动操作):返回值不是一个RDD      第一种Transformation是返回一个新的RDD ...

  10. 【HAOI 2006】 受欢迎的牛

    [题目链接] 点击打开链接 [算法] 先用tarjan缩点,然后找出度为零的点,即可 [代码] #include<bits/stdc++.h> using namespace std; # ...