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 |
該項目遵循全企業規範。歡迎任何形式的貢獻！
