react轮播图组件react-slider-light

leonardofed 发布于2019-08-26 11:47 / 2308人阅读

摘要：首先说一下，如果大家喜欢可直接收藏我这个项目的地址。因为有可能上版本更新了，但是这边就不更新了。如果有什么问题，可以随时问，建议不要或者私信，直接上提，能把问题记录下来，方便其他人查找。

首先说一下，如果大家喜欢可直接收藏我这个项目的github地址。https://github.com/951565664/... 因为有可能github上版本更新了，但是这边就不更新了。如果有什么问题，可以随时问，建议不要QQ或者私信，直接上github提issues，能把问题记录下来，方便其他人查找。

react-slider-light

a lightweight Slider component built with react.
一个轻量级的 react 轮播组件

Table of Contents

Features特性

Demos演示

Getting Started快速开始

Install

Use

Development

Props

Features

Easy to use 使用简单: detailed documents and examples 详细的文档和例子

Support custom 支持自定义: Can change style,such as dots and arrows 能够改变样式位置，例如分页符和箭头

Demos

Demos and codes 演示和代码

Getting Started Install

Important: be sure that you have installed react.

重要提醒：请确保先安装了 react.

# Install
$ npm install react-slider-light

Use

import React, { Component } from "react";
import Slider from "react-slider-light";

export default class Wrapper extends Component {
    render(){
        return 
            page1
            page2
        
    }
}

Development

Want to run demos locally 本地启动演示

git clone https://github.com/951565664/react-slider-light.git
cd react-slick
npm install
npm start
open http://localhost:8080

more example 更多例子

Props

Props	Type	Default Value	Description	Required
defaultSliderIndex	number	0	默认初始滑动开始位置	No
sliderIndex	number	0	控制滑动的页面	No
delay	number	1800	延迟的时间 (ms)	No
speed	number	500	延迟的时间 (ms)	No
sliderToShow	number	1	每次展示页面	No
sliderToScroll	number	1	每次滚动的页面数量	No
autoPaly	bool	true	是否自动开始轮播	No
isDots	bool	false	是否需要dots	No
dots	enum or func	circle	dots 的种类，值为circle,gallery,diamond,square,({index,item})=>{ return ReactDom}	No
dotStyle	object	{listStyle: "none",display: "inline-block",margin: "0px 8px",cursor: "pointer",overflow:"hidden"}	dots 的样式
dotX	string or number	center	dot的水平位置，可以是right left center这样的字符串 ,也可以是 30 -20, 表示距离左边的像素，负数表示距右边的像素	No
dotY	string or number	middle	dot的垂直位置，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素	No
isArrows	bool	false	是否需要箭头	No
arrowRender	func	null	箭头的渲染函数 (type)=>{//type:"backward " ."forward"}	No
arrowsY	string or number	middle	arrows的垂直位置，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素	No

Filing issues

Please replicate your issue with CodeSandbox template and post it along with issue to make it easy for me to debug.

Change Log 1.0.1

2018-2-15

2.0.3

2018-2-25

测试垂直

3.0.1

2018-2-25

修改bug

3.1.0

2018-6-19

增加滚动到最后一张时，取消动画，即立刻回到第一张

FAQ Will be updated regularly? 是否会经常更新

Of course, at least 4 hours a week will be taken out for maintenance and development
当然会，至少每周会抽出4个小时来维护和开发

Does it support IE8?是否支持 IE 8

No. 想多了老铁

Next Add some basic function.增加一些基本功能

Scroll vertically 垂直滚动

gallery 缩略图

Want more?

The author"s other projects 作者的其他项目

License

MIT

GPU云服务器云服务器 react实现轮播图轮播图写轮播图将轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107558.html

面试官(6): 写过『通用前端组件』吗?

摘要：很久没上掘金发现草稿箱里存了好几篇没发的文章最近梳理下发出来往期面试官系列如何实现深克隆面试官系列的实现面试官系列前端路由的实现面试官系列基于数据劫持的双向绑定优势所在面试官系列你为什么使用前端框架前言设计前端组件是最能考验开发者基本功的测很久没上掘金,发现草稿箱里存了好几篇没发的文章,最近梳理下发出来往期面试官系列(1): 如何实现深克隆面试官系列(2): Event Bus...

waltr 2019-05-27 17:43 评论0 收藏0
React实现轮播图效果的代码

　　　React实现轮播图效果如下：　　终于可以用上react-slick组件，安装：　　npminstallreact-slick--save 　　npminstallslick-carousel　　当安装完后，就要导入css文件，主要是为了使用轮播图的页面上：　　importSliderfrom'react-slick'; 　　import'slick-carousel...

3403771864 2022-10-27 21:40 评论0 收藏0
将轮播图组件化

摘要：点击左箭头判断是否到边缘最后给轮播图添加自动播放功能，即利用定时器每秒触发一次右箭头的点击事件。将返回的定时器保存到实例属性中，以便在鼠标悬停的时候停止自动轮播。这是一个轮播图组件，你可以直接下载使用，这里是代码地址，需要传入容器的id和图片地址，支持Internet Explorer 10+、Firefox、Opera和Chrome等现代浏览器。这里是原文地址。之前写一些...

MageekChiu 2019-08-01 17:20 评论0 收藏0
将轮播图组件化

摘要：点击左箭头判断是否到边缘最后给轮播图添加自动播放功能，即利用定时器每秒触发一次右箭头的点击事件。将返回的定时器保存到实例属性中，以便在鼠标悬停的时候停止自动轮播。这是一个轮播图组件，你可以直接下载使用，这里是代码地址，需要传入容器的id和图片地址，支持Internet Explorer 10+、Firefox、Opera和Chrome等现代浏览器。这里是原文地址。之前写一些...

junbaor 2019-08-20 18:30 评论0 收藏0
将轮播图组件化

摘要：点击左箭头判断是否到边缘最后给轮播图添加自动播放功能，即利用定时器每秒触发一次右箭头的点击事件。将返回的定时器保存到实例属性中，以便在鼠标悬停的时候停止自动轮播。这是一个轮播图组件，你可以直接下载使用，这里是代码地址，需要传入容器的id和图片地址，支持Internet Explorer 10+、Firefox、Opera和Chrome等现代浏览器。这里是原文地址。之前写一些...

geekidentity 2019-08-29 13:04 评论0 收藏0