[JS] 마퀴(marquee) 슬라이드 만들기(feat.swiper)

1. swiper 사용 시 필요한 파일 import

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

 

 

 

2. swpier tag 삽입하기

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://raw.githubusercontent.com/TTOWA/images/main/img_comparisonslider_1.png" alt=""></div>
     <!-- 필요한 이미지 수 만큼 선언 하여 사용합니다 -->         
    </div>
  </div>

 

3. CSS 삽입

• 아래 코드를 꼭 넣어야 합니다. 그래야 작동중 끊김 현상 (슬라이드가 끊다고 다시 시작할때) 을 방지 할수 있습니다.

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

 

4. swpier 컨트롤 하기

$(function(){
	var swiper = new Swiper('.swiper-container', {
        spaceBetween: 0,
        freeMode: false,
        enteredSlides: true,
        speed: 5000,
        autoplay: {
            delay: 1,
        },
        loop: true,
        slidesPerView:'auto',
        allowTouchMove: false,
        disableOnInteraction: true
    });
 });

 

5. 작동 확인 하기

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.