[Jquery] - swiper/swiper.js 슬라이드 플러그인 사용법

#swiper/swiper.js 슬라이드 플러그인 사용법

 

 

#html

<div class="swiper-container">
  <div class="swiper-wrapper">
  <c:forEach var="list" items="${list}" varStatus="status">
    <div class="swiper-slide">
      <a href="${list.linkUrl}"><img src="${list.imgUrl}"></a>
    </div>    
  </c:forEach>    
  </div>    
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>  
</div>

 

 

#js/jquery

// jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
// swiper
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

<script>
$(function(){
    new Swiper('.swiper-container',{
    	// 방향: vertical 수직, horizontal 수평, default: horizontal
        direction: 'horizontal',
        // 드래그 기능 true/false
        debugger: true,
        // 무한 반복 기능 true/false
        loop: true,
        // 마지막 슬라이드 -> 첫슬라이드 자연스러운 반복 기능
        loopAdditionalSlides: 1,
        // 슬라이드간 간격
        spaceBetween: 30,
        // 한번에 보여 줄 슬라이드 개수
        slidesPerView: 1,
        // 그룹으로 묶을 슬라이드 수
        slidesPerGroup: 1,
        // 자동 스크롤링
        autoplay: {
            // 1000: 1초
            delay: 2500,
            disableOnInteraction: false,
        },
        // 페이징
        pagination: {
            // 페이징 클래스명
            el: '.swiper-pagination',
            // 클릭 가능 true/false
            clickable: true,
            // 타입: fraction, bullets, progressbar
            type: 'fraction',
        },
        // 네비게이션
        navigation: {
            // 다음 버튼 클래스명
            nextEl: '.swiper-button-next',
            // 이전 버튼 클래스명
            prevEl: '.swiper-button-prev',
        },
    });
})
</script>

 

#swiper 이동

var slideIdx = $(this).data('idx');

swiper.slideTo(slideIdx, 500, false);

 

#스크롤바 최상단

$(".list").mCustomScrollbar('scrollTop', 'top');

 

#스크롤바 이동

var activeIdx = this.activeIndex;

$(".list").mCustomScrollbar('scrollTop', $(".list").eq(activeIdx));