[swiper slide]

<div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
  </div>

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

      spaceBetween: 30, // 슬라이드 사이 여백

      slidesPerView: '3', // 한 슬라이드에 보여줄 갯수

      direction: 'vertical', // 슬라이드 방향

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

      loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정

      pagination: { // 호출(pager) 여부
          el: ".swiper-pagination", //버튼을 담을 태그 설정
          clickable: true, // 버튼 클릭 여부
        },

      navigation: {  // 화살표 버튼
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      scrollbar: { // 스크롤바
        el: '.swiper-scrollbar',
      },

      autoplay: { //자동슬라이드 (false-비활성화)
        delay: 2500, // 시간 설정
        disableOnInteraction: false, // false-스와이프 후 자동 재생
      },
    });

tip

swiper.on('transitionEnd', function() {
	console.log('now index :::', swiper.realIndex);
});

해당 함수를 통해 스와이퍼의 현재번호를 가져올수있다.

<div class="swiper" dir="rtl">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
  </div>

swiper-wraaper 상단 부모에 dir="rtl" 를 추가해주면 swiper방향이 반대로가게 해줄 수 있다. (가로방향때만 가능)

다음 ,이전 슬라이드 미리 보기

 body {
      position: relative;
      height: 100%;
      margin: 0;
      padding: 0;
      background: #eee;
    }

    .swiper {
      width: 100%;
      height: 500px;
    }

    .swiper-slide {
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300px;
      /* width: 93%; */
    }

var swiper = new Swiper('.mySwiper', {
      loop: true,
      loopFillGroupWithBlank: true,
      spaceBetween: 8,    
      slidesPerView: 'auto',  
      centeredSlides: true,  // 양쪽 미리보기
      autoplay: { //자동슬라이드 (false-비활성화)
        delay: 2500, // 시간 설정
        disableOnInteraction: false, // false-스와이프 후 자동 재생
      },
    });

slidesPerView: 'auto' / centeredSlides: true, 옵션을 추가하고,
.swiper slide {width: 93%} 로 가로값을 강제로 정해주면 양쪽 미리보기 효과가 적용된다.

tip2

swiper를 tab메뉴 안에서 작동시킬때 형태가 이상하게 작동이 안되는경우가잇다.

	observer : true, 
    observeParents : true,

옵션에 추가 해 주면 자동 초기화를 시켜주어 정상작동이되는 경우가있다.

tip3

swiper를 원하는 index에 이동시키고 싶을때가 있다.

function test() {
        swiper.slideTo(3, 1000, false)
    }

swiper.slideTo(index, speed, runCallbacks)

 1. index: 이동할 슬라이드의 인덱스 (필수)
2. speed: 슬라이드 이동에 걸리는 시간, 기본값은 300밀리(선택사항)초
3. runCallbacks: 슬라이드 이동 후 콜백 함수를 실행할지 여부를 나타내는 값, 기본값은 true (선택사항)