프론트엔드 16일차

waymo·2022년 5월 14일
0

패캠 FE 공부

목록 보기
17/28

16일차

요소 슬라이드


요소 슬라이드

수직 슬라이드

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


 <div class="swiper-container">
            <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>
.notice .notice-line .inner__left .swiper-container {
  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;
}
// new Swiper(선택자, 옵션)
new Swiper('.notice-line .swiper-container', {
    direction: 'vertical',
    autoplay: true,
    loop: true
});

swiperjs 헤드태그에 연결

코드를 적고 강의에 나오는 내용과 나의 실습 사이트가 달라서 무척 당황했다.
수직슬라이드 내용이 박스안을 넘어서 출력되는 현상이 발생했었다.
너무 당황해서 먼저했던 html과 css를 다시 비교해보며 실수한게 없나 보느라 시간을 오래 소모했다 ㅠㅠ
질의응답메뉴에서 찾아보니 swiper 버전차이 문제였다.
내가 사이트에서 복사했던 버전과 강의버전이 달라 출력되는 내용이 달라진거였다.
최신버전이 아닌 강의 내용의 버전으로 다시 적용되니 정상출력 되었다.
내일은 더 많이 수강하자!

profile
FE 개발자(진)가 되고 싶습니다

0개의 댓글