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 ...
随机推荐
- hadoop2.2集群搭建问题只能启动一个datanode问题
按照教程http://cn.soulmachine.me/blog/20140205/搭建总是出现如下问题: 2014-04-13 23:53:45,450 INFO org.apache.hadoo ...
- Mybatis中insert中返回主键ID的方法
<insertid=“doSomething"parameterType="map"useGeneratedKeys="true"keyProp ...
- Windows Update 的工具
Windows Update MiniTool 是一款管理 Windows Update 的工具,可以取得微軟 Windows 修補程式更新包,Windows Update 是我們用來升級系統的元件, ...
- 《软件project》——编码
编码的目的是使用选定的程序设计语言,把模块的过程描写叙述翻译为用该语言书写的源程序. 源程序应该正确可靠.简明清晰,并且具有较高的效率.在编程的步骤中,要把软件具体设计的表达式翻译成为编程语言的 ...
- 『NSOperation、NSOperationQueue』详解
1. NSOperation.NSOperationQueue 简介 NSOperation.NSOperationQueue 是苹果提供给我们的一套多线程解决方案.实际上 NSOperation.N ...
- easyUI里的checkbox编辑
数据源如果有布尔值,那么在UI里,最合适的控件应该就是checkbox了. easyUI的datagrid中,列的checkbox酱紫设置: {field:'status',title:'Status ...
- gdb 8.0.1连接qemu时,出现“Remote 'g' packet reply is too long”
1 原因 “Note that other tutorials also add a "-S" parameter so QEMU starts the kernel stoppe ...
- vijos - P1077克隆龙 (找规律 + 指数型母函数 + python)
P1077克隆龙 Accepted 标签:[显示标签] 描写叙述 如今龙的克隆已成为可能,龙基因由ACTG字母组成,而龙的基因有例如以下特点: 1.A在基因中的出现为偶数次(包含0): 2.C的情况也 ...
- go6---slice切片
package main /* 切片Slice 其本身并不是数组,它指向底层的数组 作为变长数组的替代方案,可以关联底层数组的局部或全部 为引用类型 可以直接创建或从底层数组获取生成 使用len()获 ...
- RK3288 6.0 双屏异显,横屏+竖屏【转】
本文转载自:http://blog.csdn.net/clx44551/article/details/78215730?locationNum=8&fps=1 RK3288 6.0 双屏异显 ...