부모요소에 width값을 100%주고 overflow:hidden을 줘도 스크롤이있고 오른쪽으로 넘치는 이미지들이 보입니다 ㅠ
스크롤을 안보이게 방법은 알지만 이게 답은 아니잖아요,, 너무 답답합니다 ㅠㅠ 어떻게 없애야할까요?
<html>
<main>
<div class="slide">
<div class="slidelist">
< img src="img/main.png" alt="mainBackground_1">
</div>
<div class="slidelist">
< img src="img/11.png" alt="mainBackground_2">
</div>
<div class="slidelist">
< img src="img/12.png" alt="mainBackground_3">
</div>
<div class="slidelist">
< img src="img/13.png" alt="mainBackground_4">
</div>
<div class="slidelist">
< img src="img/14.png" alt="mainBackground_5">
</div>
</div>
</main>
<style>
main{
width: 100%;
height: 950px;
overflow: hidden;
}
main .slide{
width: 500%;
height: 950px;
display: flex;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
main .slidelist{
width: 100%;
height: 950px;
transition: all 1.5s;
overflow: hidden;
}
main .slidelist img{
width: 100%;
height: 950px;
object-fit: fill;
filter: brightness(70%);
}
</style>
<script>
var buttons = $('.slideButton button');
for (var i = 0; i < 4; i++) {
$(buttons[i]).on('click', function() {
var index = $(this).index();
var translateValue = index * -100 + "%";
$('.slidelist').css('transform', 'translateX(' + translateValue + ')');
buttons.css('background-color', 'rgba(255, 255, 255, 0)');
$(this).css('background-color', '#fff');
});
}
코드는 이렇습니다 :(.....
.slide{ width:500%}때문인건 알겠는데 main에 오버플로우를 줘도 slidelist에 오버플로우를 줘도 이미지가 계속 보입니다,,
