react multi carousel
2.5.4
可以使用生产的，轻巧的完全可定制的可反应旋转木制组件，该组件支持多个项目和SSR（服务器端渲染）。
我们正在朝着该组件3.0版的3.0版中非常兴奋的旅程，该版本将完全在挂钩/上下文中重写。这意味着捆绑尺寸较小，性能提高和更容易自定义组件以及更多的好处。
如果您可以在自己的空闲时间进行此开源工作，尤其是在这次Covid-19危机期间，这将意味着您的意义很大。
如果您认真使用此组件，请捐款或与您的经理交谈，因为该项目也会增加您的收入。它将帮助我们制作发布，修复错误，更快，更好地满足新功能请求。
成为支持您的徽标/图像在GitHub上的徽标/图像的支持者/赞助商，并具有指向您网站的链接。
非常感谢Browserstack让维护者使用他们的服务来调试浏览器问题。
捆绑大小。 2.5kb
文档在这里。
SSR的演示https://reeact-multi-carousel.now.sh/
尝试禁用JavaScript以测试它是否在服务器端呈现。
GitHub的SSR代码。
在Github上为文档编码。
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
GitHub的SSR代码。
这是用于检测用户设备类型替代的库的更轻版本
您可以选择仅在服务器端将其捆绑。
import Carousel from "react-multi-carousel" ;
import "react-multi-carousel/lib/styles.css" ;
const responsive = {
superLargeDesktop : {
// the naming can be any, depends on you.
breakpoint : { max : 4000 , min : 3000 } ,
items : 5
} ,
desktop : {
breakpoint : { max : 3000 , min : 1024 } ,
items : 3
} ,
tablet : {
breakpoint : { max : 1024 , min : 464 } ,
items : 2
} ,
mobile : {
breakpoint : { max : 464 , min : 0 } ,
items : 1
}
} ;
< Carousel responsive = { responsive } >
< div > Item 1 </ div >
< div > Item 2 </ div >
< div > Item 3 </ div >
< div > Item 4 </ div >
</ Carousel > ; import Carousel from "react-multi-carousel" ;
import "react-multi-carousel/lib/styles.css" ;
const responsive = {
desktop : {
breakpoint : { max : 3000 , min : 1024 } ,
items : 3 ,
slidesToSlide : 3 // optional, default to 1.
} ,
tablet : {
breakpoint : { max : 1024 , min : 464 } ,
items : 2 ,
slidesToSlide : 2 // optional, default to 1.
} ,
mobile : {
breakpoint : { max : 464 , min : 0 } ,
items : 1 ,
slidesToSlide : 1 // optional, default to 1.
}
} ;
< Carousel
swipeable = { false }
draggable = { false }
showDots = { true }
responsive = { responsive }
ssr = { true } // means to render carousel on server-side.
infinite = { true }
autoPlay = { this . props . deviceType !== "mobile" ? true : false }
autoPlaySpeed = { 1000 }
keyBoardControl = { true }
customTransition = "all .5"
transitionDuration = { 500 }
containerClass = "carousel-container"
removeArrowOnDeviceType = { [ "tablet" , "mobile" ] }
deviceType = { this . props . deviceType }
dotListClass = "custom-dot-list-style"
itemClass = "carousel-item-padding-40-px"
>
< div > Item 1 </ div >
< div > Item 2 </ div >
< div > Item 3 </ div >
< div > Item 4 </ div >
</ Carousel > ; 您可以通过自己的自定义箭头以所需的方式使其适合该位置。例如，在较小的屏幕上添加箭头查询以进行的箭头。
您的自定义箭头将收到由旋转木马（例如Currents）返回的道具/状态的列表，正在拖动或滑动正在进行中。
代码
const CustomRightArrow = ( { onClick , ... rest } ) => {
const {
onMove ,
carouselState : { currentSlide , deviceType }
} = rest ;
// onMove means if dragging or swiping in progress.
return < button onClick = { ( ) => onClick ( ) } /> ;
} ;
< Carousel customRightArrow = { < CustomRightArrow /> } /> ; 如果您不想要点或箭头，并且想要完全自定义控制功能并自己进行样式，这将非常有用。
代码
const ButtonGroup = ( { next , previous , goToSlide , ... rest } ) => {
const { carouselState : { currentSlide } } = rest ;
return (
< div className = "carousel-button-group" > // remember to give it position:absolute
< ButtonOne className = { currentSlide === 0 ? 'disable' : '' } onClick = { ( ) => previous ( ) } />
< ButtonTwo onClick = { ( ) => next ( ) } />
< ButtonThree onClick = { ( ) => goToSlide ( currentSlide + 1 ) } > Go to any slide </ ButtonThree >
</ div >
) ;
} ;
< Carousel arrows = { false } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel > 通过此道具将使旋转木箱容器外的按钮组渲染。这是使用React.RAGGMEMT完成的
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > 您可以通过自己的自定义点来替换默认点。
自定义点也可以是旋转木马物品的副本或图像。请参见这个示例
此示例的代码
您的自定义点将收到由旋转木马（例如Currents）传递给的道具/状态的列表，正在拖动或刷动。
代码
const CustomDot = ( { onClick , ... rest } ) => {
const {
onMove ,
index ,
active ,
carouselState : { currentSlide , deviceType }
} = rest ;
const carouselItems = [ CarouselItem1 , CaourselItem2 , CarouselItem3 ] ;
// onMove means if dragging or swiping in progress.
// active is provided by this lib for checking if the item is active or not.
return (
< button
className = { active ? "active" : "inactive" }
onClick = { ( ) => onClick ( ) }
>
{ React . Children . toArray ( carouselItems ) [ index ] }
</ button >
) ;
} ;
< Carousel showDots customDot = { < CustomDot /> } >
{ carouselItems }
</ Carousel > ; 通过此道具将使旋转木箱容器外的点使点。这是使用React.RAGGMEMT完成的
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > 部分显示下一个项目，如果您想向用户表明此旋转木马组件可刷新，这将非常有用，背后有更多项目。
这与“ Centermode”道具不同，因为它仅显示下一个项目。对于中心模板，它两者都显示。
const responsive = {
desktop : {
breakpoint : { max : 3000 , min : 1024 } ,
items : 3 ,
partialVisibilityGutter : 40 // this is needed to tell the amount of px that should be visible.
} ,
tablet : {
breakpoint : { max : 1024 , min : 464 } ,
items : 2 ,
partialVisibilityGutter : 30 // this is needed to tell the amount of px that should be visible.
} ,
mobile : {
breakpoint : { max : 464 , min : 0 } ,
items : 1 ,
partialVisibilityGutter : 30 // this is needed to tell the amount of px that should be visible.
}
}
< Carousel partialVisible = { true } responsive = { responsive } >
< ItemOne />
< ItemTwo / >
</ Carousel > 部分显示下一个项目和上一个项目。
< Carousel centerMode = { true } /> 这是一个回调函数，每次滑动时都会调用。
< Carousel
afterChange = { ( previousSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> 这是一个回调函数，每次都在滑动前调用。
< Carousel
beforeChange = { ( nextSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> 在以下情况下，它们非常有用：
< Carousel
beforeChange = { ( ) => this . setState ( { isMoving : true } ) }
afterChange = { ( ) => this . setState ( { isMoving : false } ) }
>
< a
onClick = { e => {
if ( this . state . isMoving ) {
e . preventDefault ( ) ;
}
} }
href = "https://w3js.com"
>
Click me
</ a >
</ Carousel > < Carousel beforeChange = { nextSlide => this . setState ( { nextSlide : nextSlide } ) } >
< div > Initial slide </ div >
< div
onClick = { ( ) => {
if ( this . state . nextSlide === 1 ) {
doVerySpecialThing ( ) ;
}
} }
>
Second slide
</ div >
</ Carousel > 在旋转木马上调用goToSlide功能时，默认情况下将运行回调。您可以通过将第二个参数传递到goToSlide.
this . Carousel . goToSlide ( 1 , true ) ; // Skips both beforeChange and afterChange
this . Carousel . goToSlide ( 1 , { skipBeforeChange : true } ) ; // Skips only beforeChange
this . Carousel . goToSlide ( 1 , { skipAfterChange : true } ) ; // Skips only afterChange 单击幻灯片，使幻灯片成为当前的幻灯片。
< Carousel focusOnSelect = { true } /> < Carousel ref = { ( el ) => ( this . Carousel = el ) } arrows = { false } responsive = { responsive } >
< ItemOne />
< ItemTwo />
</ Carousel >
< button onClick = { ( ) => {
const nextSlide = this . Carousel . state . currentSlide + 1 ;
// this.Carousel.next()
// this.Carousel.goToSlide(nextSlide)
} } > Click me < / button>当您像这样一个人自己自定义控制功能时，这非常有用
代码
例如，如果您左右给出旋转木马的填充，右填充右20px。而且您总共有5个项目，您可能需要做以下操作：
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | 姓名 | 类型 | 默认 | 描述 |
|---|---|---|---|
| 响应迅速 | object | {} | 在每个断点处显示的幻灯片数量 |
| DeviceType | string | '' | 仅在用于服务器端渲染的使用时将其传递，可以在示例文件夹中找到什么 |
| SSR | boolean | false | 与响应式和偏斜型prop结合使用 |
| Slidestoslide | Number | 1 | 多少个滑梯。 |
| 可拖动 | boolean | true | 可选禁用/启用拖放桌面 |
| 可滑 | boolean | true | 可选地禁用/启用手机上的滑动 |
| 箭头 | boolean | true | 隐藏/显示默认箭头 |
| RenderarrowswHendisabled | boolean | false | 允许箭头具有禁用属性，而不是不显示它们 |
| RemoveArrowondeviceType | string or array | '' | 隐藏在不同的断路点处的默认箭头，应与responsive道具一起使用。值可以是mobile ，也['mobile', 'tablet'], can be a string or array |
| CustomLeftarrow | jsx | null | 用自己的默认箭头替换默认箭头 |
| customRightrow | jsx | null | 用自己的默认箭头替换默认箭头 |
| CustomDot | jsx | 无效的 | 用自己的 |
| custombuttongroup | jsx | 无效的 | 如果您不想要箭头或点，完全自定义自己的控制功能 |
| 无限 | boolean | 错误的 | 在两个方向上启用无限滚动。旋转木马的物品被克隆在DOM中以实现这一目标。 |
| 最小值 | number | 50 | 拖动 /滑动的距离量以移至下一个幻灯片。 |
| 换取后 | function | null | 每次滑动后的回调。 |
| beforechange | function | null | 每次滑动之前的回调。 |
| SliderClass | string | 'react-multi-carousel-track' | 内部滑块Div的CSS类，使用它来样式自己的曲目列表。 |
| ItemClass | string | '' | 旋转木马项目的CSS课程，使用它来设计自己的旋转木马物品。例如，添加左衬垫和填充右 |
| contionerclass | string | 'react-multi-carousel-list' | 用它来设计整个容器。例如，添加填充以允许“点”或“箭头”进入其他地方而不会溢出。 |
| DotlistClass | string | 'react-multi-carousel-dot-list' | 用它来样式点列表。 |
| 键盘control | boolean | true | 使用键盘导航到下一个/上一个幻灯片 |
| 自动播放 | boolean | false | 自动播放 |
| Autoplayspeed | number | 3000 | 单位是MS |
| Showdots | boolean | false | 隐藏默认点列表 |
| RenderDotsoutside | boolean | false | 在容器外显示点 |
| 偏见 | boolean | string | false |
| 定制转机 | string | transform 300ms ease-in-out | 滑动时配置自己的呼吸器 |
| 过渡化 | `数字 | 300 | 该设备是MS，如果您使用的是自定义发行，请确保将持续时间放在此处，因为调整大小的工作需要。 |
| FocusOnselect | boolean | false | 单击幻灯片，使幻灯片成为当前的幻灯片。 |
| Centermode | boolean | false | 部分显示下一个项目和上一个项目。 |
| 额外的传输 | number | 0 | 从当前的转变。 |
| 应该resetautoplay | boolean | true | 单击下一步时重置自动播放，上一个按钮和点 |
| 倒带 | boolean | false | 如果未启用无限并明确播放自动播放，则该选项在达到末端时会倒带转盘（轻量级无限模式替代方案而无需克隆）。 |
| rewindwithanimation | boolean | false | 当将旋转木马倒回开始时，这决定倒带过程是否应立即或过渡。 |
| RTL | boolean | false | 将轮播的方向设置为右至左 |
？ Yi Zhuang
请阅读https://github.com/yizhuang/reeact-multi-carousel/blob/master/contributing.md
提交功能请求问题或提交公关。
如果该项目可以帮助您减少开发时间，您可以给我一杯咖啡:)
由于所有贡献的人，该项目的存在。 [贡献]。
成为财务贡献者，并帮助我们维持社区。 [贡献]
与您的组织一起支持这个项目。您的徽标将在此处显示您网站的链接。 [贡献]
谢谢这些好人（表情符号钥匙）：
Truong Hoang Dung | Tobias Pinnekamp | 拉金德兰·纳达尔（Rajendran Nadar） | Abhinav Dalal | 奥斯卡·巴雷特（Oscar Barrett） | Neamat Mim | 马丁·雷鲁（Martin Retou） |
本·霍奇森 | Faizan Ul Haq | Adrian3pg | Kuznetsovgm | Vadim Filimonov | 罗曼 | 莱利·伦德奎斯特（Riley Lundquist） |
Paul Deshaies Jr | Pavel Mikheev | nev1d | 疯狂的vmen | Jiro Farah |
该项目遵循全企业规范。欢迎任何形式的贡献！
