이미지 슬라이드 - 버튼 추가
<main>
<div class="slider-wrap">
<div class="slider-img">
<div class="slider-inner">
<div class="slider" data-name="이미지1">
<img src="../assets/img/bg11.jpg" alt="이미지1">
</div>
<div class="slider" data-name="이미지2">
<img src="../assets/img/bg13.jpg" alt="이미지2">
</div>
<div class="slider" data-name="이미지3">
<img src="../assets/img/bg15.jpg" alt="이미지3">
</div>
<div class="slider" data-name="이미지4">
<img src="../assets/img/bg17.jpg" alt="이미지4">
</div>
<div class="slider" data-name="이미지5">
<img src="../assets/img/bg19.jpg" alt="이미지5">
</div>
</div>
</div>
<div class="slider-btn">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>
</div>
</main>
/* slider */
.slider-wrap {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider-img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 480px;
overflow: hidden;
}
.slider-img img {
width: 100%;
}
.slider-inner {
position: relative;
width: 4000px;
height: 480px;
overflow: hidden;
}
.slider-inner .slider {
float: left;
width: 800px;
height: 480px;
position: relative;
}
.slider-inner .slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0,0,0,.4);
color: #fff;
padding: 5px 10px 3px;
font-family: 'NEXONLv1Gothic';
}
.slider-inner .slider:nth-child(1) {
z-index: 5;
}
.slider-inner .slider:nth-child(2) {
z-index: 4;
}
.slider-inner .slider:nth-child(3) {
z-index: 3;
}
.slider-inner .slider:nth-child(4) {
z-index: 2;
}
.slider-inner .slider:nth-child(5) {
z-index: 1;
}
.slider-inner .slider::before {
content: attr(data-name);
}
.slider-btn a {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
width: 50px;
height: 50px;
background: rgba(0,0,0,.4);
text-align: center;
line-height: 50px;
transition: all 0.2s;
display: block;
color: #fff;
text-decoration: none;
}
.slider-btn a:hover {
background: rgba(241, 96, 86, 1);
}
.slider-btn .prev {
left: 0;
}
.slider-btn .next {
right: 0;
}
const sliderWrap = $(".slider-wrap");
const sliderImg = $(".slider-img");
const sliderInner = $(".slider-inner");
const slider = $(".slider");
const sliderBtn = $(".slider-btn");
const sliderWidth = slider.width();
const sliderCount = slider.length;
sliderInner.css({marginLeft: -sliderWidth});
$(".slider:last-child").prependTo(sliderInner);
function movePrev(){
sliderInner.animate({left: sliderWidth}, 400, function(){
$(".slider:last-child").prependTo(sliderInner);
sliderInner.css("left", "");
});
};
function moveNext(){
sliderInner.animate({left: -sliderWidth}, 400, function(){
$(".slider:first-child").appendTo(sliderInner);
sliderInner.css("left", "");
});
};
sliderBtn.find(".prev").click(function(){
movePrev();
});
sliderBtn.find(".next").click(function(){
moveNext();
});
// 소스보기 실행함수
modal();