영벨롭 개발 일지

[JavaScript]자바스크립트 Swiper 라이브러리 사용하기 본문

Programming Language/JavaScript

[JavaScript]자바스크립트 Swiper 라이브러리 사용하기

영벨롭 2022. 4. 22. 16:17

[ Swiper 라이브러리]

 

 swiper 라이브러리를 사용하면 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 추가할 수 있습니다. 

 

 아래 예시처럼, 화살표 버튼을 누르면 다음 슬라이드로 이동하거나 자동으로 슬라이드가 넘어가게 할 수도 있는 것이지요!

 

 

 

 

 

[ Swiper 라이브러리 연결하기 ]

 

 swiper를 사용하는 방법은 여러가지가 있지만, 저는 CDN으로 사용하겠습니다. 

 

 구글에 swipers 라고 검색하시고 다음 링크로 이동합니다. 

 

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

 메뉴 중에 Get Started 항목을 클릭하시면 CDN이 나와있습니다. 해당 코드를 복사해서 html 파일의 <head> 태그 내부에 작성해주세요.

 

 

  <!-- SWIPER 외부 라이브러리 연결-->
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

 

 

 

 

 

[ Swiper 규칙 지키기 ]

 

 자바스크립트에서 슬라이드 기능을 구현하기 위해선 HTML 작성 방식의 규칙이 존재합니다. 

 

 다음과 같이 클래스명을 동일하게 작성하신 뒤 코드를 작성하셔야 합니다. 

 

 

 

 

 

[ Swiper 초기화 ]

 

//new Swiper(선택자, 옵션)
const swiper = new Swiper('.swiper', {
	옵션: 값,
    	옵션: 값,
    	...
});

 

 

 

 

 

[ Swiper 옵션 속성 ]

 

옵션 값 설명
direction 'horizontal' (기본값)
'vertical'		 슬라이드 방향 지정
autoplay boolean 또는 object true : 자동 슬라이드 설정
object : 슬라이드 옵션 추가
loop boolean true : 무한 반복 슬라이드
false : 무한 반복하지 않음, 기본값
delay number 자동 슬라이드 시, 한 슬라이드에 머무르는 시간 (ms)
기본값: 3000
speed number 슬라이드 속도
기본값: 300
slidesPerView number 또는 'auto' 한 번에 몇 개의 슬라이드를 보여줄지를 지정
'auto'는 각 슬라이드 넓이에 맞게 자동 설정
spaceBetween number 슬라이드 사이의 간격
기본값 : 0
centeredSlides boolean true : 활성화된 슬라이드가 가운데 보이게 지정
false : 기본값
watchOverflow boolean 슬라이드가 되기 충분하지 않은 슬라이드 수일 경우, 슬라이드 비활성화
기본값 : false
breakpoints object 화면 넓이에 따라 레이아웃 변경(반응형 슬라이드)
단, slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn만 설정 가능
mousewheel boolen 또는 object 마우스휠로 슬라이드 이동
pagination {
   el: '.swiper-pagination',
   clickable: true
}		 페이징을 클릭하면 해당 영역으로 이동
페이지 번호 요소 선택자 지정 & 사용자의 페이지 번호 요소 제어 가능 여부 지정
navigation {
   prevEl : '.swiper-button-prev',
   nextEl : '.swiper-button-next'
}		 네비게이션 설정
이전 화살표 버튼과 다음 화살표 버튼

 

 

 

 

 

 

 

[ 예제 ]

 

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--css 초기화-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

  <!-- SWIPER 외부 라이브러리 연결-->
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  
  <!--google material icon 사용
  class="material-icons"-->
  <link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">

  <!-- main.css 연결 -->
  <link rel="stylesheet" href="./css/main.css">
  <!-- main.js 연결 -->
  <script defer src="./js/main.js"></script>
</head>

<body>

  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>

    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev">
      <div class="material-icons">arrow_back</div>
    </div>
    <div class="swiper-button-next">
      <div class="material-icons">arrow_forward</div>
    </div>
  </div>


</body>

</html>

 

.swiper {
  width: 500px;
  height: 100px;
  position: relative;
}

.swiper .swiper-slide {
  height: 100px;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.material-icons {
  font-size: 30px;
  color: white;
}

.swiper-button-prev::after,
.swiper-button-next::after{
  content: "";
  display: none;
}

.swiper-pagination {
  color: white;
}

.swiper-button-prev,
.swiper-button-next {
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-button-prev {
  left: 120px;
}
.swiper-button-next {
  right: 120px;
}

 

 

new Swiper('.swiper', {
  autoplay: {
    delay: 5000
  },
  loop: true,
  slidesPerView: 3,
  spaceBetween: 10,
  centeredSlides: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next'
  }
})

 

 

 

 

반응형
저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript]자바스크립트의 조건문 - if문, switch문  (0) 2022.05.04
[JavaScript]자바스크립트의 연산자: 산술, 할당, 비교, 논리, 삼항  (0) 2022.04.29
[JavaScript]자바스크립트 lodash 라이브러리: debounce, throttle  (0) 2022.04.21
[JavaScript]자바스크립트 DOM API란?  (0) 2022.04.21
[JavaScript]자바스크립트 GSAP 라이브러리 사용하기: gsap.to()  (0) 2022.04.19
'Programming Language/JavaScript' Related Articles more