swiper slide 탭 이동 커스텀

※ html 기본 샘플입니다. 해당 소스 보시고 변경하시면 됩니다.

 

 

<ul class="swiper_tab">
    <li class="swp_tab swp_tab_0 active" onClick="fnMoveTab(0);">메뉴1</li>
    <li class="swp_tab swp_tab_1" onClick="fnMoveTab(1);">메뉴2</li>
    <li class="swp_tab swp_tab_2" onClick="fnMoveTab(2);">메뉴3</li>
</ul>

<div class="real_swiper swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" style="height:150px;background:#000;color:#fff;">슬라이드1</li>
        <li class="swiper-slide" style="height:150px;background:red;color:#fff;">슬라이드2</li>
        <li class="swiper-slide" style="height:150px;background:green;color:#fff;">슬라이드3</li>
    </ul>
    
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

 

 

※ script 입니다.

<script>
    var swiper = new Swiper('.sreal_swiper', {
        speed: 500, //속도
        //resistance : true, //루프가 아닌 상태에서 처음과 끝의 슬라이드를 드래그로 넘기려 했을 때 튕김현상 방지
        //resistanceRatio : 0, //루프가 아닌 상태에서 처음과 끝의 슬라이드를 드래그로 넘기려 했을 때 튕김현상 방지
        autoplay: {
       		delay: 7000,
        	disableOnInteraction: false,
        },
        pagination: {
        	el: '.swiper-pagination',
        	type: 'bullets',
            clickable: true,
        },
        navigation: {
       		nextEl: '.swiper-button-next',
       		prevEl: '.swiper-button-prev',
        },
        on: {
            slideChange: function(){
            	const actIndex = swiper.activeIndex; //현재 액티브 된 슬라이드 번호
            	$(".swp_tab").removeClass("active");
            	$(".swp_tab_"+actIndex).addClass("active");
            }
        }
	});
    
    function fnMoveTab(v){
    	swiper.slideTo(v);
    }
</script>