[Javascript] swiper 크기만큼 이동시켜주기

1. html에 swiper를 만들어줍니다.

    <div class="swiper-container-mainNav">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
        	<div id="main1"></div>
        </div>
        <div class="swiper-slide">
        	<div id="main2"></div>
        </div>
        <div class="swiper-slide">
        	<div id="main3"></div>
        </div>
        <div class="swiper-slide">
        	<div id="main4"></div>
        </div>
      </div>
    </div>

 

2. 원하는 크기를 설정해줍니다.

.swiper-container-mainNav .swiper-wrapper {
  width: auto !important;
}

.swiper-container-mainNav .swiper-wrapper .swiper-slide {
  width: 190px !important;
}

.swiper-container-mainNav .swiper-wrapper .swiper-slide:nth-child(3) {
  width: 140px !important;
}

원래 스와이퍼에서 제공하는 css가 있어서, 내가 정한 크기가 무시될 수 있으므로 

!important 를 넣어줍니다.

저는 190px과 140px 두가지 크기를 설정하였습니다.

 

3. js 설정해주기

var mySwiperMainNav = new Swiper('.swiper-container-mainNav', {
    width: 190
});

( 1 ) swiper 플러그인을 적용시켜줍니다.

 

function swiperPositionSet(el, Xposition, index) {
    $(el).attr(
        'style',
        'transform:translate3d(' + Xposition[index] + 'px ,0px,0px); transition-duration: 300ms;'
    );
}

( 2 ) 얼만큼 이동해줄지 정해주는 함수를 생성합니다.

• el : 이 것의
• Xposition[index]: 이만큼 움직이겠다.

 

function mainSlideChangeStart () {
  var swiper_position_X = [0, -190, -380, -520];
  
  swiperPositionSet(
      '.swiper-container-mainNav .swiper-wrapper',
      swiper_position_X,
      mySwiperMainNav.realIndex
  );
}

( 3 ) swiper-slide 의 넓이가 각각 190, 190, 140, 190이므로,

• swiper_position_X에 설정값을 하나하나 차례로 더해 넣어줍니다. (190 + 190 = 380 / 380 + 140 = 520 )
• swiper에서 실질적으로 움직이는 것은 'swiper-wrapper'이므로, 2번째 인자로는 swiper-wrapper을 넣어줍니다.
• Xposition[index] 은, swiper_position_X의 몇번쨰값? 과 같은 의미인데 = 1,2,3,4 순서로 나아가야하니 
  swiper.realIndex를 그대로 적용시켜주면 됩니다.

 

mySwiperMainNav.on('slideChangeTransitionStart', mainSlideChangeStart);

 ( 4 ) 마지막으로, 슬라이드가 움직이기 시작하면 이 함수를 실행시켜주겠다고 적용하면 완성입니다.

 

+ 팁

var mySwiperMainNav = new Swiper('.swiper-container-mainNav', {
    width: 190
});

swiper에서는 width 값은 설정해주는걸 지향하지 않습니다.

그러나 이걸 설정해주지 않으면, 스와이퍼 한번 옮길때마다 190 씩 움직이지 않게됩니다.

따라서 필요에따라 width값을 적용해주면 한번 스와이프할떄 190만큼 이동을 하게 됩니다.