react multi carousel
2.5.4
生産準備が整った、複数のアイテムとSSR（サーバー側のレンダリング）をサポートするロックを揺るがす生産対応の完全にカスタマイズ可能な反応カルーセルコンポーネント。
私たちは、フック/コンテキストで完全に書き直されるこのコンポーネントのバージョン3.0に向けて非常に興奮した旅をしています。これは、バンドルサイズが小さく、パフォーマンスの改善とコンポーネントのカスタマイズが容易であり、さらに多くの利点を意味します。
このプロジェクトのさらなる開発に向けて支援を提供できれば、特にこのCovid-19の危機の間にこのオープンソースの作業を行うことができれば、それは非常に意味があります。
このコンポーネントを真剣に使用している場合は、このプロジェクトが収入を増やすため、マネージャーに寄付または相談してください。これは、リリースを行い、バグを修正し、新機能のリクエストをより迅速かつより良く満たすのに役立ちます。
バッカー/スポンサーになって、サイトへのリンクを使用してGitHubのReadMeでロゴ/画像を取得します。
メンテナーにサービスを使用してブラウザの問題をデバッグできるようにしてくれたBrowserstackに感謝します。
バンドルサイズ。 2.5kb
ドキュメントはこちらです。
SSRのデモhttps://react-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 > ; 独自のカスタム矢印を渡して、ポジションについても同じようにすることができます。たとえば、小さな画面で下に移動する矢印のメディアクエリを追加します。
カスタム矢印には、電流などのカルーセルが渡された小道具/状態のリストが届き、ドラッグまたはスワイプが進行中です。
コード
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.Fragmentを使用して行われます
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > 独自のカスタムドットを渡して、デフォルトのドットを置き換えることができます。
カスタムドットは、カルーセルアイテムのコピーまたは画像でもあります。これの例を参照してください
この例のコード
カスタムドットには、Crurentsideなどのカルーセルが渡され、ドラッグまたはスワイプが進行中の小道具/状態のリストを受け取ります。
コード
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.Fragmentを使用して行われます
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > 次のアイテムを部分的に示します。これは、このカルーセルコンポーネントがスワイプ可能であり、その背後に多くのアイテムがあることをユーザーに示したい場合に非常に便利です。
これは、次のアイテムのみが表示されるため、「センターモード」プロップとは異なります。センターモードの場合、両方が表示されます。
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 > CarouselでgoToSlide関数を呼び出すと、コールバックはデフォルトで実行されます。 2番目のパラメーターを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 | レスポンシブおよびDeviceType 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 | デフォルトの矢印を独自の矢印を置き換えます |
| CustomRightArrow | jsx | null | デフォルトの矢印を独自の矢印を置き換えます |
| customdot | jsx | ヌル | デフォルトのドットを独自のドットに置き換えます |
| custombuttongroup | jsx | ヌル | 矢印やドットが必要ない場合は、独自の制御機能を完全にカスタマイズします |
| 無限 | boolean | 間違い | 両方向に無限のスクロールを有効にします。カルーセルアイテムは、これを達成するためにDOMにクローニングされています。 |
| MinimutTouchDrag | number | 50 | 次のスライドに移動するために、ドラッグ /スワイプする距離の量。 |
| afterchange | function | null | 毎回スライドした後のコールバック。 |
| beforechange | function | null | 毎回スライドする前のコールバック。 |
| スライダークラス | string | 'react-multi-carousel-track' | Inner Slider DivのCSSクラス、これを使用して独自のトラックリストをスタイリングします。 |
| アイテムクラス | string | '' | CarouselアイテムのCSSクラス、これを使用して独自のカルーセルアイテムをスタイリングします。たとえば、パディング左とパディング右を追加します |
| containclass | string | 'react-multi-carousel-list' | これを使用して、コンテナ全体をスタイリングします。たとえば、パディングを追加して、「ドット」または「矢印」をオーバーフラウンせずに他の場所に移動できるようにします。 |
| dotlistclass | string | 'react-multi-carousel-dot-list' | これを使用してドットリストをスタイリングします。 |
| KeyboardControl | boolean | true | キーボードを使用して、次/前のスライドに移動します |
| オートプレイ | boolean | false | オートプレイ |
| オートプレイスピード | number | 3000 | ユニットはMSです |
| ショードット | boolean | false | デフォルトのドットリストを非表示にします |
| renderdotsoutside | boolean | false | コンテナの外にドットを表示します |
| 部分的に把握できます | boolean | string | false |
| カスタムトランジション | string | transform 300ms ease-in-out | スライド時に独自のアナメーションを構成します |
| 遷移測定 | `番号 | 300 | ユニットはMSです。CustomTransitionを使用している場合は、これが機能するために必要であるため、ここに期間を確実に配置してください。 |
| FocosonSelect | boolean | false | クリック時にスライドに移動し、スライドを現在のスライドにします。 |
| センターモード | boolean | false | 次のアイテムと以前のアイテムが部分的に表示されます。 |
| 追加のtransfrom | number | 0 | 現在のものへの追加のトランス。 |
| Sefresetautoplay | boolean | true | 次のボタン、ドットをクリックすると、自動再生をリセットします |
| 巻き戻し | boolean | false | Infiniteが有効にならず、自動再生が明示的にある場合、このオプションは端に達したときにカルーセルを巻き戻します（クローニングせずに軽量の無限モードの代替）。 |
| 巻き戻し | boolean | false | カルーセルを最初に巻き戻すとき、これは、巻き戻しプロセスが瞬時または移行するかどうかを決定します。 |
| RTL | boolean | false | カルーセルの方向を右から左に設定します |
？ yi zhuang
https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.mdをお読みください
機能要求のために問題を送信するか、PRを送信します。
このプロジェクトが開発までの時間を短縮するのに役立つ場合は、私に一杯のコーヒーを与えることができます:)
このプロジェクトは、貢献するすべての人々のおかげで存在します。 [貢献する]。
財政的な貢献者になり、コミュニティを維持するのを手伝ってください。 [貢献する]
組織でこのプロジェクトをサポートしてください。あなたのロゴは、あなたのウェブサイトへのリンクでここに表示されます。 [貢献する]
これらの素晴らしい人々に感謝します（絵文字キー）：
Truong Hoang Dung | Tobias Pinnekamp | ラジェンドランナダール | Abhinav Dalal | オスカー・バレット | neamat mim | マーティン・レトロ |
ベン・ホジソン | Faizan ul haq | Adrian3pg | kuznetsovgm | Vadim Filimonov | ロマン | ライリー・ルンドキスト |
ポール・デシャイズ・ジュニア | Pavel Mikheev | NEV1D | マッド・ヴァンメン | ジロファラー |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
