用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. 【HDOJ 3652】B-number

    [HDOJ 3652]B-number 给一整数n 找<=n的整数中能被13整除且含有13的 数位dp 记忆化! . 一入记忆化深似海. ..再也不想用递推了...发现真的非常好想 仅仅要保证满 ...

  2. OpenGL的版本号历史和发展

    来源请注明.本文永久地址为http://www.cnblogs.com/vertexshader/articles/2917540.html OpenGL®作为业界最为广泛使用的2D和3D图形接口标准 ...

  3. 2016/3/18 ①PHP基础 ② PHP函数 ③其他函数(随机数、关于日期) ④正则表达式 ⑤字符串处理

    一.PHP基础 1,标记和注释 ①<?php?> ②单行注释// 多行注释/**    */2, 输出语句 ①echo输出 echo可以输出多个字符串,用逗号隔开. ②print输出 pr ...

  4. linux路由表解析

    1 格式 Destination 这个和Genmask一起构成目标网络.路由是路由到目标网络,知道目标网络就可以到达目标路由器,然后在该网络中找到目标机器. Gateway 网关,数据包的下一跳.比如 ...

  5. Linux的进程优先级NI和PR到底有什么区别

    Linux的进程优先级NI和PR到底有什么区别 - 51CTO.COM http://os.51cto.com/art/201605/511559.htm

  6. 设计模式-(13)访问者模式 (swift版)

    一,概念 访问者模式,是行为型设计模式之一.访问者模式是一种将数据操作与数据结构分离的设计模式,它可以算是 23 中设计模式中最复杂的一个,但它的使用频率并不是很高,大多数情况下,你并不需要使用访问者 ...

  7. android编译openssl静态库.a

    github上有一个开源项目,已经为你编译openssl建好了工程. 地址:https://github.com/aluvalasuman/OpenSSL1.0.1cForAndroid 选择需要的版 ...

  8. Linux 杀死所有进程

    方法一: sudo killall -9 netease-cloud-music 这种方法,必须要写全称. sudo netease-cloud-music QStandardPaths: XDG_R ...

  9. anaconda tensorflow tflearn 自动安装脚本 anaconda使用-b可以非交互式安装

    install_dir=/usr/local/anaconda3 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )&qu ...

  10. 转【前端基础进阶之Promise】

    前言 Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻.这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现. 在实际的使用当中,有非常多的应用场景我 ...