HTML 및 CSS를 사용한 자동 이미지 슬라이드쇼

[gyun님]

HTML 및 CSS를 사용한 자동 이미지 슬라이드쇼
#
HTML
#
CSS
#
초보자
#
웹개발
이 기사에서는 HTML 및 CSS 코드를 사용하여 자동 이미지 슬라이드쇼를 만드는 방법을 설명했습니다. 앞서 자동 이미지 슬라이더를 만드는 방법을 보여 드렸습니다 . 이 디자인을 만들려면 HTML과 CSS 코드만 사용했습니다.

이 이미지 슬라이드쇼에는 9개의 이미지를 사용했습니다. 각 이미지를 일정한 각도로 깔끔하게 배열하여 원형 원을 만들었습니다. 간단한 자동 이미지 슬라이드쇼 의 경우 모든 이미지가 하나의 상자에 들어 있습니다. 그 이미지는 수시로 변합니다. 하지만 이 경우에는 각 이미지를 특정 각도로 배열했습니다. 여기서는 9개의 이미지를 사용했으므로 각 이미지를 40 degree angle.

아래에서는 HTML 및 CSS 코드를 사용하여 이 디자인을 만드는 방법을 단계별로 자세히 설명합니다.

1단계: 기본 구조 생성 및 이미지 추가
먼저 다음 HTML 코드를 사용하여 필요한 이미지를 추가했습니다. 저는 9개의 이미지를 사용했습니다. 원하는 경우 원하는 양을 줄이거나 늘릴 수 있습니다.
   <div class="slider">
     <div class="rotator">
        <div class="items">
           <img src="img1.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img2.jpg" />
        </div>
        <div class="items">
           <img src="img3.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img4.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img5.jpg" />
        </div>
        <div class="items">
           <img src="img6.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img7.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img8.jpg" alt="items photo" />
        </div>
        <div class="items">
           <img src="img9.jpg" alt="items photo" />
        </div>
     </div>
  </div>
기본 텍스처 생성 및 이미지 추가

이제 웹 페이지의 특정 배경색을 설정했습니다.
    body{
      background: #0c3c53
    }
특정 배경색 설정

2단계: CSS 코드를 사용하여 슬라이드쇼 디자인
다음 CSS 코드를 사용하여 이 슬라이더의 구조를 구성했습니다. 여기에서는 각 슬라이더를 350px width사용 했습니다 . 150px height저는 animation: roter 29s linear infinite이 슬라이드쇼를 회전하곤 했습니다.

여기서는 전체 슬라이더를 한 번 회전하는 데 29초를 사용했습니다. 이 슬라이더를 더 빠르게 회전하려면 여기에서 값을 변경할 수 있습니다.
 .slider {
    position: relative;
    width: 350px;
    margin: 50px auto;
    perspective: 1000px;
    padding-top: 120px;
    }
 .rotator {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 55%;
    height: 150px;
    transform-style: preserve-3d;
    animation: roter 29s linear infinite;
    }
3단계: 이미지 크기 설정 및 기본 디자인 수행
이제 각 이미지의 크기를 결정했습니다. 여기서는 이미지의 높이와 너비를 100% 사용했습니다. 이는 이미지가 상단 슬라이더의 구조와 정확히 동일하다는 것을 의미합니다. 또한 이미지의 아름다움을 강화하기 위해 이미지 주변에 테두리를 사용했습니다.
 .items {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: 2px solid white;
    }

 .items img {
    height: 100%;
    width: 100%;
    transition: all 3s ease;
    }
이미지의 크기를 설정하고 기본 디자인을 합니다.

이미지에 호버 효과를 주었습니다. 해당 이미지를 클릭하시면 이미지가 조금 확대됩니다. 저는 transform: scale (1.1)이걸 확대해서 보곤 했어요.

이 확대/축소 값을 높이려면 여기에서 품질을 높이면 됩니다. 여기서는 1.1을 사용했습니다. 원하는 경우 1.4또는를 사용할 수 있습니다.1.5
 .items:hover img {
    transform: scale(1.1);
    }

4단계: @keyframes 라우터를 사용하여 슬라이더 회전
이제 CSS를 사용하여 @keyframes이 슬라이더를 회전했습니다. 이렇게 하면 슬라이더가 y축을 따라 360도 회전하게 됩니다.
 @keyframes roter {
    from {
    transform: rotateY(0deg);
    }
    to {
    transform: rotateY(360deg);
    }
    }
@keyframes 라우터를 사용하여 슬라이더 회전

5단계: 특정 각도로 이미지 정렬
위 사진에서 볼 수 있듯이 여기서는 9개의 사진 중 하나만 볼 수 있습니다. 모든 사진이 그 한 곳에 추가되었기 때문입니다. 이제 다음 CSS 코드를 사용하여 이미지를 특정 각도로 배열하겠습니다.

Transform: rotateY이를 위해 사용되었습니다. 9개의 이미지를 사용했기 때문에 각 이미지를 40도 각도로 배열했습니다. 결과적으로 9개의 이미지가 합쳐져 ​​원을 형성하게 됩니다.
 .items:first-child {
    transform: rotateY(calc(40deg)) translateZ(300px);
    }

 .items:nth-child(2) {
    transform: rotateY(calc(80deg)) translateZ(300px);
    }

 .items:nth-child(3) {
    transform: rotateY(calc(120deg)) translateZ(300px);
    }

 .items:nth-child(4) {
    transform: rotateY(calc(160deg)) translateZ(300px);
    }

 .items:nth-child(5) {
    transform: rotateY(calc(200deg)) translateZ(300px);
    }

 .items:nth-child(6) {
    transform: rotateY(calc(240deg)) translateZ(300px);
    }

 .items:nth-child(7) {
    transform: rotateY(calc(280deg)) translateZ(300px);
    }

 .items:nth-child(8) {
    transform: rotateY(calc(320deg)) translateZ(300px);
    }

 .items:nth-child(9) {
    transform: rotateY(calc(360deg)) translateZ(300px);
    }
HTML 및 CSS를 사용한 자동 이미지 슬라이드쇼

위에서 우리는 완전한 이미지 슬라이드쇼를 만들었습니다. 이 슬라이드쇼 takes 29 seconds to rotate once. 이는 우리가 29초 후에 각 사진을 보게 된다는 뜻입니다.

아래에서는 호버 효과를 사용했습니다. 이 슬라이더는 해당 이미지 위에 마우스를 올리거나 클릭하면 회전이 중지됩니다. 위에서 애니메이션을 사용하여 슬라이드쇼를 무한으로 회전하도록 지시했습니다.

animation-play-state: paused이제 아래에서는 클릭하면 사용을 중지하도록 지시했습니다 .
 .rotator:hover {
    animation-play-state: paused;
    }
이 튜토리얼을 통해 제가 자동 이미지 슬라이드쇼를 만든 방법을 배웠기를 바랍니다. 작동 방식을 더 자세히 알고 싶다면 라이브 데모를 시청할 수 있습니다 .

이 유형에서는 이미 더 많은 자동 이미지 슬라이더를 만들었습니다 . 이 슬라이더가 마음에 들면 해당 디자인을 볼 수 있습니다.

인기댓글 (0)
구독하다
사진
토론에 추가
행동강령 • 악용사례 신고
프로필
조각.app
승격됨

개발자 워크플로 혁신: 조각과 함께하는 여정
Pieces.app 이미지

온라인으로 솔루션을 검색하는 것부터 IDE에서 코드를 작성하는 것, 심지어 팀 협업 중에도 전체 개발 워크플로를 원활하게 통합하는 도구를 상상해 보세요. 조각은 도구(또는 도구 사이의 도구)입니다.

전체 게시물 읽기

다음 읽기
aurelievache 프로필 이미지
Kubernetes 이해하기: 50부 – Kubernetes 1.29 변경 로그
오렐리 바슈 -12월 18일

brendamichellle 프로필 이미지
웹 개발자로서의 프리랜서 활동에 대해 그들이 말하지 않는 것
브렌다 미셸 -12월 18일

dev_kiran 프로필 이미지
🔥멋진 개발 포트폴리오 - 귀하의 포트폴리오는 여기에 속합니다!😍
키란 나라군드 -12월 18일

calvinmclean 프로필 이미지
Acorn을 사용하여 클라우드에서 Go + HTMX 실행
캘빈 맥클린 -12월 18일


어리석은 개발자
따르다
가입됨
2021년 5월 7일
어리석은 개발자가 참여한 작품 더보기
코드 언어로 당신을 사랑합니다
# webdev # 초보자 # 프로그래밍 # 튜토리얼
Java의 간단한 숫자 추측 게임
# java # webdev # javascript # 초보자
C++의 사랑해요 코드
# webdev # 초보자 # 프로그래밍 # 튜토리얼
프로필
DEV 광고 파트너
승격됨

ads via Carbon
Get 10 Free Images From Adobe Stock. Start Now.
ads via Carbon
개발자 커뮤니티— 소프트웨어 개발자를 위한 건설적이고 포용적인 소셜 네트워크입니다. 여행의 모든 ​​단계를 당신과 함께합니다.

집
팟캐스트
비디오
태그
자주하는 질문
포렘샵
DEV에 광고하기
에 대한
연락하다
가이드
소프트웨어 비교
행동 강령
개인 정보 정책
이용약관
기반포렘—오픈 소스힘을 실어주는 소프트웨어개발그리고 기타 포용적인 커뮤니티.

사랑과 정성으로 만든루비 온 레일즈. DEV 커뮤니티 © 2016 - 2023.