HTML과 CSS만 사용하는 자동 이미지 슬라이더

이 기사에서는 HTML과 CSS만 사용하여 자동 이미지 슬라이더를 만드는 방법을 배웁니다. 이전에 더 많은 유형의 수동 및 자동 이미지 슬라이더를 공유했습니다.

먼저 웹 페이지를 디자인한 다음 거기에 상자를 만들었습니다. 이 상자는 필요한 이미지를 추가한 이 슬라이더의 구조입니다.

✅ 실시간 미리보기 👉👉 Automatic Image Slider

아름다움을 한층 더한 border of 10px를 사용했습니다. 여기에 사용된 이미지는 1초마다 변경됩니다. 그러나 필요한 시간을 변경할 수 있습니다.

다음 튜토리얼에서 각 코드 라인에 대한 완전한 단계별 설명을 제공했습니다.

1단계: 웹 페이지 디자인

아래 CSS 코드를 소량 사용하여 웹 페이지를 디자인했습니다. 여기서는 웹페이지의 배경색만 변경했습니다.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #7aacff;
}

2단계: 슬라이더의 기본 구조 만들기

이제 HTML 및 CSS 코드를 사용하여 해당 페이지에 상자를 만들었습니다. 이 상자에 모든 이미지를 저장합니다. 이 상자 85vh의 너비를 사용했습니다. 이 상자 주위에 10px 테두리가 사용되어 아름다움이 더욱 향상되었습니다.

결국에는 box-shadow를 사용했습니다. 데모를 보면 이 슬라이더 주위에 검은 그림자가 있음을 이해할 수 있습니다. 나는 그것을 만들기 위해 box-shadow를 사용했습니다.

 <div class="container">

 </div>

.container{
    width: 85vmin;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: 10px 25px 30px rgba(0,0,0,0.3);
}

3단계: 자동 이미지 슬라이더에 이미지 추가

다음 코드를 사용하여 image slider에 필요한 이미지를 추가했습니다. 여기서는 4개의 이미지만 사용했습니다. 원하는 경우 더 많은 이미지를 사용할 수 있습니다.

 <div class="wrapper">
   <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg">
   <img src="https://images6.alphacoders.com/462/thumb-1920-462371.jpg">
   <img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg">
   <img src="https://cdn.wallpapersafari.com/24/98/dwMtqD.jpg">
 </div>

아래 CSS 코드를 사용하여 슬라이더에 이 이미지를 깔끔하게 배치했습니다. 여기에 애니메이션을 추가했습니다. 저는 animation for 16 seconds를 사용했습니다. 즉, 이 4개의 이미지를 변경하는 데 총 16초가 걸립니다.

이것은 각 이미지가 4초마다 계속 변경됨을 의미합니다. 이미지가 더 빨리 또는 느리게 변경되기를 원하지만 값을 변경할 수 있습니다.

.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}

4단계: CSS로 자동 재생 활성화

위에서 우리는 완전한 image slider using html css 을 만들었습니다. 이제 자동 재생을 추가했습니다. 즉, 다음 CSS 코드를 사용하여 이미지를 자동으로 변경했습니다.
@keyframes 를 사용하여 이미지를 변경했습니다. 변환을 사용하여 x축을 따라 각 이미지를 변경했습니다. 나는 이미 16초가 걸리는 슬라이더의 전체 너비를 100%로 결정했습니다.

여기서는 4개의 이미지를 사용했기 때문에 총 거리(100%)를 4로 나누었습니다. 따라서 0에서 25%로 이동하는 데 4초가 걸립니다. 25에서 50까지 4초가 더 소요됩니다.

따라서 여기에서 0에서 25까지 translateX의 값을 0으로 설정했습니다. 즉, 변경 사항이 없으며 첫 번째 이미지가 표시됩니다. 그런 다음 25에서 50으로 translateX -100% 값을 사용했습니다. 즉, 먼저 이미지를 변경하고 두 번째 이미지를 볼 것입니다. 각 이미지의 길이가 100%이기 때문입니다.

마찬가지로 50에서 75까지 -200%를 사용했습니다. 즉, 두 번째 이미지를 떠난 후 세 번째 이미지가 표시됩니다. 마찬가지로 75에서 100에 대해 translateXvalue -300%를 사용했습니다. 즉, 세 번째 이미지 대신 네 번째 이미지가 표시됩니다. 이 전체를 변경하는 시간을 16초로 설정했습니다automatic image slider.

@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

관련 게시물:

Simple Weather App using JavaScript

JavaScript Todo List

Simple Stopwatch using JavaScript

Javascript Age Calculator

JavaScript Random Password Generator

Automatic Image Slider in Html, CSS

Sidebar Menu Using HTML CSS

이 튜토리얼에서 내가 automatic image slider in HTML CSS 코드를 어떻게 생성했는지 배웠기를 바랍니다. 이 이미지 슬라이더로 탐색하려면 내가 만든 다른 튜토리얼을 볼 수 있습니다.😊

내 블로그를 방문하면 이와 같은 더 많은 자습서를 볼 수 있습니다.
https://www.foolishdeveloper.com/