47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { useRef, useState } from 'react';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import 'swiper/css';
|
|
import 'swiper/css/free-mode';
|
|
import 'swiper/css/pagination';
|
|
import { A11y, Autoplay, Navigation, Scrollbar } from 'swiper/modules';
|
|
import { IMAGE_BASE_URL } from '../../api/config';
|
|
import Spinner from '../Utils/Loading/Spinner';
|
|
|
|
|
|
|
|
const WorksSwiper = ({ data, isLoading }: { data: any, isLoading: boolean }) => {
|
|
|
|
return (
|
|
<div className='works_Swiper'>
|
|
<Swiper
|
|
dir={'ltr'}
|
|
slidesPerView={5}
|
|
spaceBetween={66}
|
|
breakpoints={{
|
|
0: { slidesPerView: 1 },
|
|
400: { slidesPerView: 1 },
|
|
600: { slidesPerView: 3 },
|
|
900: { slidesPerView: 4 },
|
|
1200: { slidesPerView: 5 },
|
|
1500: { slidesPerView: 5 },
|
|
}}
|
|
autoplay={true}
|
|
modules={[Navigation, Scrollbar, A11y, Autoplay]}
|
|
pagination={{ clickable: true }}
|
|
className="mySwiper"
|
|
>
|
|
{
|
|
isLoading ? <Spinner /> :
|
|
data?.map((item: any, index: number) => (
|
|
<SwiperSlide key={index}>
|
|
<img src={IMAGE_BASE_URL + item?.image} alt="Works" />
|
|
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default WorksSwiper;
|