진스
swiper.js 가운데 정렬 및 기타 옵션 본문
728x90
모바일로 작업중이라 breakpoints 640만 보면 되는데. 이런식으로 슬라이드의 양옆으로 노출하고 싶다면.
const swiper2 = new Swiper('.swiper-container2', {
//방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
direction : 'horizontal',
//한번에 보여지는 페이지 숫자
slidesPerView : 3.5,
//페이지와 페이지 사이의 간격
spaceBetween : 30,
//해상도에 따른 조절
breakpoints: {
640: {
slidesPerView: 1.4,
spaceBetween:20,
slidesOffsetBefore: 0, // 왼쪽 여백
centeredSlides:true, // 슬라이드 가운데 정렬
scrollbar : {
el : '.swiper-scrollbar',
draggable: true,
dragSize: 150,
},
},
960: {
slidesPerView: 3,
spaceBetween: 40,
},
1024: {
slidesPerView: 3.5,
spaceBetween: 30,
},
},
//가운데 배치
centeredSlides:false,
//컨테이너 시작 부분(픽셀단위)
slidesOffsetBefore: 0,
//드레그 기능 true 사용가능 false 사용불가
debugger : true,
//마우스 휠기능 true 사용가능 false 사용불가
mousewheel : false,
//반복 기능 true 사용가능 false 사용불가
loop : false,
//선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
centeredSlides : false,
// 페이지 전환효과 slidesPerView효과와 같이 사용 불가
// effect: 'fade',
//탭안에 두개의 스와이프사용시 아래 추가
observer: true,
observeParents: true,
//자동 스크롤링
autoplay : false,
//페이징
pagination : {
//페이지 기능
el : '.swiper-pagination2',
//클릭 가능여부
clickable : true,
},
// 스크롤바 설정하기
scrollbar : {
el : '.swiper-scrollbar',
draggable: true,
dragSize: 300,
},
//방향표
navigation : {
//다음페이지 설정
nextEl : '.swiper-button-next2',
//이전페이지 설정
prevEl : '.swiper-button-prev2',
},
});
이중에서 이 두 옵션을 이용하자.
slidesOffsetBefore: 0, // 왼쪽 여백
centeredSlides:true, // 슬라이드 가운데 정렬
728x90
'JavaScript' 카테고리의 다른 글
휠 이벤트,터치 이벤트,스크롤을 원하는 속도로 부드럽게 이동하기 (1) | 2024.06.14 |
---|---|
숫자 키패드 입력시 다음 input으로 이동 (0) | 2024.01.17 |
find 함수에서 Arrow Function(화살표 함수)에서 undefined 일때 확인해볼 내용 (0) | 2023.02.19 |
es6 유용한 문법 (0) | 2022.11.09 |
페이지마다 해당 메뉴명에 색상 다르게 주기(속성값에 문자열이 포함확인) (0) | 2022.08.04 |
Comments