swiper-slide 총정리(사용법 / 적용 / 옵션)

< swiper 적용 >

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

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

 

2. Get Start 클릭  -  cdn 연결  (min:압축파일)

 

3.  Demos - 적용 Core(코드복사) 

---

< script  총정리 >

 

// 반응형 설정

var swiper = new Swiper('.swiper-container', {

slidesPerView: 1, //레이아웃 뷰 개수

spaceBetween: 10, //위 slidesPerview 여백

 

breakpoints: { //반응형 width 

640: { //640 이상일 경우

slidesPerView: 2,  //레이아웃 2 },

768: { slidesPerView: 3, }, 1024: { slidesPerView: 4, }, } });

 

//비율(가로/세로)가능

breakpoints: {

    '@0.75': {

      slidesPerView: 2,

      spaceBetween: 20,

    },

    '@1.00': {

      slidesPerView: 3,

      spaceBetween: 40,

    },

    '@1.50': {

      slidesPerView: 4,

      spaceBetween: 50,

    }

 

//옵션 설정

<script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,    // 슬라이드 사이 여백

        slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수
        centeredSlides: true,    //센터모드
        autoplay: {     //자동슬라이드 (false-비활성화)
          delay: 2500, // 시간 설정
          disableOnInteraction: false, // false-스와이프 후 자동 재생
        },

        loop : false,   // 슬라이드 반복 여부

        loopAdditionalSlides : 1,

 // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
        pagination: { // 호출(pager) 여부
          el: ".swiper-pagination", //버튼을 담을 태그 설정
          clickable: true, // 버튼 클릭 여부
        },
        navigation: {   // 버튼
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

    </script>

 

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

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

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

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

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

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

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

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

slidesOffsetAfter : number, 

 

//초기화 설정

<script>

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

});

 

 

<참고>

display:none 시 슬라이드 작동안할시?

observer: true,

observeParents: true,

 

해당부모,해당요소 감지하여  DOM변화시, 스와이퍼 초기화시켜줌

 

(slick) variableWidth: true;