swiper 탭 슬라이드

swiper 탭 슬라이드

HTML

<ul class="tab_list">

<li><a href="javascript:;">탭1</a></li>

<li><a href="javascript:;">탭2</a></li>

<li><a href="javascript:;">탭3</a></li>

</ul>

<div class="swiper-container">

<ul class="swiper-wrapper">

<li class="swiper-slide">

<img src="../image/slide/img01.jpg" alt="">

</li>

<li class="swiper-slide">

<img src="../image/slide/img02.jpg" alt="">

</li>

<li class="swiper-slide">

<img src="../image/slide/img03.jpg" alt="">

</li>

</ul>

</div>

CSS

<style>

.tab_list li{ float: left; width:33.3333%; border:1px solid red; box-sizing: border-box; margin-left:-1px; text-align: center;}

.tab_list li a{ display:inline-block; padding: 2.5% 0; width: 100%;}

.tab_list:after{ content: ''; display:block; clear: both;}

</style>

JAVASCRIPT

<script>

$( document ).ready( function(){

var _tabList = $( ".tab_list" );

var _tabTarget = _tabList.children( "li" );

var swiper = new Swiper('.swiper-container');

_tabTarget.on( "click", function( $e ){

var itemIndex = $( this ).index();

swiper.slideTo( itemIndex); //index값으로 slideto에 넘김

})

});

</script>

예제 샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/swiper2/test/swiper.html