swiper 슬라이더 연결하기

안녕하세요 찐망고입니다.

오랜만...이라는 글을 언제쯤 안 쓸 수 있을까요?

중요한 건 제 모든 포스팅이 예약 포스팅이라는 겁니다..🤣

 

오늘은 swiper슬라이더에 관련된 포스팅을 하려고 합니다.

 

제가 수업예제를 할 때 dbcut이나 gdweb에 올라온 사이트들을 참고하는데요.

 

gdweb메인페이지

늘 업데이트되어있는 사이트를 보고 기본적인 기초 수업이 끝난 후에 

반응형 사이트 하나 적응형 사이트 하나를 예제로 같이 만들어봐요.

예제는 일 년에 한 번씩 바꾸는 것 같고요..

일 년이 넘어가면 유행이 지난 느낌이랄까 ㅎㅎ

 

하루하루 업데이트된 사이트를 보다 보면 그때그때 유행하는 스타일이나 효과등을 확인할 수 있는데요.

 

포스팅 주제가 swiper다 보니 슬라이더 위주를 보자면

arrow버튼은 필수고

pagination에 스크롤과 숫자를 같이 사용하는 경우가 많고

정지와 재생버튼을 함께 집어넣는 경우가 많아요.

h-point

한살림장보기

다비치

프로스펙스

 

어떤 느낌인지 보이시나요~? 

 

물론 아직도 이렇게

금강제화

 

기본적인 pagination과 arrow를 사용하는 사이트도  있습니다.

 

저는 css3를 잘 다루고, css로 가능한 작업물은 최대한 css로 수정해야 한다는 사람이라 

최대한의 스크립트 혹은 api를 이용하여 요즘 유행하는 슬라이더를 만들어 보도록 하겠습니다.

 

 

 

 

swiper사이트에 접속해 봅니다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

get-started라는 메뉴를 클릭하고, 

https://unpkg.com/browse/swiper@8.2.2/

UNPKG - swiper

swiper-bundle.css파일과, swiper-bundle.min.js파일을 작업폴더에 다운로드하시면 되고, 

min파일은 압축파일이에요.. 수정을 하려면 min파일은 받으시면 안 됩니다. 

 

See the Pen swiper by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

codepen에선 swiper css를 걸어놓았기 때문에 필요한 부분만 따로 수정을 했습니다.

 

swiper는 기본적으로 arrow, pagination을 제공하고 있고 custom 하기도 매우 편리하게 되어있는 플러그인 중 하나입니다.

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

저렇게 형제로 요소를 추가하고 

스크롤바나 넘버링이 필요한 경우 type을 추가해 주면 됩니다. 

 pagination: {
      el: ".swiper-pagination",
      type: "progressbar", // fraction
 }

 

위에 있는 예제처럼 스크롤바와 추가로 넘버링을 주고 싶으면 따로 html을 작업하고

 <div class="count">
    <span class="current-num">1</span>
    -
    <span class="all-num">3</span>
  </div>

// jQuery

on: {
	activeIndexChange: function() {	
		const cIdx = this.realIndex + 1;
		$('.current-num').text(cIdx);
	},
},


//JavaScript

on: {
	activeIndexChange: function() {	
		const cIdx = this.realIndex + 1;
		const cIdx2 = "0" +  cIdx;
		const slideCount = document.querySelectorAll('.swiper-slide').length;
		const cNum = document.querySelector('.current-num')        
		const slideAllNum = document.querySelector(".all-num");
		if (cNum && slideAllNum) {
			cNum.textContent = cIdx2;
			slideAllNum.textContent = slideCount;
		},
    },
},

 

이런 식으로 추가로 custom을 해주면 가능합니다.

realIndex는 swiper에서 제공하는 api로 loop 모드에서 복제된 슬라이더를 고려한

현재 슬라이더의 index번호를 받을 수 있는 속성입니다.

 

슬라이더가 넘어갈 때마다 그 숫자값을 current-num이라는 클래스를 가진 span에게  text로 넣어달란 뜻이고

그 값을 받은 span요소의 숫자는 해당 슬라이더의 인덱스 번호대로 바뀌는 거죠  :)

전체슬라이더 개수는 all-num이라는 클래스를 가진 요소에 넣어 주게 됩니다.