swiper4初始化/swiper-init/data-swiper
用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的更多相关文章
- swiper3初始化/swiper-init/用data实例化swiper/data-swiper
Framework7直接用data属性实例化swiper用起来很爽,刚好最近又用到swiper插件,自己写一个 HTML <div class="swiper-container sw ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法
问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...
- Vue源码学习02 初始化模块init.js
接上篇,我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是 ...
- Linux0.11内核剖析--初始化程序(init)
1.概述 在内核源代码的 init/目录中只有一个 main.c 文件. 系统在执行完 boot/目录中的 head.s 程序后就会将执行权交给 main.c.该程序虽然不长,但却包括了内核初始化的所 ...
- swiper轮播 swiper整屏轮播
近期坐了几个移动端 整屏轮播的 效果 之前都是自己一个个写,之前听说过swiper插件,没有使用过,今天一尝试,果然,爽 使用方法示例 <div class="swiper-cont ...
- iOS 初始化(init、initWithNibName、initWithCoder、initWithFrame)
很多朋友如果是初学iOS开发,可能会被其中的几个加载方法给搞得晕头转向的,但是这几个方法又是作为iOS程序员必须要我们掌握的方法,下面我将对这几个方法做一下分析和对比,看看能不能增加大家对几个方法的理 ...
- Objective-C学习笔记(二十二)——初始化方法init的重写与自己定义
初学OC.对init这种方法不是非常了解.我们如今来分别对init方法进行重写以及自己定义,来加深对他的了解. 本样例也是用Person类来进行測试. (一)重写init方法. (1)在Person. ...
- 4.layhm框架初始化准备Init
hm\core\Boot 里 Boot 里run() 自动开起session 设置时区 <?php /** * Created by Haima. * Author:Haima * QQ:228 ...
随机推荐
- android 浮动窗体学习笔记及个人理解(仿360手机助手)
很感谢原文作者 http://blog.csdn.net/guolin_blog/article/details/8689140 经自己理解 程序执行界面例如以下图: 1.程序入口界面 2.小浮动窗体 ...
- AWK教程
1. IBM:GAWK入门:AWK语言基础 2. Unix AWK使用手册 3. 台湾中研院计算中心ASPAC计划之AWK程序介绍 4. Study-area之AWK 5. AWK学习笔记——酷勤 持 ...
- C语言-- static 全局使用示例
C语言-- static 全局使用示例 前言:看到很多使用Objective-C开发IOS的大牛,有时候会使用static全局变量,相比之下,我却很少用这个,从而很少对其有着比较有实质意义的理解,甚 ...
- MFC程序打开文件对话框出错的问题解决
前几天从网上下了个图像分析的mfc小程序,是VC6的 用VC6在本地编译生成都没问题.执行起来弹出一个未处理的错误,程序崩溃退出. 想起来原来遇到过打开文件对话框方面的问题,当时项目时间紧张未能深究. ...
- Matplotlib绘图基础
import matplotlib.pyplot as plt import numpy as np #绘图流程 x=np.linspace(-1,1,100) y=x**2 plt.plot(x,y ...
- 启动两个Tomcat的方法
由于项目需要,所以要启动两个工程,但是又不能用一个Tomcat,于是就琢磨起了怎么启动两个Tomcat 1:首先,conf/server.xml要把HTTP的端口改成不一致的,我一个是8088,一个 ...
- id 查询
Ids Query | Elasticsearch Reference [6.2] | Elastic http://www.elastic.co/guide/en/elasticsearch/ref ...
- ALLOWED_HOSTS = ['*']
https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-ALLOWED_HOSTS https://stackoverflow ...
- 滑动窗体的最大值(STL的应用+剑指offer)
滑动窗体的最大值 參与人数:767时间限制:1秒空间限制:32768K 通过比例:21.61% 最佳记录:0 ms|8552K(来自 ) 题目描写叙述 给定一个数组和滑动窗体的大小.找出全部滑动窗体里 ...
- 谈一谈以太坊虚拟机EVM的缺陷与不足
首先,EVM的设计初衷是什么?它为什么被设计成目前我们看的样子呢?根据以太坊官方提供的设计原理说明,EVM的设计目标主要针对以下方面: 简单性(Simplicity) 确定性(Determinism) ...