react multi carousel
2.5.4
Composant de carrousel React prêt pour la production et léger entièrement personnalisable qui Rocks prend en charge plusieurs éléments et SSR (rendu côté serveur).
Nous sommes sur un voyage très excité vers la version 3.0 de ce composant qui sera complètement réécrit dans les crochets / contexte. Cela signifie une taille de faisceau plus petite, une amélioration des performances et une personnalisation plus facile du composant et tant d'avantages supplémentaires.
Cela signifierait tellement si vous pouviez fournir de l'aide au développement ultérieur de ce projet que nous faisons ce travail open source dans notre propre temps libre, en particulier pendant cette crise Covid-19.
Si vous utilisez sérieusement ce composant, veuillez faire un don ou parler à votre manager car ce projet augmente également vos revenus. Il nous aidera à effectuer des versions, à corriger les bogues, à répondre aux nouvelles demandes de fonctionnalités plus rapidement et mieux.
Devenez un bailleur de fonds / sponsor pour obtenir votre logo / image sur notre lecture sur GitHub avec un lien vers votre site.
Un grand merci à Browserstack pour avoir permis aux mainteneurs utiliser leur service pour déboguer les problèmes de navigateur.
Taille de faisceau. 2,5 Ko
La documentation est là.
Demo pour le ssr https://react-multi-carel.now.sh/
Essayez de désactiver JavaScript pour tester s'il rend le côté du serveur.
Codes pour SSR à GitHub.
Codes pour la documentation de GitHub.
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
Codes pour SSR à GitHub.
Voici une version plus légère de la bibliothèque pour détecter l'alternative de type d'appareil de l'utilisateur
Vous pouvez choisir de le regrouper uniquement sur le côté du serveur.
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 > ; Vous pouvez passer vos propres flèches personnalisées pour en faire la façon dont vous le souhaitez, la même chose pour le poste. Par exemple, ajoutez une requête multimédia pour que les flèches s'établissent lorsqu'elles sont sur des écrans plus petits.
Vos flèches personnalisées recevront une liste d'accessoires / état qui est remise par le carrousel tel que le CurrentSide, traîne ou glisse en cours.
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 /> } /> ; Ceci est très utile si vous ne voulez pas les points ou les flèches et que vous souhaitez personnaliser pleinement la fonctionnalité de contrôle et vous-même.
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 > Passer ces accessoires rendrait le groupe de boutons à l'extérieur du conteneur du carrousel. Cela se fait à l'aide de react.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Vous pouvez passer vos propres points personnalisés pour remplacer celui par défaut.
Les points personnalisés peuvent également être une copie ou une image de votre élément de carrousel. Voir l'exemple dans celui-ci
Les codes de cet exemple
Vos points personnalisés recevront une liste d'accessoires / état qui est transmis par le carrousel tel que le CurrentSide, traîne ou glisse en cours.
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 > ; Passer ces accessoires rendrait les points à l'extérieur du conteneur du carrousel. Cela se fait à l'aide de react.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Affiche les éléments suivants partiellement, cela est très utile si vous souhaitez indiquer aux utilisateurs que ce composant de carrousel est glissable, a plus d'articles derrière.
Ceci est différent de l'hélice "Centermode", car elle ne montre que les éléments suivants. Pour la Centermode, cela montre les deux.
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 > Affiche partiellement les éléments suivants et les éléments précédents.
< Carousel centerMode = { true } /> Il s'agit d'une fonction de rappel qui est invoquée à chaque fois lorsqu'il y a eu un glissement.
< Carousel
afterChange = { ( previousSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Il s'agit d'une fonction de rappel qui est invoquée à chaque fois avant un glissement.
< Carousel
beforeChange = { ( nextSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Ils sont très utiles dans les cas suivants:
< 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 > Lorsque vous appelez la fonction goToSlide sur un carrousel, les rappels seront exécutés par défaut. Vous pouvez ignorer les rappels de tous ou individuaux en passant un deuxième paramètre à 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 Accédez à la diapositive sur cliquez et faites de la diapositive une diapositive actuelle.
< 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>Ceci est très utile lorsque vous personnalisez pleinement la fonctionnalité de contrôle par vous-même comme celui-ci
Code
Par exemple, si vous donnez à votre élément de carrousel, le rembourrage à gauche et le rembourrage à droite 20px. Et vous avez 5 articles au total, vous voudrez peut-être faire ce qui suit:
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | Nom | Taper | Défaut | Description |
|---|---|---|---|
| sensible | object | {} | Nombre de diapositives à montrer à chaque point d'arrêt |
| farce | string | '' | Passez cela lorsqu'il est utilisé pour le rendu côté serveur, ce qu'il faut passer dans l'exemple de dossier |
| RSE | boolean | false | Utiliser en conjonction avec un accessoire réactif et DeviceType |
| slidestoslide | Number | 1 | Combien de diapositives à glisser. |
| dragable | boolean | true | Désactiver / activer éventuellement la traînée sur le bureau |
| glissant | boolean | true | Désactiver / activer éventuellement le balayage sur le mobile |
| flèches | boolean | true | Masquer / afficher les flèches par défaut |
| rendement | boolean | false | Permettez aux flèches d'avoir un attribut handicapé au lieu de ne pas les montrer |
| RemoveArrowonDeviceType | string or array | '' | Masquer les flèches par défaut à différents points de rupture, doit être utilisé avec des accessoires responsive . La valeur peut être mobile ou ['mobile', 'tablet'], can be a string or array |
| Customleftarrow | jsx | null | Remplacez la flèche par défaut par la vôtre |
| Custom-FrightArrow | jsx | null | Remplacez la flèche par défaut par la vôtre |
| CustomDot | jsx | nul | Remplacez les points par défaut par le vôtre |
| Custombuttongroup | jsx | nul | Personnalisez entièrement votre propre fonctionnalité de contrôle si vous ne voulez pas de flèches ou de points |
| infini | boolean | FAUX | Permet le défilement infini dans les deux sens. Les éléments de carrousel sont clonés dans le DOM pour y parvenir. |
| minimumtouchdrag | number | 50 | La quantité de distance à traîner / glisser afin de passer à la diapositive suivante. |
| dans la transmission | function | null | Un rappel après avoir glissé à chaque fois. |
| être engendré | function | null | Un rappel avant de glisser à chaque fois. |
| calice | string | 'react-multi-carousel-track' | Classe CSS pour Inner Slider Div, utilisez-le pour styliser votre propre liste de pistes. |
| classe | string | '' | Classe CSS pour un article de carrousel, utilisez-le pour styliser votre propre objet de carrousel. Par exemple, ajoutez le rembourrage à gauche et le rembourrage à droite |
| plasse de classe | string | 'react-multi-carousel-list' | Utilisez-le pour styliser l'ensemble du conteneur. Par exemple, ajoutez un rembourrage pour permettre aux "points" ou "flèches" d'aller dans d'autres endroits sans être débordé. |
| dotlistClass | string | 'react-multi-carousel-dot-list' | Utilisez-le pour styliser la liste des points. |
| clavier | boolean | true | Utilisez le clavier pour accéder à la diapositive suivante / précédente |
| en place automatique | boolean | false | Jeu automatique |
| Autoplayspeed | number | 3000 | L'unité est MS |
| épreuves | boolean | false | Masquer la liste de points par défaut |
| renderdotsoutside | boolean | false | Montrer des points à l'extérieur du conteneur |
| partiel-visible | boolean | string | false |
| CustomTransition | string | transform 300ms ease-in-out | Configurez votre propre anaimation lorsque vous glissez |
| transitionduration | «Numéro | 300 | L'unité est MS, si vous utilisez CustomTransition, assurez-vous de mettre la durée ici car cela est nécessaire pour que le redimensionnement fonctionne. |
| se concentrer sur | boolean | false | Accédez à la diapositive sur cliquez et faites de la diapositive une diapositive actuelle. |
| centode | boolean | false | Affiche partiellement les éléments suivants et les éléments précédents. |
| supplémentaire | number | 0 | Transfrom supplémentaire à celui actuel. |
| devrait reposeraTautoplay | boolean | true | Réinitialise la lecture automatique lorsque vous cliquez sur Suivant, le bouton précédent et les points |
| rembobiner | boolean | false | Si Infinite n'est pas activé et que la lecture automatique est explicitement, cette option rembobine le carrousel lorsque la fin est atteinte (alternative en mode infini léger sans clonage). |
| réobin un remontage | boolean | false | Lors du retour du carrousel au début, cela décide si le processus de rembobinage doit être instantané ou avec transition. |
| rtl | boolean | false | Définit la direction du carrousel à droite à gauche |
? Yi Zhuang
Veuillez lire https://github.com/yizhuang/react-multi-carel/blob/master/contributing.md
Soumettez un problème pour la demande de fonctionnalité ou soumettez un PR.
Si ce projet vous aide à réduire le temps pour vous développer, vous pouvez me donner une tasse de café :)
Ce projet existe grâce à toutes les personnes qui contribuent. [Contribuer].
Devenir un contributeur financier et nous aider à maintenir notre communauté. [Contribuer]
Soutenez ce projet avec votre organisation. Votre logo apparaîtra ici avec un lien vers votre site Web. [Contribuer]
Merci à ces gens merveilleux (clé emoji):
Truong Hoang Dung | Tobias Pinnekamp | 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 |
Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!
