[javascript, swiper] tab swiper 셈플소스

모바일 화면에서 사진 같은 것을 좌우로 밀어서 사진을 바꿔주는 swiper 기능

 

1. html 파일에 swiper css 파일 추가

<link rel="stylesheet" href="/js/swiper.min.css">

2. html 파일에 swiper.js 파일 추가

<script type="text/javascript" src="/js/swiper.js"></script>

<div>
  <ul>
    <li class="tablinks active" id="tab1">Tab1</li>
    <li class="tablinks" id="tab2">Tab2</li>
    <li class="tablinks" id="tab3">Tab3</li>
  </ul>
</div>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-slide-sub">
        <!-- Tab1 내용 -->
        <ul>
          <li>li1</li>
          <li>li2</li>
          <li>li2</li>
        </ul>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-sub">
        <!-- Tab2 내용 -->
        <ul>
          <li>li1</li>
          <li>li2</li>
          <li>li2</li>
        </ul>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-sub">
        <!-- Tab3 내용 -->
        <ul>
          <li>li1</li>
          <li>li2</li>
          <li>li2</li>
        </ul>
      </div>
    </div>
  </div>
</div>

4. javascript 파일에서 swiper 사용설정

$(document).ready(function () {
    init();
});
 
function init() {
 
    var swiper = new Swiper('.swiper-container', {
        autoHeight: true,
        on: {
            init: function () {
                $(".swiper-slide").css("background-color", 'transparent');
                $(".swiper-slide").css("text-align", 'left');
            },
            slideChange: function () {
                var slider = this;
                if (swiper.activeIndex == 0) {
                    $('#tab1').addClass('active');
                    $('#tab2').removeClass('active');
                    $('#tab3').removeClass('active');
 
                    document.body.scrollTop = 0; // For Safari
                    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 
                } else if (swiper.activeIndex == 1) {
                    $('#tab1').removeClass('active');
                    $('#tab2').addClass('active');
                    $('#tab3').removeClass('active');
 
                    document.body.scrollTop = 0; // For Safari
                    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 
                } else if (swiper.activeIndex == 2) {
                    $('#tab1').removeClass('active');
                    $('#tab2').removeClass('active');
                    $('#tab3').addClass('active');
 
                    document.body.scrollTop = 0; // For Safari
                    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 
                }
            }
        }
    });
 
    $('#tab1').click(function () {
        swiper.slideTo(0, 300, false);
    });
    $('#tab2').click(function () {
        swiper.slideTo(1, 300, false);
    });
    $('#tab3').click(function () {
        swiper.slideTo(2, 300, false);
    });
 
}
 

 

공식 사이트 : https://swiperjs.com/

Swiper - Most Modern Mobile Touch Slider