스타벅스 만들기4 - 슬라이드

Swiper를 이용하여 움직이는 공지사항

Swiper을 이용하여 공지사항의 텍스트가 자동으로 움직으도록 구현하였다.

Swiper 에 대한 정보는 링크 참조

<div class="inner__left">
          <h2>공지사항</h2>
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="javascript:void(0)">[당첨자 발표] 2025 스타벅스 영수증 이벤트</a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">스타벅스 카드 온라인 재충전 / 모바일 카드 구매 가능 금액 안내</a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">스타벅스 카드 이용약관 개정 안내</a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">시스템 개선 및 서비스 점검 안내</a>
              </div>
            </div>
          </div>
          <a href="javascript:void(0)" class="notice-line__more">
            <div class="material-icons">add_circle</div>
          </a>
        </div>

new Swiper('.notice-line .swiper', {
  direction: 'vertical',
  autoplay: true,
  loop: true
});

new Swiper(선택자, 옵션)
direction : 슬라이드 방향 지정
autoplay : 자동 재생과 관련된 설정
loop : 슬라이드 루프(무한 회전)을 활성화, 마지막 슬라이드 다음에 다시 첫 번째 슬라이드가 나타난다.

프로모션 숨기기

<div class="inner__right">
  <h2>스타벅스 프로모션</h2>
  <div class="toggle-promotion">
    <div class="material-icons">expand_less</div>
  </div>
</div>

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

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

const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
const promotionToggleBtnImg = document.querySelector('.toggle-promotion .material-icons');

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

이전 장에서 진행한 matarial icons을 이용하여 프로모션 버튼 모양을 구현하였다.
addEventListener을 이용하여 click이 일어날 때마다 함수가 호출되도록 하였다.
isHidePromotion의 기본 값이 false로 지정하여 click 행위가 일어날 때마다 isHidePromotion = !isHidePromotion로 isHidePromotion 값을 반대 (만얄 false면 true로)로 변경시켰다.

만약 isHidePromotion 가 true가 되면

  promotionEl.classList.add('hide');
  promotionToggleBtnImg.textContent = "expand_more"

promotionEl class에 hide를 추가함으로 CSS 코드에 hide 부분에 해당하는 스타일을 따르도록 만들고 텍스트를 expand_more로 변경시키면서 아이콘 또한 변경시켰다.

만약 isHidePromotion 가 false가 되면 하단에 해당하는 코드가 호출되도록 하였다.

프로모션 슬라이드

    <div class="promotion">
      <div class="swiper-pagination"></div>
      <div class="swiper-prev">
        <div class="material-icons">chevron_left</div>
      </div>
      <div class="swiper-next">
        <div class="material-icons">chevron_right</div>
      </div> 
    </div>

new Swiper('.promotion .swiper', {
  direction: 'horizontal',
  slidesPerView: 3, 
  spaceBetween: 10, 
  centeredSlides: true, 
  loop: true,
  autoplay: {
    delay: 300
  },
  pagination: {
    el: '.promotion .swiper-pagination', // 페이지 번호 요소 선택자
    clickable: true // 사용자 페이지 번호 요소 제어 여부
  },
  navigation: {
    prevEl: '.promotion .swiper-prev',
    nextEl: '.promotion .swiper-next'
  }
});

slidesPerView : 한번에 보여줄 슬라이드 개수
spaceBetween : 슬라이드 사이 여백
centeredSlides : 1번 슬라이드가 가운데 보이기

swiper-pagination

슬라이드 페이지 번호 및 이동

swiper-prev, swiper-next

슬라이드 이전, 다음 버튼

개발자 도구로 Swiper 살펴보기

Swiper의 경우 자동으로 클래스 명이 변경된다.
현재 슬라이드의 경우 class에 active가 붙어 있고 이전/다음 슬라이드에는 각각 prev,next가 붙었다.
이처럼 Swiper는 특정 클래스 명을 변경할 수 있다.
해당 기능을 이용하여 CSS을 이용하여 스타일을 변경할 수 있다.
하단 그림과 같이 현재 보고 있는 슬라이드는 선명하게 보이지만, 이전/다음 슬라이드의 경우 흐른 이미지로 보인다.

.notice .promotion .swiper-slide {
  opacity: 0.5;
  transform: opacity 1s;
  position: relative;
}

.notice .promotion .swiper-slide-active {
  opacity: 1;
}

swiper-slide에 스타일에 opacity를 이용하여 선명도를 0.5로 변경하였고, swiper-slide-active 해당하는 swiper-slide에만 선명도를 1로 지정하였다.