react multi carousel
2.5.4
Produktionsbereitete, leichte, vollständig anpassbare React-Karussellkomponente, die Stecke mehrere Elemente und SSR (serverseitiges Rendering) unterstützt.
Wir sind auf einer sehr aufgeregten Reise in Richtung Version 3.0 dieser Komponente, die in Hooks/Kontext vollständig umgeschrieben wird. Dies bedeutet eine kleinere Bündelgröße, die Leistungsverbesserung und eine einfachere Anpassung der Komponente und so viel mehr Vorteile.
Es würde so viel bedeuten, wenn Sie Hilfe für die Weiterentwicklung dieses Projekts leisten könnten, da wir diese Open-Source-Arbeit in unserer eigenen Freizeit machen könnten, insbesondere in dieser Covid-19-Krise.
Wenn Sie diese Komponente ernsthaft verwenden, spenden oder mit Ihrem Manager sprechen, während dieses Projekt auch Ihr Einkommen erhöht. Es wird uns helfen, Veröffentlichungen zu erstellen, Fehler zu beheben und neue Funktionsanfragen schneller und besser zu erfüllen.
Werden Sie ein Unterstützer/Sponsor, um Ihr Logo/Bild auf unserem Readme auf GitHub mit einem Link zu Ihrer Website zu erhalten.
Vielen Dank an BrowsStack dafür, dass die Betreuer ihren Service nutzen können, um Browserprobleme zu debugieren.
Bündelgröße. 2,5 KB
Dokumentation ist hier.
Demo für die SSR https://react-multi-carousel.now.sh/
Versuchen Sie, JavaScript zu testen, ob es auf der serverseitigen Seite rendert.
Codes für SSR bei GitHub.
Codes für die Dokumentation bei GitHub.
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
Codes für SSR bei GitHub.
Hier ist eine leichtere Version der Bibliothek zum Erkennen der Alternative des Benutzertyps
Sie können es nur auf der serverseitigen Bündel bündeln.
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 > ; Sie können Ihre eigenen benutzerdefinierten Pfeile übergeben, um sie so zu machen, wie Sie es möchten, und für die Position. Fügen Sie beispielsweise Medienabfrage hinzu, damit die Pfeile auf kleineren Bildschirmen untergehen können.
Ihre benutzerdefinierten Pfeile erhalten eine Liste von Requisiten/Status, die vom Karussell wie der Strömung zurückgegeben werden, das Ziehen oder Wischen in Arbeit.
Code
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 /> } /> ; Dies ist sehr nützlich, wenn Sie nicht die Punkte oder Pfeile möchten und die Steuerfunktionalität und das Styling selbst vollständig anpassen möchten.
Code
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 > Das Übergeben dieser Requisiten würde die Knopfgruppe außerhalb des Karussellbehälters rendern. Dies geschieht mit React.Fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Sie können Ihre eigenen benutzerdefinierten Punkte übergeben, um die Standardeinstellung zu ersetzen.
Benutzerdefinierte Punkte können auch eine Kopie oder ein Bild Ihres Karussellartiks sein. Siehe Beispiel in diesem Fall
Die Codes für dieses Beispiel
Ihre benutzerdefinierten Punkte erhalten eine Liste von Requisiten/Status, die vom Karussell wie der Strömung zurückgegeben, schleppt oder wischt.
Code
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 > ; Das Übergeben dieser Requisiten würde die Punkte außerhalb des Karussellbehälters rendern. Dies geschieht mit React.Fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Zeigt die nächsten Elemente teilweise an. Dies ist sehr nützlich, wenn Sie den Benutzern angeben möchten, dass diese Karussellkomponente über mehr Elemente enthält.
Dies unterscheidet sich von der "Centermode" -Ape, da es nur die nächsten Elemente zeigt. Für den CentreMode zeigt es beide.
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 > Zeigt die nächsten Elemente und früheren Elemente teilweise an.
< Carousel centerMode = { true } /> Dies ist eine Rückruffunktion, die jedes Mal aufgerufen wird, wenn es zu einem Gleiten gekommen ist.
< Carousel
afterChange = { ( previousSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Dies ist eine Rückruffunktion, die jedes Mal vor einem Gleiten aufgerufen wird.
< Carousel
beforeChange = { ( nextSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Sie sind in folgenden Fällen sehr nützlich:
< 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 > Beim Aufrufen der goToSlide -Funktion auf einem Karussell werden die Rückrufe standardmäßig ausgeführt. Sie können alle oder einzelne Rückrufe überspringen, indem Sie einen zweiten Parameter an 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 Gehen Sie auf Klicken, um zu klicken, und machen Sie die Folie zu einer aktuellen Folie.
< 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>Dies ist sehr nützlich, wenn Sie die Kontrollfunktionalität selbst wie diese vollständig anpassen
Code
Zum Beispiel, wenn Sie Ihrem Karussellartikel links und nach rechts 20px polieren. Und Sie haben insgesamt 5 Artikel, vielleicht möchten Sie Folgendes tun:
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| reaktionsschnell | object | {} | Anzahl der Folien, die an jedem Haltepunkt angezeigt werden sollen |
| Devicetyp | string | '' | Übergeben Sie dies nur, wenn Sie für das Server-Side-Rendering verwendet werden. Was Sie übergeben sollen, finden Sie im Beispiel-Ordner |
| SSR | boolean | false | Verwenden Sie in Verbindung mit Responsive und Devicetype Prop |
| Slidestoslide | Number | 1 | Wie viele Folien zu gleiten. |
| draggierbar | boolean | true | Optional deaktivieren/aktivieren Sie das Ziehen auf dem Desktop |
| wiken | boolean | true | Optional deaktivieren/aktivieren Sie das Wischen auf dem Handy |
| Pfeile | boolean | true | Ausblenden/Zeigen Sie die Standardpfeile aus |
| renderarrowswhendisabled | boolean | false | Erlauben Sie den Pfeilen, ein deaktiviertes Attribut zu haben, anstatt sie nicht anzuzeigen |
| removearRowondevicetype | string or array | '' | Ausblenden Sie die Standardpfeile an unterschiedlichem Bruchpunkt und sollten mit responsive Requisiten verwendet werden. Wert kann mobile oder ['mobile', 'tablet'], can be a string or array |
| CustomLeftarrow | jsx | null | Ersetzen Sie den Standardpfeil durch Ihren eigenen |
| CustomRightarrow | jsx | null | Ersetzen Sie den Standardpfeil durch Ihren eigenen |
| CustomDot | jsx | NULL | Ersetzen Sie die Standardpunkte durch Ihre eigenen |
| CustomButtongrup | jsx | NULL | Passen Sie Ihre eigene Steuerungsfunktion vollständig an, wenn Sie keine Pfeile oder Punkte wünschen |
| unendlich | boolean | FALSCH | Ermöglicht das unendliche Scrollen in beide Richtungen. Karussellartikel werden im DOM kloniert, um dies zu erreichen. |
| MinimumTouchDrag | number | 50 | Der Abstand zum Ziehen / Swischen, um zur nächsten Folie zu wechseln. |
| Afterchange | function | null | Ein Rückruf nach dem Gleiten jedes Mal. |
| Beforechange | function | null | Ein Rückruf, bevor Sie jedes Mal rutschen. |
| SliderClass | string | 'react-multi-carousel-track' | CSS -Klasse für Inner Slider Div, verwenden Sie diese, um Ihre eigene Titelliste zu stylen. |
| Artikelklasse | string | '' | CSS -Klasse für Karussellartikel. Verwenden Sie dies, um Ihr eigenes Karussellartikel zu stylen. Fügen Sie zum Beispiel Polster-Links und Polsterrechte hinzu |
| Containerklasse | string | 'react-multi-carousel-list' | Verwenden Sie dies, um den gesamten Behälter zu stylen. Fügen Sie beispielsweise die Polsterung hinzu, damit die "Punkte" oder "Pfeile" an andere Orte gehen können, ohne überflogen zu werden. |
| Dotlistklasse | string | 'react-multi-carousel-dot-list' | Verwenden Sie dies, um die Punktliste zu stylen. |
| Keyboardcontrol | boolean | true | Verwenden Sie die Tastatur, um zur nächsten/vorherigen Folie zu navigieren |
| Autoplay | boolean | false | Autospiel |
| Autoplaysspeed | number | 3000 | Das Gerät ist MS |
| Showdots | boolean | false | Verstecken Sie die Standard -Punktliste |
| Renderdotsside | boolean | false | Zeigen Sie Punkte außerhalb des Behälters |
| partialvissibel | boolean | string | false |
| CustomTransition | string | transform 300ms ease-in-out | Konfigurieren Sie Ihre eigene Animierung beim Schieben |
| Übergangsdauer | `Nummer | 300 | Das Gerät ist MS. Wenn Sie CustomTransition verwenden, stellen Sie die Dauer hier ein, da dies für die Größenänderung zur Arbeit benötigt wird. |
| FocusonSelect | boolean | false | Gehen Sie auf Klicken, um zu klicken, und machen Sie die Folie zu einer aktuellen Folie. |
| CENTERMODE | boolean | false | Zeigt die nächsten Elemente und früheren Elemente teilweise an. |
| Zusätzlich | number | 0 | zusätzliche Übertragung zum aktuellen. |
| Solltesetautoplay | boolean | true | Setzt das Autoplay beim Klicken auf Weiter, die vorherige Schaltfläche und die Punkte |
| zurückspulen | boolean | false | Wenn Infinite nicht aktiviert ist und das automatisch explizit ist, wird diese Option das Karussell zurückspulen, wenn das Ende erreicht ist (Leichter Alternative für den Infinite -Modus, ohne zu klonen). |
| REWINDWITHANIMATION | boolean | false | Wenn Sie das Karussell wieder auf den Anfang zurückspulen, entscheidet dies, ob der Rücklaufprozess sofort oder mit dem Übergang sein sollte. |
| RTL | boolean | false | Stellt die Karussellrichtung von RPD nach links fest |
? Yi Zhuang
Bitte lesen Sie https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md
Senden Sie eine Ausgabe für die Feature -Anfrage oder senden Sie eine PR.
Wenn dieses Projekt Ihnen hilft, Zeit für die Entwicklung zu verkürzen, können Sie mir eine Tasse Kaffee geben :)
Dieses Projekt besteht dank aller Menschen, die einen Beitrag leisten. [Beitragen].
Werden Sie ein finanzieller Mitwirkender und helfen Sie uns, unsere Gemeinschaft aufrechtzuerhalten. [Beitragen]
Unterstützen Sie dieses Projekt mit Ihrer Organisation. Ihr Logo wird hier mit einem Link zu Ihrer Website angezeigt. [Beitragen]
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
Truong Hoang Dung | Tobias Pinkamp | Rajendran Nadar | Abhinav Dalal | Oscar Barrett | Neamat mim | Martin Retrou |
Ben Hodgson | Faizan ul Haq | Adrian3PG | kuznetsovgm | Vadim Filimonov | Romain | Riley Lundquist |
Paul Deshaies jr | Pavel Mikheev | Nev1d | Mads Vammen | Jiro Farah |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
