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进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
随机推荐
- 浅谈USB驱动架构 转载
去年,老师让我分析基于HD3系统芯片的WindowsCE USB驱动的可行性.USB驱动非常庞大,多个软件层次相互交错,以及各种协议,USB系统对于一般人很难理解,我对其也只是理解一个大概,下面,我对 ...
- CAN自收自发问题小结
2011-12-02 21:59:23 流程图: CAN自收自发问题小结 1,地址如何确定? 答:51的片外扩展地址,R/W脚的电平会根据代码自动更改,不需要设置. 参考 单片机的外部存储器的 ...
- k8s构建镜像-基于centos的python环境+pip
FROM centos:7.4.1708 #维护者信息MAINTAINER by icdss # 标签LABEL version="1.0" # 安装依赖RUN yum -y up ...
- cf C题
题意:矩阵只包含0,1两种数字,给你一个矩阵A,另一个矩阵B,每一次可以从A中选出一个子矩阵,点击一次使得这个子矩阵的四个角的数字变成与原来相反的数,0变1,1变0.问你可不可以经过有限次的变换把矩阵 ...
- dom节点相关问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- CSS 图像精灵
图像精灵(Image Sprites) 图像精灵是放入一张单独的图片中的一系列图像. 包含大量图像的网页需要更长时间来下载,同时会生成多个服务器请求. 使用图像精灵将减少服务器请求数量并节约带宽. 图 ...
- .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)——转载
原文链接:https://blog.walterlv.com/post/dotnet-high-performance-reflection-suggestions.html ***** 大家都说反射 ...
- Chrom Firefox 非安全端口访问
使用Chrom Firefox 访问非安全端口 问题描述 Firefox 此网址已被限制 此网址使用了一个通常用于网络浏览以外目的的端口.出于安全原因,Firefox 取消了该请求. Chrome 无 ...
- Perl 正则匹配经验记录
0.正则匹配字典:http://www.cnblogs.com/itech/archive/2010/03/19/1689793.html 1.$/=">";重新定义字符串分 ...
- jquery AJAX数据传输路径写法~
$.post('{:url("index/index/logininfo")}',{'username':name,'password':pwd},function(data){ ...