요소 슬라이드 - 공지사항 (Swiper)

swiper.js를 사용해 수직으로 자동으로 슬라이드하는 공지사항을 구현한다.

코드

HTML

<div class="notice-line">
      <div class="bg-left"></div>
      <div class="bg-right"></div>
      <div class="inner">
        <div class="inner__left">
          <h2>공지사항</h2>
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="javascript:void(0)">크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내</a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">[당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트</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>
        <div class="inner__right">
          <h2>스타벅스 프로모션</h2>
          <div class="toggle-promotion">
            <div class="material-icons">upload</div>
          </div>
        </div>
      </div>
    </div>

CSS

.notice .notice-line {
  position: relative;
}

.notice .notice-line .bg-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #333;
}

.notice .notice-line .bg-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #f6f5ef;
}

.notice .notice-line .inner {
  height: 62px;
  display: flex;
}

.notice .notice-line .inner .inner__left {
  width: 60%;
  height: 100%;
  background-color: #333;
  display: flex;
  align-items: center;
}

.notice .notice-line .inner .inner__left h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-right: 20px;
}

.notice .notice-line .inner .inner__left .swiper {
  height: 62px;
  flex-grow: 1;
}

.notice .notice-line .inner .inner__left .swiper .swiper-slide {
  height: 62px;
  display: flex;
  align-items: center;
}

.notice .notice-line .inner .inner__left .swiper .swiper-slide a {
  color: #fff;
}

.notice .notice-line .inner .inner__left .notice-line__more {
  width: 62px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notice .notice-line .inner .inner__left .notice-line__more .material-icons {
  color: #fff;
  font-size: 30px;
}

.notice .notice-line .inner .inner__right {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.notice .notice-line .inner .inner__right h2 {
  font-size: 17px;
  font-weight: 700;
}

.notice .notice-line .inner .inner__right .toggle-promotion {
  width: 62px;
  height: 62px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notice .notice-line .inner .inner__right .toggle-promotion .material-icons {
  font-size: 30px;
}

JS

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

---

Swiper

Swiper는 하드웨어 가속 전환과 여러 기본 동작을 갖춘 현대적인 슬라이드 라이브러리

Getting Started With Swiper

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

<!-- in BODY -->
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
  </div>
</div>

Swiper API(옵션)

new Swiper(요소, 옵션);
new Swiper('.swiper', {
  direction: 'vertical', // 수직 슬라이드
  autoplay: true, // 자동 재생 여부
  loop: true // 반복 재생 여부
});

swiper 6버전에서는 가장 상위 요소에 swiper-container 클래스를 부여했지만 7버전에서 swiper 클래스를 부여하도록 변경되었다.