islider结合react的简单实用
我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动
首先需要 npm install islider.js --save
让后在jsx文件头部引入一下文件
require('islider.js/build/iSlider.plugin.dot.js');
require('islider.js/build/iSlider.css');
let iSlider = require('islider.js/build/iSlider.js');
然后初始化islider
initISlider() {
let data = [
{
content: '<div class="item">相册</div>'
},
{
content: (function () { var dom = document.createElement('div'); dom.innerHTML = 'Element'; dom.style.cssText = 'font-size:3em;color:rgb(230, 230, 63);'; return dom; })()
},
{
content: '<div class="item">视频</div>'
}
];
this._islider = new iSlider({
dom: this.hotList, // iSlider-wrapper
data, // 显示数据 {Array}
// isVertical: true, // 向上滑动
isLooping: true, // 循环播放模式 {Boolean} 默认false
isAutoplay: false, // 是否自动播放 {Boolean} 默认false
duration: 2000, // 停留时间, precondition: isAutoplay === true
// animateType: 'rotate',
animateTime: 400, // 动画过度时间 {Number}
animateEasing: 'ease-in-out', // 动画过度曲线 // initIndex: 0, // 开始图片索引
plugins: [['dot', {locate: 'relative'}]] // 官方提供插件引入, [点], 文档不全
});
}
初始化之后就可以在生命周期里面调用了
componentDidMount() {
this.initISlider();
}
render() {
return (
<div className='homePage-footer' ref={c => this.hotList = c}>
</div>
);
}
详细应用参考官方文档
islider结合react的简单实用的更多相关文章
- redux 的简单实用案例
redux 的简单实用案例 整体思想与结构 创建一个Action 创建一个Reducer 创建Store 在App组件开始使用 整体思想与结构 文件目录如下: 构建 action,通过创建一个函数,然 ...
- jQuery的几种简单实用效果
许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
- 简单实用的PHP防注入类实例
这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下 本文实例讲述了简单实用的PHP防注 ...
- php简单实用的操作文件工具类(创建、移动、复制、删除)
php简单实用好用的文件及文件夹复制函数和工具类(创建.移动.复制.删除) function recurse_copy($src,$dst) { // 原目录,复制到的目录 $dir = opend ...
- 基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
- C#_简单实用的翻页
简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...
- 简单实用的Windows命令(一)
前几天新买了一台笔记本电脑,使用了一下几个简单的查看电脑配置的命令,觉得非常的不错,在此记录一下 一:运行命令的方式有两种 1:使用快捷键WIN+R,然后在弹出的“运行”对话框中输入对应的命令 2:在 ...
- 简单实用的Windows命令(二)
昨天简单的记录了几个非常简单实用的Windows命令,不过我又想起来还有两个我在实际的工作中也是经常用到的命令——PING和IPCONFIG,不过我在工作中的使用都是非常简单的,用PING命令检测对应 ...
随机推荐
- Linux转发性能评估与优化(转发瓶颈分析与解决方式)
线速问题 非常多人对这个线速概念存在误解. 觉得所谓线速能力就是路由器/交换机就像一根网线一样. 而这,是不可能的.应该考虑到的一个概念就是延迟. 数据包进入路由器或者交换机,存在一个核心延迟操作,这 ...
- xml基本语法(2)
本节要点: 了解XML的文档声明 了解XML的元素.命名规则.属性.元素内容.处理指令等概念 1 XML文档声明 表示该文档是一个XML文档,以及遵循哪个XML版本的规范. 规范:<?xml 版 ...
- TableML-GUI篇(Excel编译/解析工具)
项目情况 本文接上篇TableML Excel编译/解析工具,本文主要介绍GUI工具的使用,及配置项,如果你想了解此工具更加详细的说明,请阅读上篇文章. 项目地址:https://github.com ...
- 管道设计CAD系统中重量重心计算
管道设计CAD系统中重量重心计算 eryar@163.com Abstract. 管道设计CAD系统中都有涉及到重量重心计算的功能,这个功能得到的重心数据主要用于托盘式造船时方便根据重心设置吊装配件. ...
- iOS 计时器三种定时器的用法NSTimer、CADisplayLink、GCD
原文:http://www.cocoachina.com/ios/20160919/17595.html DEMO链接
- iOS 5个Xcode开发调试技巧
转自Joywii的博客,原文:Four Tips for Debugging in XCode Like a Bro 1.Enable NSZombie Objects(开启僵尸对象) Enab ...
- linux命令(shell)
1.cat查看一个文件,linux默认bash 2.echo回显命令 3.ls 4.history历史记录,查看使用过的命令 5.根目录下文件目录 6.bin目录下内容多为应用程序和命令 7.boot ...
- html查看器android
1.android的API提供了访问网络的一个类HttpURLConnection 2.通过发送GET请求获取服务器返回的html代码 3.先看看布局文件,如下所示, <?xml version ...
- ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素
这一节我们来看看弹窗的位置和弹窗上能放什么. 先一句话总结: 位置:可以随便(点击时出现或者一直固定在某个位置),也可以指定位置 能放什么:四种,文字.媒体(图片等).表格.附件. [Part I 位 ...
- JDK8中JVM对类的初始化探讨
在<深入理解Java虚拟机>(第二版,周志明著)中,作者介绍了JVM必须初始化类(或接口)的五种情况,但是是针对JDK7而言的. 那么,在JDK8中,这几种情况有没有变化呢?(我猜测应该会 ...