728x90
반응형
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) + '%')
}
728x90
반응형
'j- Query' 카테고리의 다른 글
slide: basic format js (0) | 2023.04.10 |
---|---|
j-Query event mouse: click(), mouseover(), mouseleave() (0) | 2023.04.10 |
jQuery 메서드 - 종류별 분류 (0) | 2023.04.10 |
댓글