swiper 4 이동 단 내 비게 이 션 표시 줄 tab 슬라이딩 전환 실현

swiper 4 이동 단 내 비게 이 션 바 tab 미끄럼 전환 효과,참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과 그림:

우선 swiper 의 css 와 js 파일 을 도입 합 니 다.
홈 페이지

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

html 구조 부분


<body>
 <div class="tab">
 <div class="tabItem active">slider1</div>
 <div class="tabItem">slider2</div>
 </div>
 <div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide">slider1</div>
  <div class="swiper-slide">slider2</div>
 </div> 
 </div> 
</body>

js 부분


var tabItem = $('.tab .tabItem');
var mySwiper = new Swiper('.swiper-container', {
 autoplay: false,
 on:{
 //swiper   slide        slide   
 slideChangeTransitionStart: function(){
 var n = this.activeIndex;//    slide  
 changeTab(n);
  }
 }
})
//tab    silde
tabItem.click(function(){
 var ind = $(this).index();
 changeTab(ind);
 mySwiper.slideTo(ind);
})
//tab    
function changeTab(index){
 tabItem.removeClass('active').eq(index).addClass('active');
}

css 부분


html,body{width: 100%;height: 100%;}
div{margin: 0;padding: 0;}
.swiper-container,.swiper-wrapper,.swiper-slide{width: 100%;height: 100%;}
.swiper-slide{display: flex;align-items: center;justify-content: space-around;}
.tab{width: 100%;height: 50px;overflow: hidden;border-bottom: 1px solid #eee;position: fixed;top: 0;left: 0;z-index: 999;}
.tabItem{width: 50%;height: 50px;float: left;background: #e5e5e5;line-height: 50px;text-align: center;}
.active{background: #FE2D26;}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

일반 방식 과 ajax 방식 으로 배경 에서 데 이 터 를 가 져 와 웹 페이지 에 불 러 옵 니 다.

1. 일반적인 방법 은 해당 servlet 에 방문 하여 데 이 터 를 얻 고 request 도 메 인 에 저장 하 며 jsp 페이지 로 이동 하여 jsp 탭 을 통 해 데 이 터 를 얻 는 것 이 아 닙 니 다. ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

swiper 4 이동 단 내 비게 이 션 표시 줄 tab 슬라이딩 전환 실현

좋은 웹페이지 즐겨찾기