reactjs-swiper react轮播图组件基于swiper
react轮播图组件基于swiper
demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html
1. 下载安装
npm install reactjs-swiper
2.使用
import React, {Component} from 'react';
import {render} from 'react-dom';
import ReactSwiper from 'reactjs-swiper';
import './sass/example.scss'; // 自定义 css const ReactSwiperExample = () => {
const items = [{
image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci1.jpg',
title: '图片1',
link: 'http://jd.com'
}, {
image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci2.jpg',
title: '图片2',
}, {
image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci3.jpg',
title: '图片3',
link: 'http://jd.com'
}, {
image: 'http://alloyteam.github.io/AlloyTouch/example/asset/ci4.jpg',
title: '图片4',
}]; const swiperOptions = {
preloadImages: true,
autoplay: 4000,
autoplayDisableOnInteraction: false
};
return (
<ReactSwiper swiperOptions={swiperOptions} showPagination items={items}
className="swiper-example" />
);
}; render(
<ReactSwiperExample />, document.getElementById('layout')
);
3.配置项
配置项 | 数据类型 | 功能 |
className | string | 自定义 className |
showPagination | bool | 是否显示分页按钮 |
options | object | Swiper 配置选项 |
items | array | 轮播图记录数 |
reactjs-swiper react轮播图组件基于swiper的更多相关文章
- vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...
- Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...
- 七、Vue组件库:Element、Swiper(轮播专用组件)
一.vue的Element组件库 官网:https://element.eleme.cn/#/zh-CN 1.1安装 推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...
- taro 自定义 轮播图组件
1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...
- 微信小程序之 Swiper(轮播图)
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 03 uni-app框架学习:轮播图组件的使用
1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...
- Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
- vue移动音乐app开发学习(三):轮播图组件的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
随机推荐
- 二进制方式安装mysql5.7.24
1.实验环境 [root@test-mysql ~]# cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 2.浏览器下载mysq ...
- Truck Adblue Emulator For SCANIA
For sale online Truck Adblue Emulator For SCANIA See the price Where to buy? Truck Adblue Emulator F ...
- 5.list集合添加姓名{张三,李四,王五,二丫,钱六,孙七},将二丫替换为王小丫, 写入到"D:\\stuinfo.txt"
package cn.it.text; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayLis ...
- 【模板】ST表
给定一个长度为 \(N\) 的数列,和 \(M\) 次询问,求出每一次询问的区间\([l,r]\)内数字的最大值. 说明 对于30%的数据,满足: \(1 \leq N, M \leq 10 , 1≤ ...
- 关于springMVC的细节
1. Controller的生命周期 Spring框架默认创建的对象是单例.所以业务控制器是一个单例对象. 单例对象带来的问题,就是请求的数据如果放在成员变量上面,会相互影响. 请求使用同一个对象处理 ...
- 就是要用Vim写Vue
Vim关于Vue的生态链还是很少,不过凑活凑活还是能用的. 缩进 缩进采用的是两个空格,.vimrc配置: au BufNewFile,BufRead *.html,*.js,*.vue set ta ...
- 直方图均衡化与Matlab代码实现
昨天说了,今天要好好的来解释说明一下直方图均衡化.并且通过不调用histeq函数来实现直方图的均衡化. 一.直方图均衡化概述 直方图均衡化(Histogram Equalization) 又称直方图平 ...
- 单元测试系列之八:Sonar 数据库表关系整理一(续)
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 简介:Sonar平台是目前较为流行的静态代码扫描平台,为了便于使用以及自己二次开发,有必要对它的数据库结构进行学习 ...
- Python3 tkinter基础 TK title 设置窗体的标题
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 【codeforces 242E】XOR on Segment
[原题题面]传送门 [题面翻译]传送门 [解题思路] 操作涉及到区间求和和区间异或,考虑到异或操作,我们对每个数二进制分解. 把每一位单独提出来做,异或要么取反要么变为不变,对于每一位建一颗线段树,那 ...