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的更多相关文章

  1. Swiper说明&&API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  2. Vue整合swiper报错Could not compile template .....swiper\dist\css\swiper.css解决办法

    问题描述 今天做一个前端项目,安装幻灯片插件vue-awesome-swiper后 运行npm run dev 后报错如下: `ERROR Could not compile template E:\ ...

  3. Datasets for Data Mining and Data Science

    https://github.com/mattbane/RecommenderSystem http://grouplens.org/datasets/movielens/ KDDCUP-2012官网 ...

  4. 【转】浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!

    所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Tag, ...

  5. 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. ...

  6. 初探 spring data(一)--- spring data 概述

    由于自己一个项目要用多到Sql与NoSql两种截然不同的数据结构,但在编程上我希望统一接口API,让不同类型的数据库能在相同的编程接口模式下运作.于是找了一个spring的官网,发现一个spring ...

  7. OCM_第二十天课程:Section9 —》Data Guard _ DATA GUARD 搭建/DATA GUARD 管理

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

  8. OCM_第十九天课程:Section9 —》Data Guard _ DATA GUARD 原理/DATA GUARD 应用/DATA GUARD 搭建

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

  9. 关于 Data URI Scheme -- data:image/jpg;base64

    转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...

随机推荐

  1. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

  2. 【剑指Offer学习】【面试题65:滑动窗体的最大值】

    题目:给定一个数组和滑动窗体的大小,请找出全部滑动窗体里的最大值. 举例说明 比如,假设输入数组{2,3,4,2,6,2,5,1}及滑动窗体的大小.那么一共存在6个滑动窗体,它们的最大值分别为{4,4 ...

  3. SQL Server游标 C# DataTable.Select() 筛选数据 什么是SQL游标? SQL Server数据类型转换方法 LinQ是什么? SQL Server 分页方法汇总

    SQL Server游标   转载自:http://www.cnblogs.com/knowledgesea/p/3699851.html. 什么是游标 结果集,结果集就是select查询之后返回的所 ...

  4. .net Core使用Orcle官方驱动连接数据库 C#参考教程 http://www.csref.cn

    .net Core使用Orcle官方驱动连接数据库   最近在研究.net Core,因为公司的项目用到的都是Oracle数据库,所以简单试一下.net Core怎样连接Oracle. Oracle官 ...

  5. mybatis之if else语句

    最近项目中遇到一个相同表设计,但是表名不同的sql语句操作. 在遇到这样的情况时候可以用一下方式: <choose> <when test=""> //.. ...

  6. gradle使用笔记

    1 gradle user home 默认情况下是-/.gradle目录.可以使用gradle -g [directory]修改. 1.1 ./gradle/caches gradle下载的所有的依赖 ...

  7. http使用代理

    直接上代码: HttpUrlConnection使用代理: private static HttpURLConnection getConnection(URL url, String method, ...

  8. poj1286 Necklace of Beads—— Polya定理

    题目:http://poj.org/problem?id=1286 真·Polya定理模板题: 写完以后感觉理解更深刻了呢. 代码如下: #include<iostream> #inclu ...

  9. [odb-users] query results not being cached?

    Burton, Craig crburton at tnsi.comWed Jun 6 13:58:03 EDT 2012 Previous message: [odb-users] query re ...

  10. bzoj 1646: [Usaco2007 Open]Catch That Cow 抓住那只牛【bfs】

    满脑子dp简直魔性 模拟题意bfs转移即可 #include<iostream> #include<cstdio> #include<queue> using na ...