Jquery로 간단한 슬라이드를 만들었습니다.
<ul id="slider">
<li class="on"><img src="http://lorempixel.com/output/nightlife-q-c-640-480-10.jpg" alt=""></li>
<li><img src="http://lorempixel.com/output/city-q-c-640-480-3.jpg" alt=""></li>
<li><img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" alt=""></li>
</ul>
<span id="prev">PREV</span>
<span id="next">NEXT</span>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
span {
margin: 0 20px;
font-size: 20px;
}
#slider {
position: relative;
width: 640px;
height: 480px;
overflow: hidden;
}
#slider li {
display: none;
position: absolute;
left: 0;
top: 0;
}
#slider img {
display: block;
}
#slider li:first-child {
display: block;
}
$('#next').click(function(){
slideNext();
})
$('#prev').click(function(){
slidePrev();
})
function slideNext(){
if( $('li').is(':animated') ){
return false;
}
let left = $('li.on').width();
let currentIdx = $('li.on').index();
let nextIdx = currentIdx + 1;
if(nextIdx > $('li').length - 1){
nextIdx = 0;
}
$('li').removeClass('on')
$('li').eq(currentIdx).css({zIndex : 10})
$('li').eq(nextIdx).addClass('on').css({
left: left,
zIndex: 20,
display: 'block'
}).animate({
left: 0
}, 500, function(){
$('li').eq(currentIdx).css({display:'none'})
})
}
function slidePrev(){
if( $('li').is(':animated') ){
return false;
}
let left = $('li.on').width() * -1;
let currentIdx = $('li.on').index();
let prevIdx = currentIdx - 1;
$('li').removeClass('on')
$('li').eq(currentIdx).css({zIndex : 10})
$('li').eq(prevIdx).addClass('on').css({
left: left,
zIndex: 20,
display: 'block'
}).animate({
left: 0
}, 500, function(){
$('li').eq(currentIdx).css({display:'none'})
})
}