📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021
<script>
const swiper = new Swiper(".wrap", {
// 프레임의 요소명
direction: "horizontal", // 스와이프 방향
loop: true, // 순환 여부
pagination: {
el: ".swiper-pagination", // 페이지 메뉴 요소명
type: "fraction", // 페이지 버튼 대신 슬라이더 번호 출력
},
navigation: {
nextEl: ".swiper-button-next", // 다음 버튼 요소명
prevEl: ".swiper-button-prev", // 이전 버튼 요소명
},
spaceBetween: 0, // 패널 사이의 간격을 0px로 설정
slidesPerView: "auto", // CSS에 지정한 슬라이더의 크기를 반영
grabCursor: true, // 스와이프 시 마우스 포인터 모양 변경
centeredSlides: true, // 슬라이더 패널을 항상 가운데로 정렬
speed: 1000, // 슬라이더 이동 속도 지정
effect: "coverflow", // 이펙트 효과 지정
coverflowEffect: {
rotate: 50, // 회전 각도 지정
stretch: -100, // 슬라이드 간의 당김 정도 지정
depth: 400, // 원근감 지정
modifier: 1, // 중첩 정도 지정
slideShadows: false, // 슬라이드의 그림자 생성
},
});
</script>
@keyframes ani {
0% {
opacity: 0;
transform: scale(1);
}
1% {
opacity: 0.5;
}
100% {
opacity: 0;
transform: scale(1.4);
}
}
.wrap .swiper-wrapper .swiper-slide-active .inner::before {
animation: ani 1s ease 1;
}
.wrap .swiper-wrapper .swiper-slide-active .inner::after {
animation: ani 1s ease 0.3s 1;
}
<script>
const swiper = new Swiper(".wrap", {
autoplay: {
delay: 1000,
disableOnInteraction: true,
},
});
// .btnStart 요소를 찾아서 btnStart에 저장
const btnStart = document.querySelector(".btnStart");
// .btnStop 요소를 찾아서 btnStop에 저장
const btnStop = document.querySelector(".btnStop");
// btnStart 버튼 클릭 시 자동 스와이프 시작
btnStart.addEventListener("click", () => {
swiper.autoplay.start();
});
// btnStop 버튼 클릭 시 자동 스와이프 정지
btnStop.addEventListener("click", () => {
swiper.autoplay.stop();
});
</script>
Swiper 플러그인을 사용하여 스와이퍼 프레임과 각 슬라이드 요소를 쉽게 설정할 수 있었다. 플러그인을 활용해 JavaScript를 보다 간편하게 작성할 수 있다는 것을 알았고, 키프레임을 사용해서 현재 활성화된 패널에 모션 효과를 추가했다.