swiper - 흐르는 슬라이드 마우스오버 바로 멈추기

swiper

swiper를 슬라이드를 만들고 마우스오버 했을 때 멈추는 기능이 있다. autoplay를 추가할 때 disableOnInteraction: false을 사용하면되는데 딜레이 없는 슬라이드에서 마우스오버를 하면 바로 멈추지 않고 슬라이드가 있어야 할 자리까지 도달했을 때 비로소 멈춘다. 이때, 슬라이가 있어야 할 자리까지 이동하지 않고 바로 멈추는 방법이다.

 

 

 

예시

See the Pen 이미지가 있는지 없는지 체크하여 default이미지 뿌려주는 함수. by 슬기 (@hahahoho9) on CodePen.

 

 

 

HTMl 코드

 <div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 1</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 2</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 3</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 4</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 5</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 6</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 7</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 8</div>
    <div class="swiper-slide">연속으로 흘러가는 슬라이드 입니다. 9</div>
  </div>
</div>

 

CSS

.swiper { width:100%; height:100vh; }
.swiper-slide { width:auto; display:flex; align-items:center; padding:60px; }
.swiper-slide:nth-child(3n+1) { background:#fd88a1; }
.swiper-slide:nth-child(3n+2) { background:#f5dfd6; }
.swiper-slide:nth-child(3n) { background:#444; color:#fd88a1; }
.swiper-slide:hover { text-decoration:underline; }

 

JS

let swiper = new Swiper('.swiper', {
  loop: true,
  slidesPerView: 'auto',
  speed: 10000,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
  allowTouchMove: false,
  on: {
    setTransition: function (swiper, transition) {
      let window_w = window.innerWidth;
      if(transition == 10000) {
        if(window_w <= 1024) swiper.wrapperEl.style.transitionDuration = '4000ms';
        if(window_w <= 767) swiper.wrapperEl.style.transitionDuration = '3000ms';
      }
    },
  },
});

let x;
swiper.el.addEventListener('mouseenter', function() {
  x = swiper.slidesEl.style.transform;
  swiper.slidesEl.style.transform = 'translate3d('+swiper.slidesEl.getBoundingClientRect().left+'px, 0px, 0px)';
  swiper.autoplay.stop();
  return false;
});
swiper.el.addEventListener('mouseleave', function() {
  swiper.slidesEl.style.transform = x;
  swiper.autoplay.start();
  return false;
});