HTML 및 CSS를 사용하여 이미지 슬라이더 만들기
https://codepen.io/taimoorsattar/pen/yLJBdKO
👆👆👆
시작하려면 아래와 같이 HTML 코드를 구성할 수 있습니다.
<div class="wrapper">
<h2>Image Slider</h2>
<div class="slider">
<img
src="https://i.picsum.photos/id/694/500/500.jpg?hmac=cEe2DO9tVxp0o0HjSI5RboKc75ofkq50NvKBIlB_0fQ"
alt="pic"
/>
<img
src="https://i.picsum.photos/id/531/500/500.jpg?hmac=eaduedF4dw0jS6AeDrrxNJIxAlsmWfdZWEPdEG84WRw"
alt="pic"
/>
. .
<!-- More Images Here. -->
. .
</div>
</div>
<!-- wrapper -->
원하는 만큼 이미지를 추가할 수 있습니다. 더미 이미지를 다운로드하려면 picsum.photos 사이트를 방문하십시오.
위의 HTML에서 아래와 같이 구성된 HTML 요소에 클래스 이름을 정의했습니다.
.wrapper
└── .slider
└── <img>
└── <img>
└── ....<img>...
원하는 만큼 이미지를 삽입할 수 있습니다. 우리는 우리에게 보이는 이미지만 볼 수 있습니다. 아래 이미지에서 설명하는 것처럼 노란색 영역은 이미지가 표시되는 가시 영역입니다. 더 많은 이미지를 표시하기 위해 왼쪽 이미지 슬라이더.
다음으로 위와 같이 보이는 영역의 너비와 높이를 정의해야 합니다. 보이는 영역의 너비를 정의하기 위해 아래와 같이
.wrapper
클래스를 정의할 수 있습니다..wrapper {
margin: auto;
max-width: 960px;
}
더 많은 이미지를 표시하려면 보이는 영역을 스크롤해야 합니다. 이를 위해 아래와 같이
.slider
클래스를 정의할 수 있습니다..slider {
overflow-x: scroll;
white-space: nowrap;
}
다음으로 슬라이더의 스크롤바를 좀 더 화려하게 만들기 위해 CSS에 아래와 같이 코드를 작성할 수 있습니다.
::-webkit-scrollbar {
height: 5px;
width: 10px;
border-radius: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
또한 CSS 스크롤바에 대한 블로그를 작성했습니다. 관심이 있으시면 아래 링크를 방문하십시오.
마지막으로 이미지 슬라이더 미리보기는 아래와 같습니다.
Reference
이 문제에 관하여(HTML 및 CSS를 사용하여 이미지 슬라이더 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/taimoorsattar7/create-an-image-slider-using-html-and-css-250l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)