I have a little problem with SwiperJS. I use the version 10.1.0 and I have this code :
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
export default function Discover() {
return (
<>
<div className="m-0 mb-5 relative overflow-hidden bg-no-repeat bg-image-popular bg-cover font-sans">
<div className="relative z-10">
<Swiper
spaceBetween={0}
slidesPerView={1}
loop={true}
freeMode={true}
className="mySwipper my-12"
pagination={{
clickable: true,
}}
>
<SwiperSlide className="w-full px-2">
<div className="h-fit w-auto overflow-hidden opacity-100 container mx-auto ">
<div className="-m-1 flex flex-wrap md:-m-2">
<div className="flex w-1/2 flex-wrap">
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp"
/>
</div>
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
/>
</div>
</div>
<div className="flex w-1/2 flex-wrap">
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(77).webp"
/>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="w-full px-2">
<div className="h-fit w-auto overflow-hidden opacity-100 container mx-auto ">
<div className="-m-1 flex flex-wrap md:-m-2">
<div className="flex w-1/2 flex-wrap">
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp"
/>
</div>
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
/>
</div>
</div>
<div className="flex w-1/2 flex-wrap">
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(77).webp"
/>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="w-full px-2">
<div className="h-fit w-auto overflow-hidden opacity-100 container mx-auto ">
<div className="-m-1 flex flex-wrap md:-m-2">
<div className="flex w-1/2 flex-wrap">
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp"
/>
</div>
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
/>
</div>
</div>
<div className="flex w-1/2 flex-wrap">
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(77).webp"
/>
</div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide className="w-full px-2">
<div className="h-fit w-auto overflow-hidden opacity-100 container mx-auto ">
<div className="-m-1 flex flex-wrap md:-m-2">
<div className="flex w-1/2 flex-wrap">
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(70).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(72).webp"
/>
</div>
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
/>
</div>
</div>
<div className="flex w-1/2 flex-wrap">
<div className="w-full p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp"
/>
</div>
<div className="w-1/2 p-1 md:p-2">
<img
alt="gallery"
className="block h-full w-full rounded-lg object-cover object-center"
src="https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(77).webp"
/>
</div>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
</div>
</div>
</>
);
}
But, the Freemode and the Pagination option don't work, do you know why ? I already try to do this :
import { FreeMode, Pagination } from 'swiper/modules';
<Swiper
spaceBetween={0}
slidesPerView={1}
loop={true}
freeMode={true}
className="mySwipper my-12"
pagination={{
clickable: true,
}}
modules={[FreeMode, Pagination]}
></Swiper>
But I have this errors : Cannot find module 'swiper/modules' or its corresponding type declarations. Type '{ children: Element[]; spaceBetween: number; slidesPerView: number; loop: true; freeMode: true; className: string; pagination: { clickable: true; }; modules: any[]; }' is not assignable to type 'IntrinsicAttributes & Swiper'.
Finaly, I find a solution, we have to use react-id-swiper and it works well !