Swiper.js 라이브러리 사용법

< swiper 적용 >

1. 스와이퍼 슬라이드 사이트 접속

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

2. Get start 연결 - CDN연결

CDN을 사용하는 이유!!

- 제이쿼리로 불러올때 CDN 방법을 주로 사용한다

 

CDN이란?

- 콘텐츠 전송 네트워크 라는 뜻으로 영화, 뮤직비디오, 스포츠등 내용을

인터넷 망을 통해 빠르고 안정적으로 전달해주는 콘텐츠 전송망 이라고 한다

CDN은 그냥 Swiper서버에서 js,css 파일을 가져다 쓰고 <link> 코드로 링크를 

불러오기만 하면 바로 사용이 가능하다

 

실무에서는 CDN으로 제이쿼리를 불러오는 방법을 많이 쓴다

- 업데이트가 자동으로 됩니다 

업데이트가 될 때마다 새로운 버전의 파일을 다운 받아서 일일히 서버에 올려야 

하는 것이다 그래서 실무는 CDN방식으로 일처리를 하는 듯하다

- 간단하고 편하다

제이쿼리를 불러와서 사용하는 방법이 은근 많은데 가장 간단하고 편한 방법이어서

실무에서 많이 쓰인다 CDN방식은 그냥 따로 파일을 다운받고 서버에

올려줄 필요 없이 두줄만 적어 놓으면 바로 불러옵니다.

 

자주 쓰는 옵션

let swiper = new Swiper('#id', {
	slidesPerView : 보여질 개수,
	spaceBetween : 아이템 사이 간격,
	slidesPerGroup : 한번에 슬라이딩될 개수,
    centeredSlides: true,    //센터모드
	threshold:100, //마우스 스와이프 민감도
	autoplay:{
		  delay: 2500, // 시간 설정
          disableOnInteraction: false, // false-스와이프 후 자동 재생
    loop: 무한반복 할지말지,
  
	},
	navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev",
	},
    pagination : {   // 페이저 버튼 사용자 설정
        el : '.pagination',  // 페이저 버튼을 담을 태그 설정
        clickable : true,  // 버튼 클릭 여부
        type : 'bullets', // 버튼 모양 결정 "bullets", "fraction" 
        renderBullet : function (index, className) {  // className이 기본값이 들어가게 필수 설정
            return '<a href="#" class="' + className + '">' + (index + 1) + '</a>'
        },
        renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
            return '<span class="' + currentClass + '"></span>' + '<span class="' + totalClass + '"></span>';
        }
    },
	scrollbar:{
		el : '선택자',
        draggable: 스크롤바 이동으로 스와이프가 가능하게 할지, 
		dragSize: 스크롤바 크기,
    },
   	a11y: { // 웹접근성 
		enabled: true,
		prevSlideMessage: '이전 슬라이드',
		nextSlideMessage: '다음 슬라이드',   
		slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
	},
    breakpoints:{
    	280: {
           //280px 이하의 크기에서 옵션 값 
        },
        768 : {
        	//768px 이하의 크기에서 옵션 값 
        },
        1024 : {
           //1024px 이하의 크기에서 옵션 값 
        }
    }

})

 

추가 옵션

freeMode : false, // 슬라이드 넘길 때 위치 고정 여부

autoHeight : true,  // 현재 활성 슬라이드높이 맞게 높이조정

a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) 

resistance : false, // 슬라이드 터치 저항 여부

slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동

allowTouchMove : true, // (false-스와이핑안됨)버튼으로만 슬라이드 조작이 가능

watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정

slidesOffsetBefore : number, // 슬라이드 시작 부분 여백

slidesOffsetAfter : number,

 

초기화 설정

초기화 설정 방법은 2가지가 있다. swiper가 초기화 될 때, 초기화 된 후 설정을 할 수가 있다.
on을 매개 변수로 전달 할 시에 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,
        },
    }
});