fix slider

src/components/swiper/MediaSwiper.tsx

@@ -1,11 +1,8 @@
 import React from 'react'
-import { Swiper, type SwiperProps, type SwiperRef, SwiperSlide } from 'swiper/react'
-import { A11y, Navigation, Pagination } from 'swiper/modules'
+import { type SwiperProps, type SwiperRef, SwiperSlide } from 'swiper/react'
 import { cn } from '@/libs/cn'
-import 'swiper/css'
-import 'swiper/css/navigation'
-import 'swiper/css/pagination'
-import {isAboveBreakpoint} from '@/libs/breakpoint'
+import { isAboveBreakpoint } from '@/libs/breakpoint'
+import { SimpleSwiper } from './SimpleSwiper'
 
 export type MediaSwiperProps = SwiperProps & {
   images: ImportAttributes[]
@@ -16,19 +13,20 @@ export type MediaSwiperProps = SwiperProps & {
 const isMd = isAboveBreakpoint('MD')
 
 export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
-  ({ images, className, modules = [], slideClassName, imageClassName, ...otherProps }, ref) => {
+  ({ images, className, slideClassName, imageClassName, ...otherProps }, ref) => {
     return (
-      <Swiper
+      <SimpleSwiper
         ref={ref}
-        modules={[Navigation, Pagination, A11y, ...modules]}
         slidesPerView={1}
+        freeMode={false}
+        mousewheel={false}
         navigation={isMd}
-        spaceBetween={24}
         pagination={{
-          clickable: true,
+          type: 'fraction',
         }}
         loop={true}
         watchSlidesProgress={true}
+        style={{ overflow: 'hidden' }}
         className={cn('h-full w-full', className)}
         {...otherProps}
       >
@@ -47,7 +45,7 @@ export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
             <div className="swiper-lazy-preloader border-brand"></div>
           </SwiperSlide>
         ))}
-      </Swiper>
+      </SimpleSwiper>
     )
   }
 )