[특별 부록] 스와이프 갤러리 제작하기

Iris·2021년 12월 20일
0
post-thumbnail

📖 최성일, ⌈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를 보다 간편하게 작성할 수 있다는 것을 알았고, 키프레임을 사용해서 현재 활성화된 패널에 모션 효과를 추가했다.

profile
👩🏻‍💻 Web Front-end Developer

0개의 댓글