0. 생각보다 어렵네
이미지 슬라이더를 활용할 일이 생겨서, 어떻게 해야할 지 알아보던 와중 생각보다 복잡하고 그렇다고 모듈을 쓰기에는 싫어서 공부하고 그 결과물을 올린다.
1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<input type="radio" name="slider" id="slide5">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Slide1</h2>
<p>Content for Slide 1</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Slide2</h2>
<p>Content for Slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide3</h2>
<p>Content for Slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide4</h2>
<p>Content for Slide 4</p>
</div>
</div>
<div class="slide slide_5">
<div class="slide-content">
<h2>Slide5</h2>
<p>Content for Slide 5</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
<div id="bullets">
<label for="label1"></label>
<label for="label2"></label>
<label for="label3"></label>
<label for="label4"></label>
<label for="label5"></label>
</div>
</div>
</body>
</html>
2. CSS
#slider {
margin: 0 auto;
width: 800px;
max-width: 100%;
text-align: center;
}
#slider input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 3px solid #ccc;
background: #fff;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#slide1:checked ~ #slides .inner{
margin-left: 0;
}
#slide2:checked ~ #slides .inner{
margin-left: -100%;
}
#slide3:checked ~ #slides .inner{
margin-left: -200%;
}
#slide4:checked ~ #slides .inner{
margin-left: -300%;
}
#slide5:checked ~ #slides .inner{
margin-left: -400%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.0770, 0.000, 0.175, 1.000);
width: 500%; -> 아이템 수 * 100
line-height: 0;
height: 200px;
}
#slides .slide {
width: 20%; -> 100 / 아이템 수
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
}
#slides .slide_1{
background: lightcyan;
}
#slides .slide_2{
background: lightskyblue;
}
#slides .slide_3{
background: mediumturquoise;
}
#slides .slide_4{
background: royalblue;
}
#slides .slide_5{
background: midnightblue;
}
.slide-content {
padding: 10px;
}
#controls {
margin: -130px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1)
{
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4)
{
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4),
#slide5:checked ~ #bullets label:nth-child(5)
{
background: #333;
}
3. 결과물
블록체인, IOT, 클라우드에 관심이 많은 개발자 지망생