swiper3初始化/swiper-init/用data实例化swiper/data-swiper
Framework7直接用data属性实例化swiper用起来很爽,刚好最近又用到swiper插件,自己写一个
HTML
<div class="swiper-container swiper-init" data-autoplay="3000" data-loop="true" data-space-between="15"
data-breakpoints="{1200:{slidesPerView: 1,spaceBetween: 15},768: {slidesPerView: 2,spaceBetween: 15}}">
<div class="swiper-wrapper">
<div class="swiper-slide" php-foreach="$tagList as $v">
<a href="{$v['linkurl']}">
<div class="img" style="background-image: url({$v['thumb']});" title="{$v['title']}"></div>
<h4 class="title">{$v['title']} </h4>
<div class="content">{$v['introduce']}</div>
</a>
</div>
</div>
<div class="swiper-button-prev"><i class="icon icon-prev"></i></div>
<div class="swiper-button-next"><i class="icon icon-next"></i></div>
</div>
JavaScript
$('.swiper-container.swiper-init').each(function () {
var $swiper = $(this);
var defaults = {
prevButton: $swiper.find('.swiper-button-prev')[0],
nextButton: $swiper.find('.swiper-button-next')[0],
pagination: $swiper.find('.swiper-pagination')[0],
paginationType: 'bullets',
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideToClickedSlide: false,
setWrapperSize: true,
slidesPerView: 1,
spaceBetween: 0,
autoResize: true,
observer: true,
observeParents: true,
autoplay: 3000,
loop: true,
onAfterResize: function (swiper) {
swiper.update(true);
setTimeout(function () {
swiper.update(true);
}, 200);
}
};
var options = $swiper.data('swiper');
if (!!options) {
options = (new Function('return ' + $swiper.data('swiper')))();
} else {
options = $swiper.data();
$.each(options, function (k, v) {
options[k] = (new Function('return ' + v))();
});
}
var swiper = new Swiper(this, $.extend({}, defaults, options));
$swiper.data('swiper', swiper);
});
swiper3初始化/swiper-init/用data实例化swiper/data-swiper的更多相关文章
- Swiper说明&&API手册 【中文手册Swiper】
原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...
- Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法
问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...
- Datasets for Data Mining and Data Science
https://github.com/mattbane/RecommenderSystem http://grouplens.org/datasets/movielens/ KDDCUP-2012官网 ...
- 【转】浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!
所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Tag, ...
- SQL data reader reading data performance test
/*Author: Jiangong SUN*/ As I've manipulated a lot of data using SQL data reader in recent project. ...
- 初探 spring data(一)--- spring data 概述
由于自己一个项目要用多到Sql与NoSql两种截然不同的数据结构,但在编程上我希望统一接口API,让不同类型的数据库能在相同的编程接口模式下运作.于是找了一个spring的官网,发现一个spring ...
- OCM_第二十天课程:Section9 —》Data Guard _ DATA GUARD 搭建/DATA GUARD 管理
注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...
- OCM_第十九天课程:Section9 —》Data Guard _ DATA GUARD 原理/DATA GUARD 应用/DATA GUARD 搭建
注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...
- 关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
随机推荐
- Ubuntu 16.04安装UML工具StarUML 2
StarUML 2是一个商业软件,但是没有时间限制,就像Sublime Text 3一样.而且具有跨平台,支持Mac.Windows. 这个软件曾经08年的时候在老D的博客上有推荐过,参考:http: ...
- Sqlserver数据库发送邮件
目录 1. Sqlserver数据库发送邮件 1.1. 概念了解 1.2. 配置 1.3. 测试发送邮件 1.3.1. 代码测试 1.3.2. 工具测试 1.4. 查看邮件日志 1. Sqlserve ...
- Spring PropertyPlaceholderConfigure 载入配置文件
在開始这篇博客的主题之前,我们先来了解一下Spring配置文件以及包括的相关内容. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2 ...
- Androidbuttonshape形状资源码实现
1.项目Src下创建drawable 看文档Develop/API Guides/App Resources/Drawable/Shape Drawable 单词:corners : 角 ; gr ...
- 使用Charles进行网络抓包
一.安装Charles 二.使用 1.http抓包 1.1 现在我们默认是在进行iOS开发,首先确保iPhone和Mac是在同一个局域网下(连同一个WiFi).然后查看Mac的IP地址(打开网络偏好设 ...
- dotNet Core初学之创建第一个dotNetCore项目
首先创建解决方案dotNetCrazy 一.创建项目 1.这里选择.Net Core 选择ASP.NET Core Web 应用程序 名称暂且叫CoreCrazy 这里我们选择 web应用程序(模型视 ...
- J2SE基础:11.异常处理
1:异常的概念: 异常是程序在执行时发生的事件(异常发生在执行期间). 程序出现错误.打断原本的运行流程. 2:Java中处理异常. 在Java中.异常被封装成一个对象.(属性和方法) 3:异常产生 ...
- ci url 控制 查询 通过路由 控制返回 视图的结果
http://192.168.2.102/fastdatav/ChkUrl/daily/G8 http://192.168.2.102/fastdatav/ChkUrl/daily/ 放在 试图 控 ...
- 如何调试Node.js
Debugging Node.js with Chrome DevTools https://nodejs.org/en/docs/guides/debugging-getting-started/ ...
- 8-23 canvas专题
8-23 canvas专题-了解外部框架的使用 学习要点 掌握画布内容的导出的toDataURL()方法 了解外部框架的使用 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canv ...