☕️ JS 스타벅스 페이지 클론 코딩 #Swiper, 슬라이드, toggle

🍪 Swiper

https://swiperjs.com 해당 사이트에 접속해보면 최신 버전이 나와있습니다. 현재는 버전 8.4.5까지 업데이트 되어 있는 상태이며, 스타벅스 페이지 클론 코딩할때는 6버전을 사용했습니다.

6버전과 최신 버전 사용법의 가장 큰 차이점은 6버전은 최상위 요소의 클래스 명에 <div class="swiper-container"></div> 와 같이 'container' 를 붙여주어야 하고 8버전은 생략해서 swiper만 사용해주어야 한다는 점 입니다.

6버전의 연결 태그를 html script 태그 위에 작성해 줍니다.

<link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>

swiper를 사용하기 위한 기본 html 구조는 아래와 같습니다.

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
  </div>
</div>

수직 슬라이드를 위한 JS 코드는 아래와 같이 작성해주면 됩니다.

// 공자사항 슬라이드
// new Swiper(선택자, {옵션})
new Swiper(".notice-line .swiper-container", {
  direction: "vertical",
  autoplay: true,
  loop: true,
});

수평 슬라이드를 구현하고 싶다면 아래와 같이 작성해 줄 수 있습니다.

new Swiper(".promotion .swiper-container", {
  // direction: 'horizontal', 수평 방향은 기본값이라 생략가능
  slidesPerView: 3, // 한번에 보여줄 슬라이드 개수
  spaceBetween: 10, // 슬라이드 사이 여백
  centeredSlides: true, // 1번 슬라이드가 가운데 보이기
  loop: true,
  autoplay: {
    delay: 5000, // 5초 동안 자동 슬라이드
  },
  pagination: {
    el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
    clickable: true, // 사용자의 페이지 번호 요소 제어 가능 여부
  },
  navigation: { // 이전버튼 다음버튼
    prevEl: '.promotion .swiper-prev', // div 요소 선택자
    nextEl: '.promotion.swiper-next', // div 요소 선택자
  }
});

🍪 toggle

페이지의 일부분을 접었다 보여줬다 제어할 수 있는 toggle 기능은 다음과 같이 작성해 줄 수 있습니다.

const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
let isHidePromotion = false;

promotionToggleBtn.addEventListener('click', function () {
  isHidePromotion =!isHidePromotion;
  if (isHidePromotion) {
    //숨김 처리
    promotionEl.classList.add('hide');
  } else {
    //보임 처리
    promotionEl.classList.remove('hide');
  }
})

css 에서 height 값을 0으로 작성해주고, 자연스러운 효과를 위해 transition 값도 추가해 줄 수 있습니다.

.notice .promotion {
  height: 693px;
  background-color: #f6f5ef;
  position: relative;
  transition: height 0.4s;
  overflow: hidden;
}

.notice .promotion.hide {
  height: 0;
}