react multi carousel
2.5.4
Componente de carrossel de carrossel totalmente personalizável e pronto para produção, que suporta vários itens e SSR (renderização do lado do servidor).
Estamos em uma jornada muito excitada em direção à versão 3.0 deste componente, que será reescrito em ganchos/contexto completamente. Significa tamanho menor do pacote, melhoria de desempenho e personalização mais fácil do componente e muitos outros benefícios.
Isso significaria muito se você pudesse fornecer ajuda para o desenvolvimento deste projeto, pois fazemos esse trabalho de código aberto em nosso próprio tempo livre, especialmente durante esta crise Covid-19.
Se você estiver usando esse componente seriamente, doe ou converse com seu gerente, pois este projeto também aumenta sua renda. Isso nos ajudará a fazer lançamentos, corrigir bugs, atender às novas solicitações de recursos mais rapidamente e melhor.
Torne -se um patrocinador/patrocinador para obter seu logotipo/imagem em nosso ReadMe no GitHub com um link para o seu site.
Muito obrigado ao BrowSerstack por permitir que os mantenedores usem seu serviço para depurar problemas do navegador.
Tamanho do pacote. 2,5kb
A documentação está aqui.
Demonstração da SSR https://react-multi-carousel.now.sh/
Tente desativar o JavaScript para testar se ele renderiza no lado do servidor.
Códigos para SSR no GitHub.
Códigos para a documentação no GitHub.
$ npm install react-multi-carousel --save
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
Códigos para SSR no GitHub.
Aqui está uma versão mais leve da biblioteca para detectar a alternativa do tipo de dispositivo do usuário
Você pode optar por agrupá-lo apenas no lado do 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 > ; Você pode passar suas próprias setas personalizadas para fazê -lo da maneira que deseja, o mesmo para a posição. Por exemplo, adicione a consulta de mídia para que as setas fiquem em telas menores.
Suas setas personalizadas receberão uma lista de adereços/estado transmitidos pelo carrossel como o Currentside, está arrastando ou deslizando em andamento.
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 /> } /> ; Isso é muito útil se você não quiser os pontos ou as setas e deseja personalizar totalmente a funcionalidade de controle e se denominar.
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 > Passar esses adereços renderizaria o grupo de botões fora do recipiente de carrossel. Isso é feito usando react.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } renderButtonGroupOutside = { true } customButtonGroup = { < ButtonGroup /> } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Você pode passar seus próprios pontos personalizados para substituir o padrão.
Dots personalizados também podem ser uma cópia ou uma imagem do seu item de carrossel. Veja o exemplo neste
Os códigos para este exemplo
Seus pontos personalizados receberão uma lista de adereços/estado transmitidos pelo carrossel, como o Currentside, está arrastando ou deslizando em andamento.
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 > ; Passar esses adereços tornaria os pontos fora do recipiente de carrossel. Isso é feito usando react.fragment
< div className = 'my-own-custom-container' >
< Carousel arrows = { false } showDots = { true } renderDotsOutside = { renderButtonGroupOutside } >
< ItemOne >
< ItemTwo >
</ Carousel >
</ div > Mostra os próximos itens parcialmente, isso é muito útil se você deseja indicar aos usuários que esse componente de carrossel é roubável, tem mais itens por trás dele.
Isso é diferente do suporte "Centermode", pois mostra apenas os próximos itens. Para o Centermode, ele mostra os dois.
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 > Mostra os próximos itens e itens anteriores parcialmente.
< Carousel centerMode = { true } /> Esta é uma função de retorno de chamada que é invocada cada vez que houve um deslizamento.
< Carousel
afterChange = { ( previousSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Esta é uma função de retorno de chamada que é invocada cada vez antes de um deslizamento.
< Carousel
beforeChange = { ( nextSlide , { currentSlide , onMove } ) => {
doSpeicalThing ( ) ;
} }
/> Eles são muito úteis nos seguintes 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 > Ao chamar a função goToSlide em um carrossel, os retornos de chamada serão executados por padrão. Você pode pular todos ou retornos de chamada individual, passando um segundo parâmetro para 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 Vá para deslizar o clique e faça do slide um slide atual.
< 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>Isso é muito útil quando você está personalizando totalmente a funcionalidade de controle por si mesmo como esta
Código
Por exemplo, se você der ao seu item de carrossel, preenchendo a esquerda e preenchimento à direita 20px. E você tem 5 itens no total, você pode querer fazer o seguinte:
< Carousel ref = { el => ( this . Carousel = el ) } additionalTransfrom = { - 20 * 5 } /> // it needs to be a negative number | Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| responsivo | object | {} | Número de slides para mostrar em cada ponto de interrupção |
| DeviceType | string | '' | Passe apenas quando o uso para renderização do lado do servidor, o que passar pode ser encontrado na pasta Exemplo |
| ssr | boolean | false | Use em conjunto com o suporte responsivo e deviceType |
| Slidestoslide | Number | 1 | Quantos slides deslizarem. |
| arrastável | boolean | true | Opcionalmente desabilitar/ativar o arrastar na área de trabalho |
| deslize | boolean | true | Opcionalmente desabilitar/ativar o deslizamento no celular |
| setas | boolean | true | Ocultar/mostrar as setas padrão |
| renderarrowswhendisabled | boolean | false | Permita que as setas tenham um atributo desativado em vez de não mostrar |
| removearrowondevicetype | string or array | '' | Ocultar as setas padrão em diferentes pontos de interrupção, deve ser usado com adereços responsive . O valor pode ser mobile ou ['mobile', 'tablet'], can be a string or array |
| CustomLeftarrow | jsx | null | Substitua a seta padrão por sua própria |
| CustomrightArrow | jsx | null | Substitua a seta padrão por sua própria |
| CustomDot | jsx | nulo | Substitua os pontos padrão por seu próprio |
| CustomButTonGroup | jsx | nulo | Personalize totalmente sua própria funcionalidade de controle se você não quiser setas ou pontos |
| infinito | boolean | falso | Ativa a rolagem infinita em ambas as direções. Os itens de carrossel são clonados no DOM para conseguir isso. |
| MinimumTouchDrag | number | 50 | A quantidade de distância para arrastar / deslizar para passar para o próximo slide. |
| Afterchange | function | null | Um retorno de chamada depois de deslizar toda vez. |
| BeforeChange | function | null | Um retorno de chamada antes de deslizar toda vez. |
| Sliderclass | string | 'react-multi-carousel-track' | Classe CSS para Slider Div, use isso para estilizar sua própria lista de faixas. |
| itemclass | string | '' | Classe CSS para item de carrossel, use isso para estilizar seu próprio item de carrossel. Por exemplo, adicione o preenchimento e a esquerda e o preenchimento |
| Contereclass | string | 'react-multi-carousel-list' | Use isso para estilizar todo o contêiner. Por exemplo, adicione o preenchimento para permitir que os "pontos" ou "setas" entrem em outros lugares sem serem transbordados. |
| Dotlistclass | string | 'react-multi-carousel-dot-list' | Use isso para estilizar a lista de pontos. |
| keyboardcontrol | boolean | true | Use o teclado para navegar para o slide próximo/anterior |
| AutoPlay | boolean | false | Jogo de automóveis |
| AutoPlayspeed | number | 3000 | A unidade é MS |
| ShowDots | boolean | false | Ocultar a lista de pontos padrão |
| renderdotsoutside | boolean | false | Mostre pontos fora do contêiner |
| parcialvisível | boolean | string | false |
| CustomTransition | string | transform 300ms ease-in-out | Configure sua própria animação ao deslizar |
| transiçãoDuration | `Número | 300 | A unidade é MS, se você estiver usando o CustomRansition, certifique -se de colocar a duração aqui, pois isso é necessário para o redimensionamento funcionar. |
| foconect | boolean | false | Vá para deslizar o clique e faça do slide um slide atual. |
| Centermode | boolean | false | Mostra os próximos itens e itens anteriores parcialmente. |
| adicional transmissura | number | 0 | transfrom adicional para o atual. |
| MustresetaTaUTOPlay | boolean | true | Redefina o AutoPlay ao clicar em Avançar, o botão anterior e os pontos |
| rebobinando | boolean | false | Se o Infinite não estiver ativado e o AutoPlay é explicitamente, essa opção rebobina o carrossel quando a extremidade é atingida (alternativa leve do modo infinito sem clonagem). |
| RewindWithanimation | boolean | false | Ao rebobinar o carrossel de volta ao início, isso decide se o processo de rebobinar deve ser instantâneo ou com transição. |
| rtl | boolean | false | Define a direção do carrossel para estar direita para a esquerda |
? Yi Zhuang
Leia https://github.com/yizhuang/react-multi-carousel/blob/master/contributing.md
Envie uma questão para solicitação de recurso ou envie um pr.
Se este projeto o ajudar a reduzir o tempo para se desenvolver, você pode me dar uma xícara de café :)
Este projeto existe graças a todas as pessoas que contribuem. [Contribuir].
Torne -se um colaborador financeiro e ajude -nos a sustentar nossa comunidade. [Contribuir]
Apoie este projeto com sua organização. Seu logotipo aparecerá aqui com um link para o seu site. [Contribuir]
Obrigado a essas pessoas maravilhosas (key 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 Deshhaies Jr | Pavel Mikheev | nev1d | Mads Vammen | Jiro Farah |
Este projeto segue a especificação de todos os contribuintes. Contribuições de qualquer tipo de boas -vindas!
