프리랜서 웹개발자 RELATION

RELATION 로고

홈페이지 소스

[소스] Swiper Slide#1

2022.04.12
Swiper Slide (슬라이드 배너)
https://swiperjs.com/demos
 

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, // 슬라이드 시작 부분 여백

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

renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용
return '<span class="' + currentClass + '"></span>' +
'<span class="' + totalClass + '"></span>';
  }

},



초기 설정 방법
// 매개 변수로 사용시 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() // 슬라이드 제거

 

** 기본 슬라이드 **

http://relation.co.kr/images_board/board_system_publishing/245/slide1_1.php


** 페이지 숫자표시 **
http://relation.co.kr/images_board/board_system_publishing/245/slide1_2.php
http://relation.co.kr/images_board/board_system_publishing/245/slide1_3.php

이 포스트 공유하기

글수정  글삭제 전체목록