swiper 플러그인 옵션정리

let swiper = new Swiper('#id', {
	slidesPerView : 보여질 개수,
	spaceBetween : 아이템 사이 간격,
	slidesPerGroup : 한번에 슬라이딩될 개수,
	threshold:100, //마우스 스와이프 민감도
	autoplay:{
		delay: 몇초후 시작,
	},
	navigation: {
		nextEl: 다음버튼 선택자,
		prevEl: 이전버튼 선택자,
	},
	pagination: {
		el: 페이징 선택자,
	},
	scrollbar:{
		el : '선택자',
        draggable: 스크롤바 이동으로 스와이프가 가능하게 할지, 
		dragSize: 스크롤바 크기,
    },
	loop: 무한반복 할지말지,
   	a11y: { // 웹접근성 
		enabled: true,
		prevSlideMessage: '이전 슬라이드',
		nextSlideMessage: '다음 슬라이드',   
		slideLabelMessage: '총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.',
	},
    breakpoints:{
    	280: {
           //280px 이하의 크기에서 옵션 값 
        },
        768 : {
        	//768px 이하의 크기에서 옵션 값 
        },
        1024 : {
           //1024px 이하의 크기에서 옵션 값 
        }
    }

})

예제 보기 

 

https://swiperjs.com/demos

Swiper Demos

 

 

 

스크롤바예제

https://codepen.io/burakcanince/pen/orVzRP

Swiper Slider with Scrollbar