[html css js] 순차적으로 변경되는 공지사항 효과

            <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>

 

Swiper 라이브러리 이용

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

 

Swiper 라이브러리를 추가하고 html 요소의 class 명을 swiper, swiper-wrapper, swiper-slide로 구현한다.

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

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

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

위와 같이 css를 구현하고

아래와 같이 Swiper를 javascript에서 구현해주면 자동으로 바뀌는 공지사항 구현이 가능했다.

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

 

더 자세한 swiper라이브러리에 대한 내용은 https://swiperjs.com/ 를 참고한다.