위 이미지는 버튼 이벤트로 돌아가게했지만 코드상으로는 setInterval()을 적용해 자동으로 넘어갑니다.
<body>
<div id="slider-container">
<div id="left-slider">공지사항</div>
<div style="font-size: 28px; font-weight: 400; color: #bebebe">|</div>
<div class="right-slider">
<div>
<a href="#">
1 번째 공지사항입니다.
adsfdsfadfsdsaffdsdfsdfasadfsafsdafsdadsf(200123.,13)asdfa
</a>
</div>
<div><a href="#">2 번째 공지사항입니다.</a></div>
<div><a href="#">3 번째 공지사항입니다.</a></div>
</div>
</div>
<button id="button">앞으로</button>
</body>
<script>
const rightSlider = document.querySelector(".right-slider");
const slidesLength = rightSlider.querySelectorAll("div").length;
let sliderIndex = 0;
const slide = () => {
sliderIndex++;
if (sliderIndex > slidesLength - 1) {
sliderIndex = 0;
}
rightSlider.style.transform = `translateY(-${sliderIndex * 100}%)`;
};
setInterval(slide, 3000);
document.getElementById("button").addEventListener("click", () => {
sliderIndex++;
if (sliderIndex > slidesLength - 1) {
sliderIndex = 0;
}
rightSlider.style.transform = `translateY(-${sliderIndex * 100}%)`;
});
const sliderContainer = document.getElementsByClassName("slider-container");
</script>#slider-container {
width: 650px;
overflow: hidden;
height: 60px;
position: absolute;
left: 100px;
top: 100px;
display: flex;
align-items: center;
border: 1px solid #ebebeb;
border-radius: 6px;
font-size: 18px;
background-color: white;
}
#left-slider {
width: 20%;
text-align: center;
}
.right-slider {
height: 100%;
width: 80%;
margin-left: 20px;
transition: transform 0.5s ease-in-out;
}
.right-slider > div {
height: 100%;
}
a {
text-decoration: none;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: none;
}
a:active {
color: black;
text-decoration: none;
}