스타벅스 클론코딩-5 (PROMOTION 및 REWARDS)

 

MAIN CONTENT - NOTICE - PROMOTION

 

클론코딩 PROMOTION 특징

- 프로모션은 수평 슬라이드 형태로 보여짐

- 활성화(active) 된 프로모션이 중앙으로 위치, 다른 프로모션은 반투명 처리

- 사용자가 페이지 번호를 제어 가능함

- 토글 버튼(파란색 동그라미)으로 프로모션 가려짐과 보여짐을 제어

 

<!-- 프로모션 슬라이드 -->
<div class="promotion">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="./images/promotion_slide1.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!" />
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
      <div class="swiper-slide">
        <img src="./images/promotion_slide2.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!" />
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
      <div class="swiper-slide">
        <img src="./images/promotion_slide3.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!" />
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
      <div class="swiper-slide">
        <img src="./images/promotion_slide4.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!" />
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
      <div class="swiper-slide">
        <img src="./images/promotion_slide5.jpg" alt="2021 뉴이어, 스타벅스와 함께 즐겁고 활기차게 시작하세요!" />
        <a href="javascript:void(0)" class="btn">자세히 보기</a>
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-prev">
    <div class="material-icons">arrow_back</div>
  </div>
  <div class="swiper-next">
    <div class="material-icons">arrow_forward</div>
  </div>
</div>

 

.notice .promotion {
  height: 693px;
  background-color: #f6f5ef;
  position: relative;
  transition: height .4s;
  overflow: hidden;
}
.notice .promotion.hide {
  height: 0;
}
.notice .promotion .swiper-container {
  width: calc(819px * 3 + 20px);
  height: 553px;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: calc((819px * 3 + 20px) / -2);
}
.notice .promotion .swiper-slide {
  opacity: .5;
  transition: opacity 1s;
  position: relative;
}
.notice .promotion .swiper-slide-active {
  opacity: 1;
}
.notice .promotion .swiper-slide .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.notice .promotion .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet {
  background-color: transparent;
  background-image: url("../images/promotion_slide_pager.png");
  width: 12px;
  height: 12px;
  margin-right: 6px;
  outline: none; 
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet:last-child {
  margin-right: 0;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet-active {
  background-image: url("../images/promotion_slide_pager_on.png");
}
.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
  width: 42px;
  height: 42px;
  border: 2px solid #333;
  border-radius: 50%;
  position: absolute;
  top: 300px;
  z-index: 1;
  cursor: pointer;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .4s;
}
.notice .promotion .swiper-prev {
  left: 50%;
  margin-left: -480px;
}
.notice .promotion .swiper-next {
  right: 50%;
  margin-right: -480px;
}
.notice .promotion .swiper-prev:hover,
.notice .promotion .swiper-next:hover {
  background-color: #333;
  color: #fff;
}

 

// 프로모션 슬라이드 제어
new Swiper('.promotion .swiper-container', {
  // 방향(수평)은 기본값으로 지정됨
  // direction: 'horizontal'

  // 한번에 보여줄 슬라이드 개수
  slidesPerView: 3,
  // 슬라이드 사이 여백
  spaceBetWeen: 10,
  // 1번 슬라이드가 가운데 보이기
  centeredSlides: true,
  loop: true,
  // 자동 재생 객체 사용으로 추가적인 옵션 사용 가능
  autoplay: {
    // 딜레이(ms), 5초
    delay: 5000,
  },
  pagination: {
    // 페이지 번호 요소 선택자
    el: '.promotion .swiper-pagination',
    // 사용자의 페이지 번호 요소 제어 가능 여부
    clickable: true
  },
  navigation: {
    prevEl: '.promotion .swiper-prev',
    nextEl: '.promotion .swiper-next'
  }
});

// 토글 버튼으로 프로모션 제어
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');
  }
});

 

MAIN CONTENT - REWARDS

 

 

  <!-- REWARDS -->
  <section class="rewards">
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="inner">

      <div class="btn-group">
        <div class="btn btn--reverse sign-up">회원가입</div>
        <div class="btn sign-in">로그인</div>
        <div class="btn gift">e-Gift 선물하기</div>
      </div>
    </div>
  </section>

 

/* REWARDS */
.rewards {
  position: relative;
}
.rewards .bg-left {
  width: 50%;
  height: 100%;
  background-color: #272727;
  position: absolute;
  top: 0;
  left: 0;
}
.rewards .bg-right {
  width: 50%;
  height: 100%;
  background-color: #d5c798;
  position: absolute;
  top: 0;
  right: 0;
}
.rewards .inner {
  background-image: url("../images/rewards.jpg");
  height: 241px;
}
.rewards .btn-group {
  position: absolute;
  bottom: 24px;
  right: 0;
  width: 250px;
  display: flex;
  flex-wrap: wrap;
}
.rewards .btn-group .btn.sign-up {
  margin-right: 10px;
}
.rewards .btn-group .btn.sign-in {
  width: 110px;
}
.rewards .btn-group .btn.gift {
  margin-top: 10px;
  flex-grow: 1;
}