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. CSS3的animation功能

    旋转动画 <img src="https://facebook.github.io/react/img/logo.svg" class="App-logo" ...

  2. scp、paramiko、rsync复制文件的区别

    1.paramiko只能复制文件,而不能复制目录,复制时,已经存在的会被覆盖;要想复制目录,只能把目录里的文件一个一个复制过去 2.scp可以复制文件.目录,复制时,已经存在的会被覆盖:可以模糊匹配: ...

  3. JS获取地址栏并拼接參数

    比方地址栏是这种:http://www.aa.com/detail.aspx?code=1&start=2014-12-01&end=2014-12-23&name=abc 要 ...

  4. MapReduce的Reduce side Join

    1. 简单介绍 reduce side  join是全部join中用时最长的一种join,可是这样的方法可以适用内连接.left外连接.right外连接.full外连接和反连接等全部的join方式.r ...

  5. 用R进行微博分析的初步尝试

    新浪微博如火如荼,基于微博的各种应用也层出不穷. 有一种共识似乎是:微博数据蕴含着丰富的信息,加以适当的挖掘.可以实现众多商业应用.恰好社会网络分析也是我之前有所了解并持续学习的一个领域,因此我做了微 ...

  6. Python全栈

    Python基础 Python基础01 Hello World! Python基础02 基本数据类型 Python基础03 序列 Python基础04 运算 Python基础05 缩进和选择 Pyth ...

  7. 华为OJ:数字颠倒

    将数字转成一个字符串即可了. import java.util.Scanner; public class convertNumber { public static void main(String ...

  8. [计算机故障]toshiba笔记本计算机无法正常启动,每次均需要按ESC

    同事一台toshiba的笔记本计算机,无法正常启动,每次均需要按ESC才可以正常后续动作. 之后系统可以正常工作. 排查过程: 1.尝试恢复bios到默认配置:不行,而且不小心搞了个蓝屏,还好记得是“ ...

  9. 公钥加密,摘要算法MD5,SSH相关概念

    1.公钥加密,又叫非对称加密,一般指的是用一组密钥来保证通信的安全.(公钥,私钥)成对存在且惟一,典型的公钥算法有 RSA(计算出的是1024位,128字节),顺便提一下与公钥加密算法相对应的就是传统 ...

  10. 一张图轻松记住PHP的*类*以及private和protected的区别

    上图概要的说了下php类的特性,类的方法同属性类似. 图中B类继承自A类,B是A的子类,$x和$y都是B的实例化对象. 1. 原型引用:[A::    . B::   ],仅限public stati ...