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 {
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 없어짐
npm install --save sass