Carousel

tip

O componente Carousel usa por baixo dos panos a lib React Multi Carousel, leve e totalmente customizavel, suporta vários itens e SSR (renderização do lado do servidor).

⚠️ Observação: Utilize nossa documentação para consulta!

Importação

import { Carousel } from '@escaletech/delta'

Utilização

Editor de código

<Carousel> {Array(2).fill(null).map((_, index) => ( <Banner key={index} background="white" image={{ src: 'https://images.prismic.io/ofertasclaro/ffb08e48-5880-4357-a7bd-828f6c940318_Group+769186.png?auto=compress,format', width: 338, height: 389, alt: 'Tudo junto e conectado' }} title={{ children: <h3>A title here</h3>, as: 'div', color: '$neutralDark' }} text={{ children: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>, as: 'div', color: '$neutralDark' }} button={{ children: 'Contrate online', as: 'a', href: 'https://delta.staging.escale.com.br/' }} /> ))} </Carousel>

<Carousel>
  {Array(2).fill(null).map((_, index) => (
    <Banner
      key={index}
      background="white"
      image={{
        src: 'https://images.prismic.io/ofertasclaro/ffb08e48-5880-4357-a7bd-828f6c940318_Group+769186.png?auto=compress,format',
        width: 338,
        height: 389,
        alt: 'Tudo junto e conectado'
      }}
      title={{
        children: <h3>A title here</h3>,
        as: 'div',
        color: '$neutralDark'
      }}
      text={{
        children: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>,
        as: 'div',
        color: '$neutralDark'
      }}
      button={{
        children: 'Contrate online',
        as: 'a',
        href: 'https://delta.staging.escale.com.br/'
      }}
    />
  ))}
</Carousel>

Resultado

Loading...

Renderizar grupo de botões fora

Passar essa propriedade renderizaria o grupo de botões fora do contêiner. Por padrão, ele é false

Editor de código

<Carousel renderButtonGroupOutside> {Array(2).fill(null).map((_, index) => ( <Banner key={index} background="white" image={{ src: 'https://images.prismic.io/ofertasclaro/ffb08e48-5880-4357-a7bd-828f6c940318_Group+769186.png?auto=compress,format', width: 338, height: 389, alt: 'Tudo junto e conectado' }} title={{ children: <h3>A title here</h3>, as: 'div', color: '$neutralDark' }} text={{ children: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>, as: 'div', color: '$neutralDark' }} button={{ children: 'Contrate online', as: 'a', href: 'https://delta.staging.escale.com.br/' }} /> ))} </Carousel>

<Carousel renderButtonGroupOutside>
  {Array(2).fill(null).map((_, index) => (
    <Banner
      key={index}
      background="white"
      image={{
        src: 'https://images.prismic.io/ofertasclaro/ffb08e48-5880-4357-a7bd-828f6c940318_Group+769186.png?auto=compress,format',
        width: 338,
        height: 389,
        alt: 'Tudo junto e conectado'
      }}
      title={{
        children: <h3>A title here</h3>,
        as: 'div',
        color: '$neutralDark'
      }}
      text={{
        children: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>,
        as: 'div',
        color: '$neutralDark'
      }}
      button={{
        children: 'Contrate online',
        as: 'a',
        href: 'https://delta.staging.escale.com.br/'
      }}
    />
  ))}
</Carousel>

Resultado

Loading...

Visível parcial

Mostra os próximos itens parcialmente, isso é muito útil se você deseja indicar aos usuários que este componente do carrossel pode ser deslizado.

Editor de código

function PartialVisible(){ const responsive = { 1: { breakpoint: { max: 3000, min: 0 }, items: 3, partialVisibilityGutter: 20 }, } return ( <Carousel partialVisible renderButtonGroupOutside responsive={responsive}> {Array(10).fill(null).map((_, index) => ( <div style={{ width: '280px', height: '500px', padding: '16px', backgroundColor: '#fff', border: '1px solid #D4D7DE', borderRadius: '8px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}> <Button fullWidth>Contrate online</Button> </div> ))} </Carousel> ) }

function PartialVisible(){
  const responsive = {
    1: {
      breakpoint: {
        max: 3000,
        min: 0
      },
      items: 3,
      partialVisibilityGutter: 20
    },
  }

  return (
    <Carousel partialVisible renderButtonGroupOutside responsive={responsive}>
      {Array(10).fill(null).map((_, index) => (
        <div style={{
          width: '280px',
          height: '500px',
          padding: '16px',
          backgroundColor: '#fff',
          border: '1px solid #D4D7DE',
          borderRadius: '8px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end'
        }}>
          <Button fullWidth>Contrate online</Button>
        </div>
      ))}
    </Carousel>
  )
}

Resultado

Loading...

Modo Central

Mostra os próximos itens e os itens anteriores parcialmente.

Editor de código

function CenterMode(){ const responsive = { 1: { breakpoint: { max: 3000, min: 0 }, items: 1 }, } return ( <Carousel centerMode renderButtonGroupOutside responsive={responsive}> {Array(10).fill(null).map((_, index) => ( <div style={{ width: '280px', height: '500px', padding: '16px', backgroundColor: '#fff', border: '1px solid #D4D7DE', borderRadius: '8px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}> <Button fullWidth>Contrate online</Button> </div> ))} </Carousel> ) }

function CenterMode(){
  const responsive = {
    1: {
      breakpoint: {
        max: 3000,
        min: 0
      },
      items: 1
    },
  }

  return (
    <Carousel centerMode renderButtonGroupOutside responsive={responsive}>
      {Array(10).fill(null).map((_, index) => (
        <div style={{
          width: '280px',
          height: '500px',
          padding: '16px',
          backgroundColor: '#fff',
          border: '1px solid #D4D7DE',
          borderRadius: '8px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end'
        }}>
          <Button fullWidth>Contrate online</Button>
        </div>
      ))}
    </Carousel>
  )
}

Resultado

Loading...

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
children	Conteúdo do componente	ReactNode	null	✅
responsive	Número de slides para mostrar em cada ponto de interrupção.	object	{1: {breakpoint: {max: 9999,min: 0},items: 1}}	❌
deviceType	Passe isso apenas quando usar para renderização do lado do servidor.	string	''	❌
ssr	Use em conjunto com prop responsive e deviceType.	boolean	false	❌
draggable	Desabilita/habilita arrastar na área de trabalho.	boolean	true	❌
swipeable	Desabilita/habilita a passagem de dedo no celular.	boolean	true	❌
infinite	Loop infinito.	boolean	false	❌
minimumTouchDrag	A distância para arrastar/deslizar para passar para o próximo slide.	number	50	❌
afterChange	Um retorno de chamada após deslizar todas as vezes.	function	null	❌
beforeChange	Um retorno de chamada antes de deslizar toda vez.	function	null	❌
sliderClass	Classe CSS para div deslizante interno, use-a para definir o estilo de sua própria lista de trilhas.	string	react-multi-carousel-track'	❌
itemClass	Classe CSS para item de carrossel, use-a para estilizar seu próprio item de carrossel.	string	''	❌
containerClass	Classe CSS para estilizar todo o contêiner.	string	react-multi-carousel-list	❌
keyBoardControl	Use o teclado para navegar para o slide seguinte/anterior.	boolean	true	❌
autoPlay	Reprodução automática.	boolean	false	❌
autoPlaySpeed	Velocidade da reprodução automática. A unidade é ms.	number	3000	❌
partialVisible		boolean	false	❌
customTransition	Configure sua própria animação ao deslizar	string	transform 300ms ease-in-out	❌
transitionDuration	A unidade é ms, se você estiver usando customTransition, certifique-se de colocar a duração aqui, pois ela é necessária para que o redimensionamento funcione.	number	300	❌
focusOnSelect	Vá para o slide ao clicar e torne o slide um slide atual.	boolean	false	❌
centerMode	Mostra os próximos itens e os itens anteriores parcialmente.	boolean	false	❌
additionalTransfrom	transfrom adicional para o atual.	number	0	❌