1import React from 'react';
2import {
3 HiChevronLeft,
4 HiChevronRight,
5 HiOutlineChevronLeft,
6 HiOutlineChevronRight,
7} from 'react-icons/hi';
8import { Navigation, Pagination } from 'swiper';
9import 'swiper/css';
10import 'swiper/css/navigation';
11import 'swiper/css/pagination';
12import { Swiper, SwiperSlide } from 'swiper/react';
13
14const Carousel = () => {
15 const items = new Array(10).fill(null);
16
17 return (
18 <div>
19 <div className="relative">
20 <Swiper
21 modules={[Navigation, Pagination]}
22 breakpoints={{
23 1200: {
24 slidesPerView: 3,
25 spaceBetween: 50,
26 },
27 }}
28 navigation={{
29 nextEl: '#next',
30 prevEl: '#prev',
31 }}
32 pagination={{
33 clickable: true,
34 bulletClass:
35 'w-2.5 h-2.5 bg-gray-200 block rounded-full cursor-pointer',
36 bulletActiveClass: 'bg-pink-400',
37 el: '#pagination',
38 }}
39 spaceBetween={10}
40 slidesPerView={1}
41 centeredSlides
42 loop
43 >
44 {items.map((_, index) => (
45 <SwiperSlide key={index}>
46 <div className="rounded-md bg-white shadow aspect-video"></div>
47 </SwiperSlide>
48 ))}
49 </Swiper>
50 <button
51 id="prev"
52 className="absolute top-1/2 left-4 -translate-y-1/2 z-10 text-gray-400"
53 >
54 <HiOutlineChevronLeft className="text-6xl" />
55 </button>
56 <button
57 id="next"
58 className="absolute top-1/2 right-4 -translate-y-1/2 z-10 text-gray-400"
59 >
60 <HiOutlineChevronRight className="text-6xl" />
61 </button>
62 </div>
63 <div
64 id="pagination"
65 className="flex items-center space-x-2 justify-center mt-4"
66 ></div>
67 </div>
68 );
69};
70
71export default Carousel;
