KDT 5th 웹개발자 입문 수업 16일차

1. Swiper 사용법

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

 

1. 가장 상단 부모는 swiper 클래스

2. 그 다음 은 swiper-wrapper 클래스로 묶어줘야 한다.

 

3. 슬라이드가 될 컨텐츠는 swiper-slide 클래스 안에 담아주고, 이는 자동으로 position absolute가 됨

즉, div.swiper > div.swiper-wrapper > div.swiper-slide 가 기본이다

HTML 구조로 일단 담아주고 CSS로 디자인 요소를 잡아준 다음 JS 기능을 넣어주는 순서로 작업해준다.

HTML 에 추가로 넣어줄 수 있는 요소들

• 슬라이드 버튼은 swiper-button-prev / swiper-button-next
• 슬라이드 페이지 위치 swiper-pagnation
• swiper-scrollbar

 

JS에서 new Swiper() 로 설정하기

• slidesPerView : value
  • 레이아웃 뷰 개수
• spaceBetween : value
  • 수평 여백
• breakpoints : { 640 : { slidesPerView : 2, .... } 768 : { ... } }
  • 반응형 width를 px 크기로 지정 가능
• centeredSlides : boolean
  • 센터 모드 on off
• autoplay : { delay : value(지연 시간), disableOnInteraction : boolean(스와이프 후 자동 재생 false), }
  • 자동 슬라이드 시 true
• loop : boolean
  • 슬라이드 반복 여부
• loopAdditionalSlides : value
  • 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
• pagination : { el : '선택자'(버튼을 담을 태그 설정), clickable : boolean(버튼 클릭 여부), }
  • 호출 pager 여부
• navigation : { nextEl : '', prevEl : '' }
  • 버튼 설정
• slideToClickedSlide : boolean
  • 해당 슬라이드 클릭시 슬라이드 위치로 이동

 

 

 

 

 

.swiper 클래스의 width와 height를 조절해주기 위해 메인 CSS에 넣어줘서 오버라이드 해준다.

 

2. notice 공지 부분 ~ 프로모션 슬라이드

2-1. HTML 구조 짜기

div.swiper > div.swiper-wrapper > div.swiper-slide 

<!-- Swiper Notice 부분 -->
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">탄소중립실천포인트제 도입 안내</div>
              <div class="swiper-slide">영상정보처리기기 운영방침 / 위치정보 이용약관 / 개인정보처리방침 이용약관 개정 안내</div>
              <div class="swiper-slide">시스템 개선 및 서비스 점검 안내</div>
              <div class="swiper-slide">설 연휴 스타벅스 딜리버리 운영 안내</div>
              <div class="swiper-slide">스타벅스 카드 온라인 재충전 / e-Gift Card 구매 가능 금액 안내</div>
            </div>
          </div>

 

2-2. height 크기를 꼭 지정 -> vertical 로 하기 위해

.swiper 와 .swiper-slide 의 height 크기를 지정해줘야 한다

한줄 수평 정렬은 line-height

section.notice .notice-line .inner .inner__left .swiper {
  position: absolute;
  left: 80px;
  width: 60%;
  height: 62px;
}
section.notice .notice-line .inner .inner__left .swiper .swiper-wrapper .swiper-slide {
  height: 62px;
  line-height: 62px;
  overflow: hidden;
  cursor: pointer;
}

 

2-3. JS 로 Swiper를 실행해주는 생성자를 new 로 만들면,

디자인 특성상 깨지는 경우가 있지만 놀라지말고 검사창으로 찬찬히 디버깅

const swiperNotice = new Swiper('section.notice .notice-line .inner .inner__left .swiper', {
  direction : 'vertical',
  loop : true,
  autoplay : true,
});

new Swiper() 로 만들어서 스와이프해줄 선택자를 첫번째 인자에, 두번째 인자에는 객체({ }) 형식으로 설정값을 넣어주는 형식이다.

direction은 수직 방향, loop 는 무한 루프, autoplay는 자동으로 슬라이드가 실행 될건지

direction : horizontal(기본값, 수평) / vertical(수직)

 

3. promotion 부분 슬라이드

2-1. HTML 구조

<div class="promotion">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/promotion1.jpg" alt="프로모션 이미지 1"/>
            <a href="#" class="btn btn--black">자세히 보기</a>
          </div>
          <div class="swiper-slide">
            <img src="./images/promotion2.jpg" alt="프로모션 이미지 2"/>
            <a href="#" class="btn btn--black">자세히 보기</a>
          </div>
          <div class="swiper-slide">
            <img src="./images/promotion3.jpg" alt="프로모션 이미지 3"/>
            <a href="#" class="btn btn--black">자세히 보기</a>
          </div>
        </div>
      </div>
    </div>

이미지를 넣어주는 swiper는 swiper-slide 클래스 안에 이미지 태그를 넣어서 적용해준다.

 

2-2. CSS

.notice .promotion {
  position: relative;
  height: 658px;
  background-color: #f6f5ef;
  overflow: hidden;
}
.notice .promotion .swiper {
  width: calc(819px * 3 + 20px);
  height: 553px;
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  top : 40px;
}

.notice .promotion .swiper .swiper-wrapper {}
.notice .promotion .swiper .swiper-wrapper .swiper-slide {
  opacity: .4;
  transition: .4s;
}
.notice .promotion .swiper .swiper-wrapper .swiper-slide-active {
  opacity: 1;
}
.notice .promotion .swiper .swiper-wrapper .swiper-slide .btn {
  position: absolute;
  width: 90px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

이미지가 들어간 슬라이드는 보이는 width 값을 정확히 정해줄 필요가 있음 

클래스명에 -active 를 붙여줘서 현재 메인으로 보이는 슬라이드를 지정해줄 수 있다

 

// swiper-button
.notice .promotion .swiper-button-prev {
  left: 50%;
  transform: translateX(-500px);
}
.notice .promotion .swiper-button-next {
  right : 50%;
  transform: translateX(500px);
}
.notice .promotion .swiper-button-prev,
.notice .promotion .swiper-button-next {
  position: absolute;
  top : 250px;
  width: 50px;
  height: 50px;
  border : 5px solid #333;
  color: #333;

  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.notice .promotion .swiper-button-prev::after,
.notice .promotion .swiper-button-next::after {
  font-size: 40px;
}

 

// pagination
.notice .promotion .swiper-pagination {
  width: 100px;
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.notice .promotion .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}
.notice .promotion .swiper-pagination-bullet-active {
  background-image: url('../images/promotion_on.png');
  background-size: cover;
  background-color: transparent;
}

슬라이드와 동일하게 -active를 클래스명에 넣어줘 액티브 됐을 때 CSS를 변경시켜줄 수 있다

 

 

2-3. JS

const swiperPromo = new Swiper('.notice .promotion .swiper', {
  direction : 'horizontal',
  slidesPerView : 3,
  spaceBetween : 10,
  centeredSlides : true,
  loop : true,
  autoplay : {
    delay: 4000,
    disableOnInteraction : false,
  },
  pagination : {
    el : '.promotion .swiper-pagination',
    clickable : true,
  },
  navigation : {
    prevEl : '.promotion .swiper-button-prev',
    nextEl : '.promotion .swiper-button-next',
  }
});

slidesPerView 는 한번에 보일 슬라이드 개수를

spaceBetween은 슬라이드 사이의 간격

centeredSlides 는 가운데에 슬라이드가 보일 것인가, 센터 여부

autoplay 키값에는 객체로 상세 값을 줄 수 있는데, delay 지연시간이나

disableOnIneteraction -> 이건 슬라이드되는 컨텐츠를 스와이핑(손으로 넘기는?) 행위를 막는(false) 속성이다

 

pagination 은 el 에 선택자를 넣어 페이지 이동을 구현하는 기능을, clickable 은 클릭할 수 있는지 boolean

navigation은 prev/next 버튼의 선택자를 넣어서 슬라이드를 이동시키는 기능을 넣어줄 수 있다.

 

// Autoplay 컨트롤 함수
function controlAutoPlay() {
  if(swiperPromo.autoplay.running === false) {
    swiperPromo.autoplay.start();
  } else {
    swiperPromo.autoplay.stop();
  }
}

pagination에 재생, 멈춤 버튼을 추가하기

 

a 태그이므로 onclick을 주려고하면 href="" 때문에 홈페이지가 자꾸 새로고침된다. 그러므로

href="javascript:void(0);" 로 바꿔주면 새로고침되는 것을 막아줄 수 있다. 또는 href="controlAutoPlay();" 로 지정해준다.

 

swiper의 autoplay 관련 함수는 autoplay.start() 와 autoplay.stop() 이 있고 이를 위해 autoplay.running 으로 true면 stop()을, false는 start()를 지정해준다.

 

// Promotion toggle 버튼
const promotionSection = document.querySelector('.promotion');
const promotionToggleBtn = document.querySelector('.notice .toggle-promotion');
promotionToggleBtn.addEventListener('click', function() {
  if(promotionSection.classList.contains('hide') === true) {
    promotionToggleBtn.classList.add('show');
    promotionSection.classList.remove('hide');
  } else {
    promotionToggleBtn.classList.remove('show');
    promotionSection.classList.add('hide');
  }
});

프로모션 버튼의 토글 기능을 클래스를 줘서 구현하기

section.notice .notice-line .inner .inner__right a {
  position: absolute;
  right: 20px;
  color: #111;
  transition: .4s;
}
section.notice .notice-line .inner .inner__right a.show {
  transform: rotate(180deg);
}



.notice .promotion {
  position: relative;
  height: 658px;
  background-color: #f6f5ef;
  overflow: hidden;
  transition: height .5s;
}
.notice .promotion.hide {
  height: 0;
}

 

 

 

3. 애니메이션 주기

3-1. 웹페이지가 로드되면 바로 애니메이션 

window.onload = function() {
  const visualSection = document.querySelector('.visual');
  visualSection.classList.add('animate');
};

animate 클래스는 아이템별로 시간 지연을 줘서 시간에 따라 띄워주기

 

일전에 :active로 줬던 애니메이션 효과를 클래스 .animate 로 변경한 다음

페이지가 로드 되면 바로 실행되는 함수인 window.onload = function() { } 으로 클래스를 추가해주게 작성해준다.

 

 

3-2. 스크롤 발생을 체크

window.scrollY 로 브라우저의 Y 값을 가져올 수 있는데, 이 값을 확인하며 window.addEventListener('scroll', function() { }) 으로 지정해준다.

window.addEventListener('scroll', function() {
  console.log(window.scrollY);
  if(window.scrollY > 693) {
    const elsalvadorSection = document.querySelector('.elsavador');
    elsalvadorSection.classList.add('animate');
  }

  if(window.scrollY > 1320) {
    const ethiopiaSection = document.querySelector('.ethiopia');
    ethiopiaSection.classList.add('animate');
  }

  if(window.scrollY > 1776) {
    const ethiopiaSection = document.querySelector('.favorite');
    ethiopiaSection.classList.add('animate');
  }

  if(window.scrollY > 2456) {
    const ethiopiaSection = document.querySelector('.magazine');
    ethiopiaSection.classList.add('animate');
  }

  if(window.scrollY > 2890) {
    const ethiopiaSection = document.querySelector('.find-store');
    ethiopiaSection.classList.add('animate');
  }
});

 

 

길고 길었던 스타벅스 메인 페이지가 끝났다.

https://jocular-cuchufli-21c4f9.netlify.app/#

Starbucks Coffe Korea