[swiper] 사용법

bunny.log·2022년 6월 2일
0

swiper 설치

npm install --save swiper

옵션 설정

slidesOffsetBefore 슬라이드 시작 부분 여백
slidesOffsetAfter 슬라이드 끝 부분 여백

slidesPerView 한 슬라이드에 보여줄 개수
spaceBetween 슬라이드 사이 여백

initialSlide 시작 위치 값
centeredSlides true 시 슬라이드가 가운데로 배치

navigation(네비게이션 적용)={{
nextEl: '.swiper-button-next', // 다음 버튼 클래스명
prevEl: '.swiper-button-prev', // 이전 버튼 클래스명
}}

pagination(페이징 적용)={{
el: '.pagination', 페이저 버튼 클래스명
clickable: true, 버튼 클릭 여부
type: 'bullets', 버튼 모양 결정, bullets, fraction
// 등등 ...
}}

autoplay { // 자동 슬라이드 설정 , 비 활성화 시 false
delay : 3000, // 시간 설정
disableOnInteraction : false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음
},
scrollbar(스크롤바 적용)={{
el: '.swiper-scrollbar',
draggable: true,
}},

breakpoints 반응형 설정
loop false 슬라이드 반복 여부
loopAdditionalSlides 1, 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정


import { Swiper, SwiperSlide } from 'swiper/react'; // basic
import SwiperCore, { Navigation } from 'swiper';
import 'swiper/css'; //basic
import 'swiper/css/navigation';
import 'swiper/css/pagination';


SwiperCore.use([Navigation, Pagination])

function MainPage() {
  return(
    <div>
      <Swiper
        className="banner"
        spaceBetween={50}
        slidesPerView={1}
        navigation
        pagination={{ clickable: true }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
      </Swiper>
    </div>
  )
}

export default MainPage;

swiper-button-next , prev 버튼 바꾸기

	.swiper-button-next {
		width: 60px;
		height: 60px;
		margin: 0 0 0 1740px;
		padding: 15px 22px;
		border-radius: 30px;
		box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
		background-color: #fff;
	}

	.swiper-button-prev {
		width: 60px;
		height: 60px;
		margin: 0 1740px 0 0;
		padding: 15px 22px;
		border-radius: 30px;
		box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
		background-color: #fff;
	}

	.swiper-button-next::after,
	.swiper-button-prev::after {
		display: none;
	}

display:none 를 하면 arrow 없어짐

scss 파일을 import할 때 에러가 발생한다면 sass 설치를 해야 한다

npm install --save sass

그외 내용
https://velog.io/@function_dh/JavaScript-Swiper-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EA%B5%AC%ED%98%84

https://fresh-mint.tistory.com/entry/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-swiper

profile
나를 위한 경험기록

0개의 댓글