JavaScript 토글 보이기 숨김 기능 / 슬라이드 페이지네이션, 네비게이션 스타일 추가하는 방법

버튼(스타벅스 프로모션)을 클릭하면 아래 슬라이드 부분이 숨겨지고 나타나는 Toggle 기능

 

1. Swiper적용하기

 1-1. Swiper API 사이트에서 스크립트 가져오기

Swiper API

 1-2. JS에 들여오기

  ㄴ Optional Parameters (옵션 내 세부옵션은 객체화시켜 삽입 / 옵션은 콤마로 구분 / 마지막 콤마는 생략)

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

 

 

2. pagination 스타일 추가

📍 swiper 라이브러리에서 기본으로 스타일을 제공하기 때문에 개발도구를 열어 적용된 스타일을 확인한다.

📍 기본으로 제공하는 클래스명 : swiper-pagination-bullet / swiper-pagination-bullet-active

📍 기본으로 제공된 배경색을 없애고, 이미지를 넣어 스타일 완성

.notice .promotion .swiper-pagination { /*position값도 라이브러리에서 기본 제공*/
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 0;
}
.notice .promotion .swiper-pagination .swiper-pagination-bullet {
  background-color: transparent; /* 기본 배경색 제거 */
  background-image: url("../images/promotion_slide_pager.png");
  width: 13px;
  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");
}

 

 

3. navigation(화살표) 스타일 추가

📍 공통으로 적용가능한 스타일은 묶어준다.

📍 각각의 위치는 %를 사용한다.

.notice .promotion .swiper-prev,
.notice .promotion .swiper-next {
  width: 42px;
  height: 42px;
  outline: none;
  border: 2px solid #333;
  border-radius: 50%;
  position: absolute;
  /* Swiper Container 높이의 절반만큼 끌어올림 */
  /* 버튼 높이의 절반만큼 추가로 끌어올림 */
  top: 300px;
  z-index: 1;
  cursor: pointer;
  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;
}

 

 

4. Toggle버튼을 누르면 사라지고 나타나기 🚨

(JS 힌트)

1) 상수 '버튼', '슬라이드' 각각 생성

2) 변수 '숨겨진 상태' 생성

3) !를 이용한 조건문에 '숨김' class 추가

(CSS 힌트)

1) '숨김'클래스에 높이 0

2) '프로모션'에 transition, overflow

// PROMOTION TOGGLE
const promotionEl = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.toggle-promotion');
let isHidePromotion = false; // 프로모션이 보이니? = 아니

promotionToggleBtn.addEventListener('click', function (){
  isHidePromotion = !isHidePromotion // 반대의 상태를 나타내는 느낌표, fasle와 true
  if (isHidePromotion) {
    // 숨김처리 : 프로모션이 숨겨졌니? 아니fasle -> 숨겨줘true 
    promotionEl.classList.add('hide');
  } else {
    // 보임처리 
    promotionEl.classList.remove('hide');
  }
});

.notice .promotion {
  height: 693px;
  background-color: #f6f5ef;
  position: relative;
  transition: height .4s;
  overflow: hidden; /* hide클래스가 추가됐을 때 내용이 넘치므로 숨김 */
}

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