/modules/carousel/simple-carousel

El componente BkCarousel permite al usuario mostrar grupos de componentes a través de una animación.

Nos hemos basado en Embla Carousel. Para un uso mas extendido, ir a la documentación.

Todos los elementos que se encuentren dentro del componente BkCarousel serán considerados slides individuales. Esto quiere decir que cada uno de los children son los elementos que forman el componente en su totalidad.

Carrusel simple

Carrusel con los slides a todo lo ancho. En todos los casos, las opciones del carrusel se pasarán a través de la prop carouselOptions. En este ejemplo hemos añadido la opción loop.

Swipe 1

Swipe 2

Swipe 3

Swipe 4

Swipe 5

Swipe 6

const simpleCarousel = [
    {
        color: 'success',
        width: '200px',
    },
    {
        color: 'warning',
        width: '250px',
    },
    {
        color: 'error',
        width: '350px',
    },
    {
        color: 'info',
        width: '500px',
    },
    {
        color: 'experienceFitness',
        width: '200px',
    },
    {
        color: 'experienceWorkout',
        width: '250px',
    }
];
<BkSimpleCarousel
    carouselOptions={{ loop: true }}
>
    {
        simpleCarousel.map((slide, index) => (
            <BkBox
                key={ index }
                sx={{
                    backgroundColor: theme.palette[slide.color].main,
                    alignItems: 'center',
                    display: 'flex',
                    justifyContent: 'center',
                    height: '300px',
                }}
            >
                <BkTypography variant='subtitleLarge' gutterBottom>Swipe { index  + 1 }</BkTypography>
            </BkBox>
        ))
    }
</BkSimpleCarousel>

Contenedor con border radius

Hemos añadido la prop, borderRadius, para el caso en que se requiera que el contenedor tenga el border radius indicado en el theme.

Swipe 1

Swipe 2

Swipe 3

Swipe 4

Swipe 5

Swipe 6

<BkSimpleCarousel
    carouselOptions={{ loop: true }}
    borderRadius
>
    { children }
</BkSimpleCarousel>

Múltiples Slides

Para tener múltiples slides, tendremos que añadir valores a varias props. Estos valores tendrán que ser obligatoriamente valores que correspondan a la propiedad width de CSS. Por defecto, estos valores son "100%" y como funciona es que modifican la propiedad flex: 0 0 valorAñadido.

Estas props corresponden a cada uno de los breakpoints definidos en el theme y son slideWidthXs, slideWidthMobile, slideWidthSm, slideWidthMd, slideWidthLg y slideWidthXl.

Swipe 1

Swipe 2

Swipe 3

Swipe 4

Swipe 5

Swipe 6

<BkSimpleCarousel
    carouselOptions={{ align: 'start', slidesToScroll: 3, loop: true }}
    borderRadius
    colorStyle="accent"
    spaceBetween={ 0 }
    slideWidthXs="33.35%"
    slideWidthMobile="33.35%"
    slideWidthSm="33.35%"
    slideWidthMd="33.35%"
    slideWidthLg="33.35%"
    slideWidthXl="33.35%"
>
    { children }
</BkSimpleCarousel>

Espacio entre slides y navegación

Para añadir espacio entre slides hemos añadido la prop spaceBetween. El valor deberá ser numérico.

Añadiendo las props showNavigationArrows y showPagination, se mostrarán las flechas de navegación y el paginado, respectivamente.

El estilo de color de las flechas y el paginado lo podemos cambiar a través de la prop colorStyle.

Swipe 1

Swipe 2

Swipe 3

Swipe 4

Swipe 5

Swipe 6

Swipe 1

Swipe 2

Swipe 3

Swipe 4

Swipe 5

Swipe 6

<BkSimpleCarousel
    carouselOptions={{ align: 'start', slidesToScroll: 3 }}
    colorStyle="secondary"
    showNavigationArrows
    showPagination
    spaceBetween={ 16 }
    slideWidthXs="32.55%"
    slideWidthMobile="32.55%"
    slideWidthSm="32.55%"
    slideWidthMd="32.55%"
    slideWidthLg="32.55%"
    slideWidthXl="32.55%"
>
    { children }
</BkSimpleCarousel>

<BkSimpleCarousel
    carouselOptions={{ align: 'start', slidesToScroll: 3 }}
    colorStyle="secondary"
    showNavigationArrows
    showPagination
    spaceBetween={ 4 }
    slideWidthXs="32.55%"
    slideWidthMobile="32.55%"
    slideWidthSm="32.55%"
    slideWidthMd="32.55%"
    slideWidthLg="32.55%"
    slideWidthXl="32.55%"
>
    { children }
</BkSimpleCarousel>

Espacio (padding) para Cards y posición de las flechas de navegación

Nuestras Cards tienen un efecto de escalado en hover, para qe no queden ocultas al usarlas en el carrusel, y para añadir versatilidad, hemos añadido la prop paddingStyle. A través de esta prop podremos añadir estilos CSS correspondientes a la propiedad padding al contenedor del carrusel.

¿Qué pasa si queremos mostrar las "flechas" de navegación en otro lugar? Para esto tendremos que pasar un objeto de estilos vía prop navigationArrowStyles. Con las propiedades de CSS de flex, position y otras podremos darle multitud de estilos a la ubicación de la navegación.

Swipe 1: Card

Swipe 2: Card

Swipe 3: Card

Swipe 4: Card

Swipe 5: Card

Swipe 6: Card

<BkSimpleCarousel
    colorStyle="accent"
    showNavigationArrows
    showPagination={ matchesMd }
    spaceBetween={ 16 }
    slideWidthXs="80%"
    slideWidthMobile="270px"
    slideWidthSm="270px"
    slideWidthMd="300px"
    slideWidthLg="300px"
    slideWidthXl="300px"
    paddingStyle="1rem 0"
    navigationArrowStyles={{
        justifyContent: 'end',
        display: matchesMd ? 'none' : 'flex',
        flexDirection: 'row',
        padding: '1rem 0',
        paddingLeft: matchesMd ? '1rem' : '6rem',
        paddingRight: matchesMd ? '1rem' : '6rem',
    }}
>
    { children }
</BkSimpleCarousel>

Slides de diferentes tamaños

Podremos tener slides de diferentes tamaños. Para esto, será necesario modificar las props slideWidthXs, slideWidthMobile, slideWidthSm, slideWidthMd, slideWidthLg y slideWidthXl, y que todas tengan de valor "auto". Luego en cada slide independiente le podemos añadir el ancho deseado.

Swipe 1: 200px

Swipe 2: 250px

Swipe 3: 350px

Swipe 4: 500px

Swipe 5: 200px

Swipe 6: 250px

<BkSimpleCarousel
    colorStyle="accent"
    showNavigationArrows
    showPagination={ matchesMd }
    spaceBetween={ 16 }
    slideWidthXs="auto"
    slideWidthMobile="auto"
    slideWidthSm="auto"
    slideWidthMd="auto"
    slideWidthLg="auto"
    slideWidthXl="auto"
    paddingStyle="1rem 0"
    navigationArrowStyles={{
        justifyContent: 'end',
        display: matchesMd ? 'none' : 'flex',
        flexDirection: 'row',
        padding: '1rem 0',
        paddingLeft: matchesMd ? '1rem' : '6rem',
        paddingRight: matchesMd ? '1rem' : '6rem',
    }}
>
    {
        simpleCarousel.map((slide, index) => (
            <BkBox
                key={ index }
                sx={{
                    backgroundColor: theme.palette[slide.color].main,
                    alignItems: 'center',
                    display: 'flex',
                    justifyContent: 'center',
                    borderRadius: '8px',
                    height: '300px',
                    transition: 'all .25s',
                    width: slide.width,
                    '&:hover': {
                        transform: 'scale(1.05)'
                    }
                }}
            >
                <BkTypography variant='subtitleLarge' gutterBottom>Swipe { index  + 1 }: { slide.width }</BkTypography>
            </BkBox>
        ))
    }
</BkSimpleCarousel>

Añadiendo estilos extras

Podemos añadir estilos extras al contenedor de los slides a través de la prop carouselSlidesStyles. Esto nos puede ayudar a que podamos, por ejemplo, alinear slides de diferentes tamaños añdiendo propiedades de flex.

Swipe 1: 200px

Swipe 2: 250px

Swipe 3: 350px

Swipe 4: 500px

Swipe 5: 200px

Swipe 6: 250px

<BkSimpleCarousel
    colorStyle="accent"
    carouselOptions={{
        align: 'start',
        containScroll: 'trimSnaps',
    }}
    showNavigationArrows
    showPagination={ matchesMd }
    spaceBetween={ 16 }
    slideWidthXs="auto"
    slideWidthMobile="auto"
    slideWidthSm="auto"
    slideWidthMd="auto"
    slideWidthLg="auto"
    slideWidthXl="auto"
    paddingStyle="1rem 0"
    navigationArrowStyles={{
        justifyContent: 'end',
        display: matchesMd ? 'none' : 'flex',
        flexDirection: 'row',
        padding: '1rem 0',
        paddingLeft: matchesMd ? '1rem' : '6rem',
        paddingRight: matchesMd ? '1rem' : '6rem',
    }}
    carouselSlidesStyles={{
        alignItems: 'center',
    }}
>
    {
        simpleCarousel.map((slide, index) => (
            <BkBox
                key={ index }
                sx={{
                    backgroundColor: theme.palette[slide.color].main,
                    alignItems: 'center',
                    display: 'flex',
                    justifyContent: 'center',
                    borderRadius: '8px',
                    height: '300px',
                    transition: 'all .25s',
                    width: slide.width,
                    '&:hover': {
                        transform: 'scale(1.05)'
                    }
                }}
            >
                <BkTypography variant='subtitleLarge' gutterBottom>Swipe { index  + 1 }: { slide.width }</BkTypography>
            </BkBox>
        ))
    }
</BkSimpleCarousel>

Nombre	Type	Default	Descripción
borderRadius	bool		Si es igual a "true", el contenedor tendrá el border radius definido en el theme.
carouselOptions	object		Configuración de las opciones del carrusel.
carouselPlugins	array		Para añadir plugins al carrusel, por ejemplo, autoplay
carouselSlidesStyles	object		Se puede usar para añadir estilos extras en el contenedor de los slides. Por ejemplo, añadir estilos de flex para alinear slides.
children	node		Contenido del componente.
colorStyle	"accent" \| "secondary"	accent	Color de flachas de navegación y el paginado.
paddingStyle	bool		Si es igual a "true", el contenedor tendrá el valor de padding añadido.
navigationArrowStyles	object		Estilo de posición de las flechas de navegación.
showNavigationArrows	bool	false	Si es igual a "true", se mostrarán las flechas de navegación.
showPagination	bool	false	Si es igual a "true", el componente mostrará la paginación.
slideWidthXs	string		Ancho de los slides en breakpoint xs.
slideWidthMobile	string		Ancho de los slides en breakpoint mobile.
slideWidthSm	string		Ancho de los slides en breakpoint sm.
slideWidthMd	string		Ancho de los slides en breakpoint md.
slideWidthLg	string		Ancho de los slides en breakpoint lg.
slideWidthXl	string		Ancho de los slides en breakpoint xl.
spaceBetween	number		Ancho del espacio entre slides.