Swiper.js

유요한·2022년 11월 23일
swiper.js
0

프론트(HTML & CSS & JS & React)

목록 보기
37/46
post-thumbnail

swiper.js

Swiper는 널리 사용되는 슬라이더 플러그인 중의 하나입니다.
swiper.js는 쉽게 슬라이드를 만들 수 있게 해놓 스크립트입니다..
공식 홈페이지에서 자료를 확인 가능합니다..

https://swiperjs.com/
https://unpkg.com/swiper@8.3.2/swiper-bundle.min.css
https://unpkg.com/swiper@8.3.2/swiper-bundle.min.js

적용

swiper.js를 적용하는 방법은 크게 2가지이다.

  1. cdn방식
    외부에서 받아와서 사이트에 적용시키는 방법이다.
    외부에서 파일을 없애 버리면 적용이 풀린다.

    아래는 공식 홈페이지에서 제공하는 cdn주소이다.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>    
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  • 다음과 같은 형식으로 마크업합니다.
  • 클래스 값이 swiper는 변경해도 됩니다. 
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
    	<img src="images/slider-01.jpg" alt="">
    </div>
    <div class="swiper-slide">
    	<img src="images/slider-02.jpg" alt="">
    </div>
    <div class="swiper-slide">
    	<img src="images/slider-03.jpg" alt="">
    </div>
    <div class="swiper-slide">
    	<img src="images/slider-04.jpg" alt="">
    </div>
    <div class="swiper-slide">
    	<img src="images/slider-05.jpg" alt="">
   	</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
</div>
  • 위에서 정한 클래스 값을 선택자로 하여 슬라이더를 실행합니다.
  • 이미지 전환이 자동으로 시작되고, 슬라이드 좌우에 화살표가 나옵니다. 
	<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  } );
</script>
  1. 직접 파일을 다운로드 받아서 파일을 적용시키는 방법

기본구조

swiper.js는 슬라이드 라이브러리로 다양한 메소드와 설정을 지원해서 사용하기 때문에 매우 편한 점이 있습니다. 사용법도 간단한데 아래와 같이 태그에 class만 넣어주고 스크립트에서 슬라이드로 사용할 태그를 지정만 해주면 됩니다. 주의할 점은 swiper 사용시 필수로 아래 구조와 같이 클래스 명을 지정해줘야 합니다.

swiper-container > swiper-wrapper > swiper-slide구조로 되어 있습니다.

HTML

	// 마크업
<div id="test-slide" class="swiper-container">
  <ul class="swiper-wrapper">
    <li class="swiper-slide">슬라이드1</li>
    <li class="swiper-slide">슬라이드2</li>
  </ul>
</div>

// 필수X (아래 옵션정리-추가설정-pagination 부분 참고)
<div class="pagination"></div>

자바스크립트

// 스크립트
<script type="text/javascript">
const slide = new Swiper('#test-slide', {
  // 다양한 옵션 설정, 
  // 아래에서 설명하는 옵션들은 해당 위치에 들어갑니다!!
  slidesPerView : '3', //슬라이드를 한번에 3개를 보여준다
  spaceBetween : 6, //슬라이드간 padding 값 6px씩 떨어트림
  // loop 를 true 로 할경우 무한반복 슬라이드
  // false 로 할경우 슬라이드의 끝에서 더보여지지 않음
  loop: true, 
});
</script>

이렇게 자바스크립트 코드를 세팅해주면 슬라이드로 나온다.
그 외 디자인의 슬라이드를 찾고 싶을때는
https://swiperjs.com/demos
위 사이트에서 여러가지 슬라이드 예시를 보여주고 있는데 source code 버튼을 누르면 페이지가 git으로 이동하는데 하단으로 내려보면 script 코드 부분을 내가 올린 코드와 비교해서 복사 붙여넣기 하면된다.

옵션 정리

swiper 옵션 설정을 변수에 담아서 사용할 수도 있습니다. 변수에 담아서 사용시에 설정을 재활용하기 편하다는 장점이 있습니다.

<script>
	// 일반 swiper 설정 예시
const slide = new Swiper('#test-slide', {
  slidesPerView : 'auto',
  spaceBetween : 6, 
})

// 변수에 담아서 활용 예시
var slideSetting = {
  slidesPerView : 'auto',
  spaceBetween : 6,
  loop : false,
}
const slide = new Swiper('#test-slide', slideSetting)
<script>



Swiper 전체 HTML 레이아웃

	<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

CSS 스타일



기본설정

기본적으로 슬라이드를 사용할 때 거의 필수로 설정하는 설정 요소들입니다. 한 화면에 보여줄 슬라이드의 갯수 설정, 슬라이드 간의 사이 여백, 반복 여부 등 기본적인 설정을 정리했습니다.

// 한 슬라이드에 보여줄 갯수
slidesPerView : 'auto',
// 슬라이드 사이 여백
spaceBetween : 6,
// 슬라이드 반복 여부
loop : false, 
// 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
loopAdditionalSlides : 1,
// pager 여부
pagination : false,
// 자동 슬라이드 설정 , 비 활성화 시 false
autoplay : {  
// 시간 설정
  delay : 3000,   
  // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음
  disableOnInteraction : false,  
},
// 버튼 사용자 지정
navigation: {   
	nextEl: '.swiper-button-next',
	prevEl: '.swiper-button-prev',
},

추가 설정

// 슬라이드 넘길 때 위치 고정 여부
freeMode : false, 
// true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 
// 높이에 맞게 높이를 조정합니다.
autoHeight : true,
// 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!
a11y : false, 
// 슬라이드 터치에 대한 저항 여부 설정
resistance : false, 
// 해당 슬라이드 클릭시 슬라이드 위치로 이동
slideToClickedSlide : true,
// true시에 슬라이드가 가운데로 배치
centeredSlides : true 
// false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
allowTouchMove : true,
// 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
watchOverflow : true 
// 슬라이드 시작 부분 여백
slidesOffsetBefore : number,
// 슬라이드 시작 부분 여백
slidesOffsetAfter : number, 
// 페이저 버튼 사용자 설정
pagination : {   
// 페이저 버튼을 담을 태그 설정
  el : '.pagination',
  // 버튼 클릭 여부
  clickable : true, 
  // 버튼 모양 결정 "bullets", "fraction"
  type : 'bullets',  
  // className이 기본값이 들어가게 필수 설정
  renderBullet : function (index, className) {  
    return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
  },
  // type이 fraction일 때 사용
  renderFraction: function (currentClass, totalClass) { 
    return '<span class="' + currentClass + '"></span>' +
           '<span class="' + totalClass + '"></span>';
  }
},

초기화 설정

초기화 설정 방법은 2가지가 있습니다. swiper가 초기화 될 때, 초기화 된 후 설정을 할 수가 있습니다.

on을 매개 변수로 전달 할 시에 swiper가 생성될 때 즉, 초기화 될 때 설정을 해줄 수가 있고 다른 방법으로 아래 코드처럼 따로 사용 시에는 swiper가 이미 만들어지고 나서 동작하기 때문에 초기화 된 후 동작합니다.

초기화 설정과 관련하여 수많은 설정이 있기 때문에 아래 참고사이트에서 필요한 부분을 찾아서 사용하는 것이 좋습니다.

스와이퍼 초기화

	// 매개 변수로 사용시 swiper가 초기화 될 때 동작합니다.
var mySwiper = new Swiper('.swiper-container', {
  on : {
    init : function () {
      console.log('swiper 초기화 될때 실행');
    },
    // 모든 내부 이미지가 로드 된 직후 이벤트가 시작됩니다.
    imagesReady : function () { 
      console.log('슬라이드 이미지 로드 후 실행');
    },
  },
};

// swiper가 초기화 된 후 동작합니다.
var mySwiper = new Swiper('.swiper-container', {
  // ...
};
mySwiper.on('init', function () {
  console.log('slide가 초기화 설정을 마친 후 실행');
});

반응형 설정

swiper는 breakpoints라는 객체로 반응형 설정이 가능합니다. 아래 설정은 브라우저의 가로 크기가 768px 이하 일 때 동작하는 예시입니다.

	breakpoints : { // 반응형 설정이 가능 width값으로 조정
  768 : {
    slidesPerView : 1,
  },
},

//5.3.0부터 "비율"(너비 / 높이)로 설정이 가능해졌습니다.
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  breakpoints: {
    '@0.75': {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    '@1.00': {
      slidesPerView: 3,
      spaceBetween: 40,
    },
    '@1.50': {
      slidesPerView: 4,
      spaceBetween: 50,
    },
  }
});

Pagination 추가하기

  1. 페이지네이션을 추가하고 싶다면 <div class="swiper-pagination"></div>를 추가합니다.

  2. pagination 옵션을 추가합니다.

  • el : 페이지네이션을 추가할 요소의 클래스 값
  • types : 페이지네이션의 모양
  • clickable : 클릭했을 때 이동 가능하게
    	<script>
 const swiper = new Swiper( '.swiper', {
   autoplay: true,
   loop: true,
   navigation: {
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev',
   },
   pagination: {
     el: '.swiper-pagination',
     type: 'bullets',
     clickable: true,
   },
 } );
</script>
    슬라이더 아래에 동그라미 형태의 페이지네이션이 추가되고, 클릭하면 해당 슬라이더로 이동합니다. 

	<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="http://placehold.it/300x100" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="http://placehold.it/300x100" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="http://placehold.it/300x100" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
	function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

→ 버튼을 클릭하면 그쪽으로 이동

자동으로 옮겨짐

	<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="http://placehold.it/300x100" style="width:100%">
  <div class="text">Caption One</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="http://placehold.it/300x100" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="http://placehold.it/300x100" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>
<br>

<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
	* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #000000;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
	var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

→ 자동으로 진행됨

여러 슬라이드 동시에 보기

여러 슬라이드가 동시에 보이게 하고 싶다면 sliderPerView 옵션을 추가합니다. 값은 한 화면에 나오는 슬라이드 수입니다.

sliderPerGroup은 슬라이드 전환 시 넘어가는 슬라이드 수입니다.

다음은 3개의 슬라이드가 보이고, 하나씩 전환되는 예입니다.

<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    slidesPerView: 3,
    slidesPerGroup : 1,
  } );
</script>

이때 슬라이드 높이를 유지한 채 좌우를 자르게 되는, 전체 이미지가 나오게 하고 싶다면 스타일을 추가한다. 

	<style>
  .swiper-slide img {
    max-width: 100%;
  }
</style>

해상도에 따라 옵션 변경하기

breakpoints를 이용하여 해상도에 따라 다른 옵션을 지정할 수 있습니다.
아래는 768px 미만에서는 슬라이더가 2개, 768px 이상에서는 슬라이더가 3개, 1024px 이상에서는 슬라이더가 4개 나오게 하는 예제입니다.

	<script>
  const swiper = new Swiper( '.swiper', {
    autoplay: true,
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    slidesPerView: 2,
    slidesPerGroup : 1,
    breakpoints: {
      768: {
        slidesPerView: 3,
      },
      1024: {
        slidesPerView: 4,
      }
    }
  } );
</script>

실제사용

swiper.js 사이트에 들어간다.
Use Swiper from CDN에 있는 코드를 복사를 해준다

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

이걸 html파일 head에 집어 넣어준다.

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

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

    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

Add Swiper HTML Layout에 있는 코드를 복사 

	<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

html body에 넣어준다.

	<body>
    <!-- Slider main container -->
<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
  
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>
</body>

Initialize Swiper에 있는 코드를 js에 넣어주고 사용할 것만 써준다.

		const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

클래스명을 맞춰서 만들어줘야 한다.(클래스명 변경불가)

	<!-- swiper슬라이더 메인컨테이너 -->
<div class="swiper-container">
  <!-- 보여지는 영역 -->
  <div class="swiper-wrapper">
    <!-- div class="swiper-slide" 를 추가하면된다 -->
    <div class="swiper-slide">
      <img src="/resource/img/slide1.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
    <div class="swiper-slide">
      <img src="/resource/img/slide2.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
    <div class="swiper-slide">
      <img src="/resource/img/slide3.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
    <div class="swiper-slide">
      <img src="/resource/img/slide4.jpg" alt="이미지를 지원하지 않습니다." />
    </div>
   </div>
  <!-- 페이징 버튼 처리 -->
  <div class="swiper-pagination"></div>

  <!-- 방향 버튼 상황에 따라 추가 삭제가능 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
	const swiper1 = new Swiper('.swiper1', {
            //기본 셋팅
            //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
            direction: 'horizontal',
            //한번에 보여지는 페이지 숫자
            slidesPerView: 1,
            //페이지와 페이지 사이의 간격
            spaceBetween: 0,
            //드레그 기능 true 사용가능 false 사용불가
            debugger: true,
            //마우스 휠기능 true 사용가능 false 사용불가
            mousewheel: true,
            //반복 기능 true 사용가능 false 사용불가
            loop: true,
            //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
            centeredSlides: true,
            // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
            // effect: 'fade',
            speed: 1000,
            //자동 스크를링
            autoplay: {
                //시간 1000 이 1초
                delay: 3500,
                disableOnInteraction: false,
            },
            //페이징
            pagination: {
                //페이지 기능
                el: '.swiper-pagination',
                //클릭 가능여부
                clickable: true,
            },
        });
        const swiper2 = new Swiper('.swiper2', {
            //기본 셋팅
            //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
            direction: 'horizontal',
            //한번에 보여지는 페이지 숫자
            slidesPerView: 1,
            //페이지와 페이지 사이의 간격
            spaceBetween: 0,
            //드레그 기능 true 사용가능 false 사용불가
            debugger: true,
            //마우스 휠기능 true 사용가능 false 사용불가
            mousewheel: true,
            //반복 기능 true 사용가능 false 사용불가
            loop: false,
            //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
            centeredSlides: true,
            // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
            // effect: 'fade',
            speed: 1000,
            //자동 스크를링
            autoplay: {
                //시간 1000 이 1초
                delay: 3500,
                disableOnInteraction: false,
            },
            //페이징
            pagination: {
                //페이지 기능
                el: '.swiper-pagination',
                //클릭 가능여부
                clickable: true,
                type: 'bullets',
            },
        });


// 상세 예시
const swiper = new Swiper('.swiper-container', {
        //기본 셋팅
        //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
        direction : 'horizontal',
        //한번에 보여지는 페이지 숫자
        slidesPerView : 1,
        //페이지와 페이지 사이의 간격
        spaceBetween : 30,
        //드레그 기능 true 사용가능 false 사용불가
        debugger : true,
        //마우스 휠기능 true 사용가능 false 사용불가
        mousewheel : true,
        //반복 기능 true 사용가능 false 사용불가
        loop : true,
        //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
        centeredSlides : true,
        // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
        // effect: 'fade',
        speed : 1000,
        //자동 스크를링
        autoplay : {
            //시간 1000 이 1초
            delay : 3500,
            disableOnInteraction : false,
        },
        //페이징
        pagination : {
            //페이지 기능
            el : '.swiper-pagination',
            //클릭 가능여부
            clickable : true,
        },
        //방향표
        navigation : {
            //다음페이지 설정
            nextEl : '.swiper-button-next',
            //이전페이지 설정
            prevEl : '.swiper-button-prev',
        },
    });

swiper slide를 여러개 사용할 수 있다.

위의 코드를 복사해서 테스트를 해볼 경우, script는 1개만 사용하며, script의 const swiper1 = new Swiper('.swiper1',{ 부분을 const swiper = new Swiper('.swiper-container', { 로 클래스명을 html 태그의 클래스와 동일시 시켜주어야 슬라이드가 작동된다❗ 

<!DOCTYPE html>
<html lang="en">
    <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>swiper</title>
        <link
            rel="stylesheet"
            href="https://unpkg.com/swiper/swiper-bundle.css"
        />
        <link
            rel="stylesheet"
            href="https://unpkg.com/swiper/swiper-bundle.min.css"
        />
    </head>
    <body>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091734041.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091734396.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091734678.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091735314.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091735629.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091735879.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091736305.jpg" />
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-scrollbar"></div>
        </div>
        <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <script>
            const swiper = new Swiper(".swiper", {
                autoplay: true,
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <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>swiper</title>
        <link href="./css/swiper2.css" rel="stylesheet" />
        <link
            rel="stylesheet"
            href="https://unpkg.com/swiper/swiper-bundle.css"
        />
        <link
            rel="stylesheet"
            href="https://unpkg.com/swiper/swiper-bundle.min.css"
        />
    </head>
    <body>
        <!--클래스명은 변경하면 안된다.-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091734041.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091734396.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091734678.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091735314.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091735629.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091735879.jpg" />
                </div>
                <div class="swiper-slide">
                    <img src="./img/KakaoTalk_20220725_091736305.jpg" />
                </div>
            </div>
            <!--네비게이션 버튼-->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>

            <!--페이징-->
            <div class="swiper-pagination"></div>
        </div>
        <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <script src="./js/swiper2.js"></script>
    </body>
</html>

.swiper-container {
    width: 650px;
    height: 440px;
    border: 5px solid silver;
    border-radius: 5px;
    box-shadow: 0 0 20px #ccc inset;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.swiper-slide {
    text-align: center;
    /*내용을 중앙정렬 하기 위해 flex사용*/
}
.swiper-slide img {
    border: 1px solid #000;
    box-shadow: 7px 7px #ccc;
    width: 650px;
    height: 440px;
}

new Swiper(".swiper-container", {
    // 동적 로딩 설정
    lazy: {
        // 이전, 다음 이미지는 미리 로딩
        loadPrevNext: true,
    },

    // 페이징 설정
    pagination: {
        el: ".swiper-pagination",
        // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
        clickable: true,
    },

    // 네비게이션 설정
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});
profile
유요한
발전하기 위한 공부
이전 포스트

DOM

다음 포스트

자바스크립트 애니메이션 라이브러리

0개의 댓글