HTML 및 CSS에서 자동 이미지 슬라이더를 만드는 방법
필요한 소스 코드가 필요한 경우 문서 하단의 다운로드 버튼을 사용하여 필요한 소스 코드를 다운로드할 수 있습니다.
위의 동영상에서 볼 수 있듯이 홈페이지에 깔끔하게 정리된 9장의 사진이 있습니다. 각 이미지는 다른 이미지와 40도 각도로 배열됩니다. 결과적으로 9개의 이미지가 결합되어 360도 원을 형성합니다.
이 슬라이더는 이 원 안의 이미지 위로 마우스를 가져가거나 클릭하면 회전이 멈춥니다. 일반적으로 수시로 회전하지만 클릭하면 슬라이더가 회전을 멈춥니다. 또한 이미지에 확대/축소 효과가 부여되었습니다. 이미지를 클릭하면 이미지가 약간 확대됩니다.
위의 라이브 데모에서 이 이미지 슬라이더에 대한 완전한 아이디어를 얻으셨기를 바랍니다.
HTML 및 CSS에서 자동 이미지 슬라이더를 만드는 방법
이제 약혼했다면 아래 자습서를 따라야 합니다. HTML 코드를 사용하여 슬라이더의 기본 구조를 만들고 필요한 이미지를 추가했습니다.
CSS 코드의 도움으로 완전히 디자인하고 이미지를 특정 각도로 아름답게 배열했습니다. 여기서는 JavaScript를 사용하지 않기 때문에 CSS 코드 @keyframes 사용하여 이 슬라이더를 작동시켰습니다.
1단계: HTML 코드 및 필수 이미지 추가
아래 HTML 코드를 사용하여 슬라이더의 구조와 필요한 이미지를 추가했습니다. 여기에서는 9개의 이미지를 사용했습니다. 원하는 만큼 이미지를 사용할 수 있습니다.