zhusen / canrud-web-front · Files

"use client"
import { Swiper as SwiperComponent, SwiperSlide } from 'swiper/react';

import { Autoplay, FreeMode, Pagination } from 'swiper/modules';
import 'swiper/css/free-mode';
import 'swiper/css/pagination';
import 'swiper/css';
import { Card } from '@mui/material';

const Swiper = ({ list }) => {
  return <SwiperComponent
    slidesPerView={3}
    spaceBetween={20}
    freeMode={true}
    autoplay={{
      delay: 2000,
      disableOnInteraction: false,
    }}
    pagination={{
      clickable: true,
    }}
    modules={[Autoplay, FreeMode, Pagination]}
    className="mySwiper"
  >
    {list.map(item => {
      return <SwiperSlide className='p-2'> <Card key={item.title} >
        <img src={item.imageUrl} alt={item.title} className="mb-2 " />
        <div className="text-center">{item.title}</div>
      </Card></SwiperSlide>
    })}
  </SwiperComponent>
}

export default Swiper