1. Swiper 라이브러리 사용

참고 : https://kimyang-sun.tistory.com/entry/Swiper-슬라이드-자동재생-무한-롤링-Swiper-slider-autoplay-infinite-rolling

• 스와이퍼 delay를 최소한으로 하고 speed를 늦춰준다.
• 그리고 css로 transition-timing-function: linear; 속성값을 줘서 애니메이션의 변화 속도를 처음부터 끝까지 동일하게 맞춰줬다.

swiper 코드

new Swiper('.blog-swiper', {
    loop: true,
    speed: 6000,
    autoplay: {
      delay: 1,
    },
    slidesPerView: 4,
    centeredSlides: true,
});

swiper에 적용해준 css 코드

.blog {
  &-swiper {
    overflow: hidden;

    .swiper-wrapper {
      transition-timing-function: linear;
    }
  }
}

🚨 에러 발견!

스와이퍼에서 마우스를 떼면 바로 재개가 안됨. 혹은 뚝 끊기면서 다음 슬라이드로 넘어감

이유?

딜레이가 짧고 스피드가 느려서 다음 슬라이드로 넘어갈 때까지 일정 시간이 소요된다.

그래서 다시 자동 재생을 시작하면 일정 시간이 흐른 뒤에야 다음 슬라이드로 이동한다.

자연스럽게 다시 시작하는 기능은 스와이프 내에서 제공되지 않는 것 같고

자바스크립트 코드를 많이 조작하면 아예 불가능은 아닐 것 같은데 그렇게 할 바에 스와이퍼 없이 직접 구현하는게 더 쉬울 것 같다.

[ HTML ] - 슬라이드 마크업