jquery 슬라이더

jquery 슬라이더

HTML

<div calss="slider_section">

<ul class="btn_list">

<li><a href="javascript:;" class="btn_prev">이전</a></li>

<li><a href="javascript:;" class="btn_next">다음</a></li>

</ul>

<div class="slide_wrap">

<ul class="slide_box">

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

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

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

</ul>

</div>

</div>

CSS

<style>

body{ margin:0; padding:0;}

li{ list-style: none;}

a{ text-decoration: none;}

img{ width:100%; }

.slider_section{ position: relative;}

.btn_list{ position:absolute; top:100px; left:0; width:100%; }

.btn_list li:first-child{ float: left; margin-left:300px; margin-right: 0;}

.btn_list li{ float:right; margin-right: 300px; margin-left:0;}

.slide_wrap{ position: relative; width:300px; height:300px; margin:0 auto; overflow: hidden;}

.slide_box{ position: absolute; top:0; left:0; width:900px;}

.slide_box li{ float: left; width:300px; height: 300px;}

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

</style>

JAVASCRIPT

<script>

var liWidth = $( ".slide_box" ).children( "li" ).width();

var len = $( ".slide_box" ).children( "li" ).length;

var total = len - 1;

var _count = 0;

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

if( _count <= 0 ){

return false;

}

_count--;

slideMove();

});

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

if( _count == total ){

return false;

}

_count++;

slideMove();

});

function slideMove()

{

TweenMax.to( $( ".slide_box" ), 0.3, { left: - liWidth * _count, ease: Expo.easeOut });

}

</script>

예제 샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/slider2/test/slider.html