クイックキャンパスネット講座で作成した★茶屋登録ページ。スライドを作ることができるスキージを学びました!垂直スライドも作成しました

通知スライド(Swiper)

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

HTML

          <div class="inner__left">
          <h2>공지사항</h2>
          <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <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>

JS

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

CSS

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

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