slide: horizontal(zIdx)

html

<div class="container">
		<div class="slide-stage">
			<div class="slide-wrap">
				<div class="slide">
					<img src="../img/b1.jpg" alt="배너" class="w-100">
				</div>
				<div class="slide">
					<img src="../img/b2.jpg" alt="배너" class="w-100">
				</div>
				<div class="slide">
					<img src="../img/b3.jpg" alt="배너" class="w-100">
				</div>
				<div class="slide">
					<img src="../img/b4.jpg" alt="배너" class="w-100">
				</div>
				<div class="slide">
					<img src="../img/b5.jpg" alt="배너" class="w-100">
				</div>
				<div class="slide">
					<img src="../img/b6.jpg" alt="배너" class="w-100">
				</div>
				<img src="../img/b1.jpg" alt="배너" class="w-100">
			</div>
			<div class="bt-angle bt-prev bi-chevron-compact-left"></div>
			<div class="bt-angle bt-next bi-chevron-compact-right"></div>
		</div>
	</div>
<!--bootstrap icon-->

css

.bt-angle {
  font-size: 6em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #fff;
  opacity: 0.3;
  transition: all 0.5s;
  z-index: 2;
}
.bt-angle:hover {
  opacity: 1;
}
.bt-angle.bt-prev {
  left: 0;
}
.bt-angle.bt-next {
  right: 0;
}

.slide-stage {
  position: relative;
}
.slide-stage > .slide-wrap {
  position: relative;
  z-index: 1;
}
.slide-stage > .slide-wrap > .slide {
  position: absolute;
  width: 100%;
  z-index: 1;
}

js

/*************** 글로벌 설정 *****************/
var idx = 0		// 현재 맨 위에 나타나는 .slide의 index
var zIdx = 1	// 맨 위에 나타날 .slide의 z-index
var lastIdx = $('.slide-wrap .slide').length - 1
$('.slide-wrap .slide').eq(idx).css('z-index', zIdx++)

/*************** 사용자 함수 *****************/

/*************** 이벤트 등록 *****************/
$('.slide-stage .bt-prev').on('click', onPrevClick)
$('.slide-stage .bt-next').on('click', onNextClick)

/*************** 이벤트 콜백 *****************/
function onPrevClick() {
	idx = (idx === 0) ? lastIdx : idx - 1
	$('.slide-wrap .slide').eq(idx).css('z-index', zIdx++)
	.stop().fadeOut(0).fadeIn(500)
}

function onNextClick() {
	idx = (idx === lastIdx) ? 0 : idx + 1
	$('.slide-wrap .slide').eq(idx).css('z-index', zIdx++)
	.stop().fadeOut(0).fadeIn(500)
}

js에서 slide css 설정하기

var idx = 0, len, lastIdx
init()

/*************** 사용자 함수 *****************/
function init() {
	$('.slide-wrap').append( $('.slide-wrap > .slide').eq(0).clone() )
	len = $('.slide-wrap .slide').length
	lastIdx = len - 1
	$('.slide-wrap').css('width', (len * 100) + '%')
	$('.slide-wrap > .slide').css('width', (100/len) + '%')
}