html 캐러셀 만들 때

대체로 만들어진 캐러셀 플러그인을 수정해서 쓰는 경우가 많지만

간단한 캐러셀은 직접 만들어 쓰기도 한다.

 

<div class="carousel">
 <ul class="carousel-list">
     <li><a href="#"><img src="xxx.jpg" alt="캐러셀이미지1"></a></li>
     <li><a href="#"><img src="xxx.jpg" alt="캐러셀이미지2"></a></li>
     <li><a href="#"><img src="xxx.jpg" alt="캐러셀이미지3"></a></li>
 </ul>
</div>

가장 간단하게 짠 캐러셀의 구조

 

가로 슬라이드라면 flex로 가로정렬을 해주고 아니라면 기본적으로 세로정렬이니 유의하면 됨