Swiper Slide (슬라이드 배너)
https://swiperjs.com/demos
https://www.relation.co.kr/images_board/board_system_publishing/245/index.php

 

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

navigation: {   // 버튼 사용자 지정
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
},


** Swiper 추가 설정이다.
 freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
 autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.
 a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!
 resistance : false, // 슬라이드 터치에 대한 저항 여부 설정
 slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
 centeredSlides : true // true시에 슬라이드가 가운데로 배치
 allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
 watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
 slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
 slidesOffsetAfter : number, // 슬라이드 시작 부분 여백


** Swiper Pagenation
- 페이지징 4가지 타입
- bullets, progressbar, fraction, custom

- pagination type : bullets 
-  https://swiperjs.com/demos#pagination

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		type : 'bullets'
	}
});

- pagination type : progressbar 문법 코드 입니다.
- https://swiperjs.com/demos#pagination-progress

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_progress",   //페이징 태그 클래스 설정 
		type : 'progressbar'
	}
});

- pagination type' : fraction 문법 코드 입니다.
- https://swiperjs.com/demos#pagination-fraction

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_fraction",   //페이징 태그 클래스 설정 
		type : 'fraction'
	}
});

- pagination type' : custom 문법 코드 입니다.
- https://swiperjs.com/demos#pagination-custom

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		type : 'bullets',
		// Bullet Numbering 설정
		renderBullet: function (index, className) {
			return '' + (index + 1) + "";
		},
	}
});

pagination : {   //페이저 버튼 사용자 설정
    el : '.pagination',  // 페이저 버튼을 담을 태그 설정
    clickable : true,    // 버튼 클릭 여부
    type : 'bullets',    // 버튼 모양 결정 "bullets", "fraction" 
    renderBullet : function (index, className){  // className이 기본값이 들어가게 필수 설정
        return '' + (index + 1) + ''
    },
    renderFraction: function (currentClass, totalClass){ // type이 fraction일 때 사용
        return '' +'';
    }
},

초기 설정 방법
// 매개 변수로 사용시 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가 초기화 설정을 마친 후 실행');
});

반응형 초기 설정 방법

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,

    },
  }
});

사용 가능 메소드
swiper이름.메소드() 형식으로 사용할 수 있습니다.

// ex) mySlider.autoplay.start()
.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동
.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동
.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동
.autoplay.start(); // 자동 재생 시작
.autoplay.stop(); // 자동 재생 정지
.destroy() // 슬라이드 제거