이미지 슬라이드(캐러셀) 구현
미션 01
📌 요구사항
- n개의 이미지가 슬라이드 될 수 있는 영역 만들기
- 다양한 크기의 이미지를 넣어도 별도 수정 없이 동작이 가능하게 하기
- 슬라이드 양 옆에 화살표 추가
- 화살표를 클릭하면 슬라이드가 작동되게 하기
결과
++ slick 라이브러리 활용 시도 결과
보완하고 싶은 점
계속 시도해봤지만 아직 고치지 못한 부분이
이미지 크기가 다 달라도 슬라이드 영역에 맞춰서 나오게 설정은 했지만
이미지 하나가 길이가 짧은 친구가 있는데
어떻게 해도 짧은 이미지는 계속 슬라이드도 길이가 다른 이미지들에 비해
짧게 나타나고 있다. 왤까 ??
원인을 찾아봤을 때 이런 답변을 받았다.
이미지의 실제 크기가 슬라이드의 높이보다 작을 경우, 이미지의 크기에 맞게 슬라이드가 표시됩니다. object-fit: cover;를 사용하더라도 이미지의 원래 크기가 슬라이드보다 작으면 이미지가 슬라이드에 가운데 정렬되어 나타납니다.
만약 이미지가 슬라이드보다 작아서 화면을 채우지 못하는 경우, 이미지가 나타나는 부분은 이미지의 실제 크기에 따라 결정됩니다. 슬라이드의 크기를 유지하면서 이미지가 가운데 정렬되기 때문에 짧은 이미지의 경우 여백이 생길 수 있습니다.
그래서 내 슬라이드에서도 아무리 설정을 해도 이미지가 짧은 것만 슬라이드 여백이 남았던 것이다.
💡 임시로 해결한 방법은 슬라이드 영역에 설정한 길이를 좀 더 줄여서
짧은 이미지가 나오는 길이와 비슷하게 다른 이미지들을 줄여 나오게 했다.
이러면 전부 동일하게 슬라이드 영역에 나타난다.
검색이랑 gpt를 통해 다른 방법이 있을까 하고 찾아 보다가
추가로 시도한 방법 2가지
- 이미지 크기를 통일하기: 모든 이미지를 일정한 크기로 조절하여 슬라이드의 크기에 맞게 표시 / 이미지를 미리 편집하여 일정한 크기로 만들거나, CSS를 사용하여 이미지의 최소 크기를 설정한다.
.slide-container img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 400px; /* 이미지의 최소 높이 설정 */
}- 이미지를 가운데 정렬하기: 이미지를 가운데 정렬하여 슬라이드의 중앙에 위치하도록 만들 수 있음 / 하지만 이 경우에는 슬라이드의 크기보다 이미지가 작아서 여백이 생길 수 있다.
.slide-container img {
display: block;
margin: auto;
object-fit: contain;
max-height: 100%; /* 이미지의 최대 높이 설정 */
}이 중 나의 경우에는 1번으로 해결됐다.
추후에는 아예 슬라이드 이미지에 넣기 적합한 크기의 이미지들을 추려서 적용하면
크게 이미지를 해치지 않으면서 적용할 수 있을 것 같다.
빳팅 !!
미션 02
📌 요구사항
- n개의 이미지가 2초 간격으로 자동 슬라이드
- 다양한 크기의 이미지를 넣어도 별도 수정 없이 동작 가능하게 하기
- 슬라이드 양 옆 화살표 버튼을 누르면 이전/이후 이미지로 전환
- 슬라이드 끝 부분에서는 슬라이드 이미지가 첫 번째 이미지로 순환
6일차 미션 공부할 때 전부 구현을 해두어서 다행스 !!
이미지랑 배치 간격 수정하고 제출했다.
slick 라이브러리를 활용하니 간편하게 구현할 수 있었다 🛫
결과
미션 03
📌 요구사항
- 구현한 슬라이드를 메인 페이지 클론 코딩 했던 부분에 적용하기
- 슬라이드 영역 레이아웃 디자인 커스텀 (슬라이드 화살표, dot 등등 추가 요소 고려)
- 슬라이드 영역 내 텍스트 워딩은 이미지가 아닌 마크업으로 작성하기
