250x250
Notice
Recent Posts
Recent Comments
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

진스

swiper.js 가운데 정렬 및 기타 옵션 본문

JavaScript

swiper.js 가운데 정렬 및 기타 옵션

입방정 2023. 8. 10. 17:49
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
Comments