[javascript] 공지사항 슬라이드로 만들기 (수직 슬라이드)

스타벅스 홈페이지를 보면 공시사항 내용들이 슬라이드 식으로 하나씩 노출된다.

위 이미지와 같은 이벤트를 구현할 때 자바스크립트 swiper 라이브러리를 이용하면 편리하다. 먼저 html의 head 영역에 각 script 코드를 적용시킨다. 이때 반드시 main 자바스크립트 파일 위에 적용시켜야 한다. (*swiper 라이브러리는 link 코드와 script 코드 둘 다 적용해야한다!)

<head>
<!--swiper 라이브러리 -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script defer src="./js/main.js"></script>
</head>

html의 body 영역엔 아래와 같은 클랙스를 가진 코드들이 있어야 동작한다.
.swiper-container / .swiper-wrapper / .swiper-slide
(***그 외에 다른 기능은 swiper 라이브러리 참고하기!!)

<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">내용1</div>
      <div class="swiper-slide">내용1</div>
      <div class="swiper-slide">내용3</div>
      <div class="swiper-slide">내용4</div>
    </div>
  </div>
</body>

그 후 아래와 같은 자바스크립트 파일에 아래의 코드를 적는다. (참고로 '.swiper-container' 요소는 공지사항 슬라이드될 영역인 div 요소이다.)

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

생성자 함수 Swiper를 실행시킨다. 함수의 구조는 new Swiper(선택자, 옵션(객체데이터))이다. 옵션에 슬라이드 방향을 수직으로 으로 하기 위해 direction: 'vertical', 슬라이드를 자동재생 시키기 위해 autoplay: true; , loop: true; 를 적는다.

'문제풀기' 카테고리의 다른 글

[javascript] 스크롤 시 뱃지 안보이게 하는 방법 (0)	2021.06.15
[자바크스립트 이론] 스코프 (0)	2021.06.07
[프로그래머스] 폰켓몬 (0)	2021.06.02
[프로그래머스] 내적 (0)	2021.06.01
[프로그래머스] 완주하지 못한 선수 (0)	2021.05.29

기록하자 🐾

[javascript] 공지사항 슬라이드로 만들기 (수직 슬라이드)

'문제풀기' 카테고리의 다른 글

티스토리툴바

[javascript] 공지사항 슬라이드로 만들기 (수직 슬라이드)

'문제풀기' 카테고리의 다른 글

'문제풀기' Related Articles

티스토리툴바