Carousel
movie app을 만들면서 여러 디자인을 생각해봤는데, 이미지 슬라이드는 이 기회에 넣어보고 싶어서 공부했다.
연습을 위해 예제를 만들었다. 이미지 네장과 아래의 html, css를 만들었다.
내가 참고한 예제 말고 대부분의 예제에서 하단 토글은 라디오태그로 사용했는데 기능만 동일하다면 뭘로 만들든 상관 없어보인다.
<!DOCTYPE html>
<html>
<head>
<title>이미지 슬라이드</title>
<link rel="stylesheet" href="./carousel.css"/>
</head>
<body>
<div class="slider">
<div class="slides">
<div id="slide-1"><img src="./1.png"></div>
<div id="slide-2"><img src="./2.png"></div>
<div id="slide-3"><img src="./3.png"></div>
<div id="slide-4"><img src="./4.png"></div>
</div>
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
<a href="#slide-4"></a>
</div>
</body>
</html>*{
box-sizing: border-box;
}
.slider{
width: 600px;
height: 100%;
text-align: center;
border-radius: 10px;
overflow: hidden;
}
.slides{
display:flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides > div {
flex-shrink: 0;
width: 600px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
text-decoration: none;
width: 1rem;
height: 1rem;
background: #eee;
border-radius: 50%;
margin: 0.3rem 0 0.5rem 0;
position: relative;
}
.slider > a:hover {
top: -1px;
}남이 만든 css를 볼때마다 느끼는건데 이해하기 참 어렵다^^. 익숙한 것도 있고 처음 보는 것도 있어서 간단히 아래에 정리했다.
가장 상위 태그를 감싸는 클래스다. 기본적인 틀을 만들고 overflow: hidden;을 줘서 삐져나오는 이미지는 감췄다.
.slider{
width: 600px;
height: 100%;
text-align: center;
border-radius: 10px;
overflow: hidden;
}display:flex;로 div태그를 일렬로 배치시켰다.
overflow-x:auto로 x축에서 부모 태그를 벗어나는 컨테이너는 감췄다.
auto옵션은 삐져나온 부분을 스크롤로 만들어버리기 때문에 a태그를 클릭해서 움직일 때에도 스크롤이 자연스럽게 보이기 위해 scroll-behavior: smooth;를 줬다.
.slides{
display:flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}slides클래스 안에 있는 div태그들은 overflow-x태그로 인해 스크롤 형태로 길게 나열돼 있지만 flex-shrink 기본값이 1이기 때문에 600px이라는 공간 안에서 div네개가 각각 자리를 차지하고 있게 된다. 그걸 방지하기 위해 flex-shrink: 0; 옵션을 넣었다.
.slides > div {
flex-shrink: 0;
width: 600px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
overflow: hidden;
position: relative;
}가장 하단의 div태그를 수정하고 나면 img크기가 그대로라 극히 일부만 보이고 원하지 않는 영역만 보이는 문제가 생긴다.
이미지 비율을 유지하면서 적당히 가운데를 보여주기 위해 object-fit: cover;를 사용했다.
position: absolute;를 사용해서 부모태그를 기준으로 잡고 위쪽, 왼쪽 포지션을 줬다.
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
완성 이미지~!
