react multi carousel
2.5.4
El componente React React Carousel listo para la producción, liviano, totalmente personalizable, que Rocks admite múltiples elementos y SSR (representación del lado del servidor).
Estamos en un viaje muy emocionado hacia la versión 3.0 de este componente que se reescribirá en ganchos/contexto por completo. Significa un tamaño de paquete más pequeño, mejora del rendimiento y una personalización más fácil del componente y muchos más beneficios.
Significaría mucho si pudiera proporcionar ayuda para el desarrollo adicional de este proyecto, ya que hacemos este trabajo de código abierto en nuestro propio tiempo libre, especialmente durante esta crisis Covid-19.
Si está utilizando en serio este componente, done o hable con su gerente ya que este proyecto también aumenta sus ingresos. Nos ayudará a hacer lanzamientos, solucionar errores, cumplir nuevas solicitudes de funciones más rápido y mejor.
Conviértase en un patrocinador/patrocinador para obtener su logotipo/imagen en nuestro ReadMe en GitHub con un enlace a su sitio.
Muchas gracias a Browserstack por permitir que los mantenedores usen su servicio para depurar los problemas del navegador.
Tamaño de un paquete. 2.5kb
La documentación está aquí.
Demostración para la SSR https://reactmulti-carousel.now.sh/
Intente deshabilitar JavaScript para que pruebe si se reproduce en el lado del servidor.
Códigos para SSR en GitHub.
Códigos para la documentación en GitHub.
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
Códigos para SSR en GitHub.
Aquí hay una versión más ligera de la biblioteca para detectar la alternativa de tipo de dispositivo del usuario
Puede elegir solo agruparlo en el lado del servidor.
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 > ; Puede pasar sus propias flechas personalizadas para que lo desee, lo mismo para el puesto. Por ejemplo, agregue la consulta de medios para que las flechas se queden cuando se encuentran en pantallas más pequeñas.
Sus flechas personalizadas recibirán una lista de accesorios/estado que se transmiten por el carrusel, como la Corriente, está arrastrando o deslizando en progreso.
Código
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 /> } /> ; Esto es muy útil si no desea los puntos, o flechas y desea personalizar completamente la funcionalidad de control y el estilo usted mismo.
Código
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 > Pasar estos accesorios haría que el grupo de botones fuera del contenedor de carrusel. Esto se hace usando React.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Puede pasar sus propios puntos personalizados para reemplazar el predeterminado.
Los puntos personalizados también pueden ser una copia o una imagen de su artículo de carrusel. Ver ejemplo en este
Los códigos para este ejemplo
Sus puntos personalizados recibirán una lista de accesorios/estado que se transmiten por el carrusel, como la Corriente, está arrastrando o deslizando en progreso.
Código
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 > ; Pasar estos accesorios haría que los puntos fuera del contenedor de carrusel. Esto se hace usando React.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Muestra los siguientes elementos parcialmente, esto es muy útil si desea indicar a los usuarios que este componente de carrusel se puede verificar, tiene más elementos detrás.
Esto es diferente del accesorio "Centermode", ya que solo muestra los siguientes elementos. Para el centermodo, muestra ambos.
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 > Muestra los siguientes elementos y elementos anteriores parcialmente.
< Carousel centerMode = { true } /> Esta es una función de devolución de llamada que se invoca cada vez que ha habido un deslizamiento.
< Carousel
afterChange = { ( previousSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Esta es una función de devolución de llamada que se invoca cada vez antes de un deslizamiento.
< Carousel
beforeChange = { ( nextSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Son muy útiles en los siguientes casos:
< 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 > Al llamar a la función goToSlide en un carrusel, las devoluciones de llamada se ejecutarán de forma predeterminada. Puede omitir todas las devoluciones de llamada individuales pasando un segundo parámetro a 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 Vaya a deslizar el clic y haga que la diapositiva sea una diapositiva de corriente.
< 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>Esto es muy útil cuando está personalizando completamente la funcionalidad de control por sí mismo como este
Código
Por ejemplo, si le da a su artículo de carrusel acolchado a la izquierda y acolchando a la derecha 20px. Y tiene 5 elementos en total, es posible que desee hacer lo siguiente:
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| sensible | object | {} | Número de diapositivas para mostrar en cada punto de interrupción |
| truco | string | '' | Solo pase esto cuando se use para la representación del lado del servidor, qué pasar se puede encontrar en la carpeta de ejemplo |
| SSR | boolean | false | Usar junto con el apoyo receptivo y deviceType |
| slidoslide | Number | 1 | Cuántas diapositivas para deslizar. |
| arrastrable | boolean | true | Opcionalmente deshabilitar/habilitar arrastre en el escritorio |
| aturdible | boolean | true | Opcionalmente deshabilitar/habilitar deslizamiento en el móvil |
| flechas | boolean | true | Ocultar/mostrar las flechas predeterminadas |
| renderrowswhendisable | boolean | false | Permitir que las flechas tengan un atributo deshabilitado en lugar de no mostrarlas |
| removeRearRowondevicType | string or array | '' | Ocultar las flechas predeterminadas en un punto de interrupción diferente, debe usarse con accesorios responsive . El valor podría ser mobile o ['mobile', 'tablet'], can be a string or array |
| personalizado | jsx | null | Reemplace la flecha predeterminada con su propia |
| costumberarrow | jsx | null | Reemplace la flecha predeterminada con su propia |
| adivino | jsx | nulo | Reemplace los puntos predeterminados con el suyo |
| CustomButTongroup | jsx | nulo | Personaliza completamente tu propia funcionalidad de control si no quieres flechas o puntos |
| infinito | boolean | FALSO | Habilita el desplazamiento infinito en ambas direcciones. Los artículos de carrusel están clonados en el DOM para lograr esto. |
| mínimo | number | 50 | La cantidad de distancia para arrastrar / deslizar para moverse a la siguiente diapositiva. |
| traspasar | function | null | Una devolución de llamada después de deslizarse cada vez. |
| anular | function | null | Una devolución de llamada antes de deslizarse cada vez. |
| slerlass | string | 'react-multi-carousel-track' | Clase CSS para Inner Slider Div, use esto para peinar su propia lista de pistas. |
| clase de elemento | string | '' | Clase CSS para artículos de carrusel, use esto para peinar su propio artículo de carrusel. Por ejemplo, agregue el relleno-izquierda y el relleno de la derecha |
| clásico | string | 'react-multi-carousel-list' | Use esto para diseñar todo el contenedor. Por ejemplo, agregue el relleno para permitir que los "puntos" o "flechas" vayan a otros lugares sin estar desbordados. |
| clase dotlist | string | 'react-multi-carousel-dot-list' | Use esto para peinar la lista de puntos. |
| Control de teclado | boolean | true | Use el teclado para navegar hasta la diapositiva siguiente/anterior |
| autoplaz | boolean | false | Auto Play |
| Autoplayspeed | number | 3000 | La unidad es MS |
| showdots | boolean | false | Ocultar la lista de puntos predeterminada |
| renderdotsoutside | boolean | false | Mostrar puntos fuera del contenedor |
| parcialvisible | boolean | string | false |
| Transición personalizada | string | transform 300ms ease-in-out | Configure su propia anaimación cuando se desliza |
| prueba de transición | `Número | 300 | La unidad es MS, si está utilizando CustomTransition, asegúrese de poner la duración aquí, ya que esto es necesario para que funcione el cambio de tamaño. |
| focalseleccionar | boolean | false | Vaya a deslizar el clic y haga que la diapositiva sea una diapositiva de corriente. |
| centermódico | boolean | false | Muestra los siguientes elementos y elementos anteriores parcialmente. |
| adicional desde | number | 0 | Transfo adicional a la actual. |
| Debe rehesetaUtoPlay | boolean | true | Restablece la reproducción automática al hacer clic en Siguiente, el botón anterior y los puntos |
| rebobinar | boolean | false | Si Infinite no está habilitado y el reproducción automática es explícitamente, esta opción rebobina el carrusel cuando se alcanza el final (alternativa de modo infinito liviano sin clonación). |
| rewindwithanimation | boolean | false | Al rebobinar el carrusel hasta el principio, esto decide si el proceso de rebobinado debe ser instantáneo o con transición. |
| RTL | boolean | false | Establece que la dirección del carrusel sea de derecha a izquierda |
? Yi zhuang
Lea https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md
Envíe un problema para la solicitud de función o envíe un PR.
Si este proyecto lo ayuda a reducir el tiempo para desarrollarse, puede darme una taza de café :)
Este proyecto existe gracias a todas las personas que contribuyen. [Contribuir].
Conviértete en un contribuyente financiero y ayúdanos a mantener nuestra comunidad. [Contribuir]
Apoye este proyecto con su organización. Su logotipo aparecerá aquí con un enlace a su sitio web. [Contribuir]
Gracias a estas maravillosas personas (Key Emoji):
Estiércol de truong hoang | Tobias Pinnekamp | Rajendran Nadar | Abhinav dalal | Oscar Barrett | Neamat Mim | Martin Retrou |
Ben Hodgson | Faizan ul Haq | ADRIAN3PG | kuznetsovgm | Vadim Filimonov | Romaín | Riley Lundquist |
Paul Deshaies Jr | Pavel mikheev | nev1d | Mads Vammen | Jiro Farah |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Contribuciones de cualquier tipo bienvenido!
