제이쿼리로 슬라이드 만들기

제이쿼리로 간단한 슬라이드를 만들었습니다.

 

<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'})
  })

}

 

jsfiddle에서 보기

 

https://jsfiddle.net/hyuckjin/7r0j1u8e/