87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
import {
|
|
Box,
|
|
useBreakpointValue,
|
|
useColorModeValue,
|
|
Stack,
|
|
Container,
|
|
AspectRatio,
|
|
} from '@chakra-ui/react';
|
|
import React from "react"
|
|
import Slider from 'react-slick'
|
|
// import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi';
|
|
import "slick-carousel/slick/slick.css";
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
|
|
const settings = {
|
|
dots: true,
|
|
arrows: false,
|
|
fade: true,
|
|
infinite: true,
|
|
autoplay: true,
|
|
speed: 500,
|
|
autoplaySpeed: 4000,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
swipeToSlide: true,
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {string} url all images point to the same url
|
|
* @param {array} cards
|
|
* @returns
|
|
*/
|
|
export const Carousel = ({ url, cards, ...rest }) => {
|
|
const [slider, setSlider] = React.useState(null)
|
|
|
|
const bg = useColorModeValue('white', 'gray.900')
|
|
|
|
// const top = useBreakpointValue({ base: '90%', md: '50%' })
|
|
// const side = useBreakpointValue({ base: '30%', md: '40px' })
|
|
|
|
return (
|
|
<Box
|
|
borderWidth="1px"
|
|
borderRadius="lg"
|
|
bg={bg}
|
|
boxShadow="lg"
|
|
p="0"
|
|
position="relative"
|
|
w="full"
|
|
overflow="hidden"
|
|
{...rest}>
|
|
|
|
{/* Slider */}
|
|
<Slider {...settings} ref={(slider) => setSlider(slider)}>
|
|
{
|
|
cards.length > 0 && cards.map((card, index) => (
|
|
<a key={index} href={url} target="_blank" rel="noreferrer">
|
|
<AspectRatio maxW='full' ratio={4/1} >
|
|
<Box
|
|
w="full"
|
|
position="relative"
|
|
borderRadius="5"
|
|
backgroundPosition="center"
|
|
backgroundRepeat="no-repeat"
|
|
backgroundSize="cover"
|
|
backgroundImage={`url(${card})`}>
|
|
{/* This is the block you need to change, to customize the caption */}
|
|
<Container size="container.lg" height="220px" position="relative">
|
|
<Stack
|
|
spacing={2}
|
|
w={'full'}
|
|
maxW={'lg'}
|
|
position="absolute"
|
|
top="50%"
|
|
transform="translate(0, -50%)">
|
|
|
|
</Stack>
|
|
</Container>
|
|
</Box>
|
|
</AspectRatio>
|
|
</a>
|
|
))}
|
|
</Slider>
|
|
</Box>
|
|
)
|
|
} |