제이쿼리 이미지 슬라이드

제이쿼리 이미지 슬라이드

HTML

<div class="layout_content"">

<div class="layout_center">

<div class="slide_content">

<div class="slide_box">

<ul class="slide_list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>

<div class="btn_box">

<ul class="btn_list">

<li><a href="javascript:;" class="btn_prev">&lt;</a></li>

<li><a href="javascript:;" class="btn_next">&gt;</a></li>

</ul>

</div>

<ul class="indcator_list">

<li class="on"><a href="javascript:;"></a></li>

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

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

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

</ul>

</div>

</div>

</div>

CSS

#wrap{

margin:0; padding:0;

.layout_content{

display:table; width:100vw; height: 100vh;

.layout_center{

display:table-cell; width:100%; height: 600px; vertical-align: middle;

.slide_content{

position:relative; width:1200px; margin:0 auto;

.slide_box{

position: relative; width:1000px; height: 600px; margin:0 auto; overflow: hidden;

.slide_list{

position: absolute; top:0; left:0; width:4000px;

li{

position: absolute; top:0; left:-1000px; width:1000px; height: 600px;

&:nth-child(1){ background:hotpink; left:0;}

&:nth-child(2){ background:black;}

&:nth-child(3){ background:red;}

&:nth-child(4){ background:green;}

}

}

}

.btn_box{

position: absolute; top:250px; left:0; width: 100%;

.btn_list{

li{

float: right;

a{ font-size:60px; text-decoration: none;}

&:first-child{float: left;}

}

}

}

.indcator_list{

position: absolute; bottom:-50px; left:0; width:100%; text-align: center;

li{

display: inline-block;

a{ display:block; width:30px; height: 30px; background:#151515; border-radius: 15px;}

&.on{

a{ background:red;}

}

}

}

}

}

}

}

SCRIPT

define([

"App"

], function( App ){

function init()

{

create();

addEvent();

}

var _slideItem;

var _btnPrev;

var _btnNext;

var _total;

var _index = 0;

var _prevIndex = 0;

var _indTarget;

var _showInterval;

function create()

{

_slideItem = $( ".slide_list" ).children( "li" );

_btnPrev = $( ".btn_box" ).find( ".btn_prev" );

_btnNext = $( ".btn_box" ).find( ".btn_next" );

_indTarget = $( ".indcator_list" ).children( "li" );

_showInterval = setInterval( btnNextClick, 3000 );

}

function addEvent()

{

_btnPrev.on( "click", btnPrevClick );

_btnNext.on( "click", btnNextClick );

_indTarget.on( "click", indTargetClick );

}

function btnPrevClick( $e )

{

_index--;

if( _index < 0 )

{

_index = 3;

}

moveSlide( "left" );

}

function btnNextClick( $e )

{

_index ++;

if( _index > 3 )

{

_index = 0;

}

moveSlide( "right" );

}

function indTargetClick( $e )

{

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

_index = index;

if( _index > _prevIndex )

{

moveSlide( "right" );

}else if( _index < _prevIndex ){

moveSlide( "left" );

}

}

function moveSlide( $type )

{

var nextItem = _slideItem.eq( _index );

var prevItem = _slideItem.eq( _prevIndex );

_indTarget.eq( _index ).addClass( "on" ).siblings().removeClass( "on" );

if( $type == "right" )

{

TweenMax.set( nextItem, { left:1000 });

TweenMax.to( nextItem, 0.3, { left:0, ease:Expo.easeInOut });

TweenMax.set( prevItem, { left:0 });

TweenMax.to( prevItem, 0.3, { left:-1000, ease:Expo.easeInOut });

}else if( $type == "left" ){

TweenMax.set( nextItem, { left:-1000 });

TweenMax.to( nextItem, 0.3, { left: 0, ease:Expo.easeInOut });

TweenMax.set( prevItem, { left: 0 });

TweenMax.to( prevItem, 0.3, { left : 1000, ease:Expo.easeInOut });

}

clearInterval( _showInterval );

_showInterval = setInterval( btnNextClick, 3000 );

_prevIndex = _index;

}

$( document ).ready( function(){

init();

});

})

예제 샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/slider3/