react 로 swiper 사용하기

설치방법

npm i swiper

 

사용방법

https://swiperjs.com/demos

Swiper Demos

https://open-code.tech/en/post-1261/

Swiper Demo 19 Slider

사이트 들어가셔서 원하시는 데모의 CodeSandbox: React 를 클릭하면

import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';

import './styles.css';

// import required modules
import { Navigation } from 'swiper/modules';

export default function App() {
  return (
    <>
      <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

이런식으로 코드가 뜨게 되고 사용하면 됩니다.

 

옵션은 Swiper 컴포넌트에 props로 넘겨주면 됩니다.

      <Swiper
              navigation={true}
              modules={[Navigation]}
              className="mySwiper"
              slidesPerView={8}
              spaceBetween={15}
            >
            
        <SwiperSlide>Slide 1</SwiperSlide>

      </Swiper>

or

      <Swiper
      style={{height:'380px'}}
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      navigation
      pagination={{ clickable: true }}
      loop={true}
      autoplay={true}
    >

 

 

Navigation, Pagination, Autoplay 를 사용할 때는 import에 추가해 줍니다.

import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';