JavaScript의 도움으로 CSS Flexbox를 사용하여 무한 스크롤 슬라이더를 만들 수 있습니다.
예시
다음 예는 CSS를 사용한 캐러셀을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
.container {
max-width: 600px;
position: relative;
margin: 6% auto;
}
.prevbtn, .nextbtn {
position: absolute;
top: 50%;
padding: 12px;
margin-top: -20px;
color: white;
font-weight: bold;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 50%;
}
.prevbtn:hover, .nextbtn:hover {
background-color: darkgrey;
color: rgb(0,0,0);
}
.nextbtn {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="slide">
<img src="https://images.unsplash.com/photo-1609517904792-bac493d55556?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1609883475382-c4c9378569e5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1611094607507-8c8173e5cf33?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<a class="prevbtn" onclick="changeSlide(-1)">❮</a>
<a class="nextbtn" onclick="changeSlide(1)">❯</a>
</div>
<script>
let slideIndex = [1,1];
viewSlides(1);
function changeSlide(n) {
viewSlides(slideIndex[0] += n);
}
function viewSlides(n) {
let ele = document.getElementsByClassName("slide");
if (n > ele.length) {
slideIndex[0] = 1
}
if (n < 1) {
slideIndex[0] = ele.length
}
for (i = 0; i < ele.length; i++) {
ele[i].style.display = "none";
}
ele[slideIndex[0]-1].style.display = "block";
}
</script>
</body>
</html> 이것은 다음과 같은 출력을 제공합니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 120px;
max-width: 600px;
margin: 12px auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
border: 4px ridge rgba(20,30,240,0.6);
}
.container > div {
height: 120px;
width: 2400px;
background: url(https://images.unsplash.com/photo-1611485916153-fce531587fe0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120);
position: absolute;
height: 100%;
transform: translate3d(0, 0, 0);
}
.container .slider {
animation: slideshow 20s linear infinite;
}
@keyframes slideshow {
100% {
transform: translateX(-33.33%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="slider"></div>
</div>
</body>
</html> 이것은 다음과 같은 출력을 제공합니다.
