mip-website/pages/components/slider.js

import React from 'react'
import SliderOne from '../../public/resource/slider/slier-1(1).webp'
import sliderJob from '../../public/resource/slider/slider-2(1).webp'
import sliderBook from '../../public/resource/slider/slider_3.webp'
import SliderCallCenter from '../../public/resource/slider/call-center.webp'

import Image from 'next/image'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Pagination } from 'swiper'
import Link from 'next/link'
const Slider = () => {
  return (
    <div>
      <Swiper pagination={true} autoplay={true} loop={true} modules={[Pagination]} className='mySwiper'>
        <SwiperSlide style={{ cursor: 'pointer' }} className='pointer'>
          <Link href='/stock-unit'>
            <img src={SliderCallCenter} />
          </Link>
        </SwiperSlide>
        <SwiperSlide style={{ cursor: 'pointer' }} className='pointer'>
          <Link href='/stock-price'>
            <img src={SliderOne} />
          </Link>
        </SwiperSlide>
        <SwiperSlide style={{ cursor: 'pointer' }} className='pointer'>
          <Link href='/recruitment'>
            <img src={sliderJob} />
          </Link>
        </SwiperSlide>
        <SwiperSlide style={{ cursor: 'pointer' }} className='pointer'>
          <img src={sliderBook} />
        </SwiperSlide>
      </Swiper>
    </div>
  )
}

export default Slider