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

  1. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  2. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  3. 七、Vue组件库:Element、Swiper(轮播专用组件)

    一.vue的Element组件库 官网:https://element.eleme.cn/#/zh-CN 1.1安装 推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...

  4. taro 自定义 轮播图组件

    1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...

  5. 微信小程序之 Swiper(轮播图)

    1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...

  6. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  7. 03 uni-app框架学习:轮播图组件的使用

    1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...

  8. Vue2 轮播图组件 slide组件

    Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...

  9. vue移动音乐app开发学习(三):轮播图组件的开发

    本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...

随机推荐

  1. 二进制方式安装mysql5.7.24

    1.实验环境 [root@test-mysql ~]# cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 2.浏览器下载mysq ...

  2. Truck Adblue Emulator For SCANIA

    For sale online Truck Adblue Emulator For SCANIA See the price Where to buy? Truck Adblue Emulator F ...

  3. 5.list集合添加姓名{张三,李四,王五,二丫,钱六,孙七},将二丫替换为王小丫, 写入到"D:\\stuinfo.txt"

    package cn.it.text; import java.io.FileWriter; import java.io.IOException; import java.util.ArrayLis ...

  4. 【模板】ST表

    给定一个长度为 \(N\) 的数列,和 \(M\) 次询问,求出每一次询问的区间\([l,r]\)内数字的最大值. 说明 对于30%的数据,满足: \(1 \leq N, M \leq 10 , 1≤ ...

  5. 关于springMVC的细节

    1. Controller的生命周期 Spring框架默认创建的对象是单例.所以业务控制器是一个单例对象. 单例对象带来的问题,就是请求的数据如果放在成员变量上面,会相互影响. 请求使用同一个对象处理 ...

  6. 就是要用Vim写Vue

    Vim关于Vue的生态链还是很少,不过凑活凑活还是能用的. 缩进 缩进采用的是两个空格,.vimrc配置: au BufNewFile,BufRead *.html,*.js,*.vue set ta ...

  7. 直方图均衡化与Matlab代码实现

    昨天说了,今天要好好的来解释说明一下直方图均衡化.并且通过不调用histeq函数来实现直方图的均衡化. 一.直方图均衡化概述 直方图均衡化(Histogram Equalization) 又称直方图平 ...

  8. 单元测试系列之八:Sonar 数据库表关系整理一(续)

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 简介:Sonar平台是目前较为流行的静态代码扫描平台,为了便于使用以及自己二次开发,有必要对它的数据库结构进行学习 ...

  9. Python3 tkinter基础 TK title 设置窗体的标题

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. 【codeforces 242E】XOR on Segment

    [原题题面]传送门 [题面翻译]传送门 [解题思路] 操作涉及到区间求和和区间异或,考虑到异或操作,我们对每个数二进制分解. 把每一位单独提出来做,异或要么取反要么变为不变,对于每一位建一颗线段树,那 ...