HTML CSS 및 JavaScript를 사용하여 이미지 슬라이더를 만드는 방법

이 기사에서는 html 및 css를 사용하여 이미지 슬라이더를 만드는 방법을 배웁니다. 이전에 여러 유형의 자동 및 수동 이미지 슬라이더 디자인을 여러분과 공유했습니다.

이것은 4개의 이미지와 이미지를 변경하는 2개의 탐색 버튼이 있는 아름다운 CSS 이미지 슬라이더 디자인입니다. 내비게이션 버튼을 작동시키기 위해 JavaScript의 도움을 받았습니다.

Watch its live demo 작동 방식을 알아보십시오. 먼저 웹 페이지에 상자를 만들었습니다. 그런 다음 여기에 4개의 이미지를 추가하고 양쪽에 두 개의 버튼을 사용했습니다. 이미지 아래에는 이미지를 변경하고 열려 있는 이미지의 수를 나타내는 4개의 표시기 또는 점이 있습니다.



여기서는 HTML CSS와 JavaScript를 사용했습니다. HTML CSS는 그것을 디자인하고 필요에 따라 이미지를 추가하는 데 도움이 되었습니다. JavaScript를 사용하여 이미지 변경을 구현했습니다.

1단계: 이미지 슬라이더의 기본 구조 만들기

아래의 HTML 및 CSS 코드를 사용하여 상자를 만들었습니다. 이 상자에 이미지와 이미지를 변경하는 버튼을 추가했습니다. html 이미지 슬라이더width: 500px 및 height: 350px .

<div class="container">

</div>

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

body{
    height: 100vh;
    background: #0690e6;
}

.container{
    background-color: #ffffff;
    width: 500px;
    height: 350px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

2단계: 이미지 슬라이더에 이미지 추가

이제 상자에 이미지를 추가했습니다. 여기서는 4개의 이미지를 사용했습니다. 첫 번째 이미지를 활성화하기 위해 활성 태그를 추가했습니다. 이미지width: 460px 및 높이: 280px를 사용합니다.

여기서 display: none는 이미지를 완전히 숨기는 데 사용됩니다. 그런 다음 이미지를 다시 보는 데 도움이 되는 display: block를 추가했습니다.

첫 번째 이미지의 경우 '활성'을 사용했기 때문에 이 경우 첫 번째 이미지가 보입니다.

<div class="image-container">
    <img src="img1.jpg" id="content1" class="active">
    <img src="img2.jpg" id="content2">
    <img src="img3.jpg" id="content3">
    <img src="img4.jpg" id="content4">
</div>

.image-container{
    position: relative;
}

img{
    position: relative;
    width: 460px;
    height: 280px;
    display: none;
}

.active{
    display: block;
}

3단계: 이미지 표시기 만들기

이제 4개의 이미지에 대해 4개의 점을 만들었습니다. 더 많은 이미지를 사용하는 경우 여기에서 점의 양을 늘려야 합니다. 나는 이것을 만들기 위해 버튼의 도움을 받았습니다. 각 점의 너비는 50px, height: 15px이며 여기서 배경색은 완전히 투명합니다.

<div class="dot-container">
   <button onclick = "dot(1)"></button>
   <button onclick = "dot(2)"></button>
   <button onclick = "dot(3)"></button>
   <button onclick = "dot(4)"></button>
</div>

.dot-container{
    width: 250px;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

button{
    outline: none;
    cursor: pointer;
}

.dot-container button{
    height: 15px;
    width: 50px;
    border-radius: 10%;
    border: 3px solid #076bb8;
    background-color: transparent;
}

.dot-container button:nth-child(1){
    background-color: #076bb8;
}

4단계: 이미지를 변경하는 두 개의 버튼 만들기

이제 이미지를 변경하기 위해 두 개의 버튼을 만들었습니다. 두 버튼의 너비와 높이는 40px이고 그 position: absolute를 사용했습니다. position: absolute는 이러한 버튼을 특정 위치에 배치하는 데 도움이 됩니다.

<button id="prev" onclick="prev()"> &lt; </button>
<button id="next" onclick="next()"> &gt; </button>

#prev,#next{
    height: 40px;
    width: 40px;
    position: absolute;
    background-color: #076bb8;
    color: #ffffff;
    margin: auto;
    top: 0;
    bottom: 0;
    border: none;
    border-radius: 3px;
    font-size: 18px;
    font-weight: bolder;
}

#prev{
    left: 5px;
}

#next{
    right: 5px;
}

6단계: JavaScript를 사용하여 이미지 슬라이더 활성화

이제 JavaScript를 사용하여 이미지 변경을 구현할 때입니다. 이제 점과 이미지의 상수를 결정했습니다.

const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");

let i = 0; // current slide
let j = 4; // total slides

이제 JavaScript를 사용하여 다음 버튼을 실행했습니다. 다음 이미지를 보는 데 도움이 됩니다. 여기서는 몇 가지 기본 계산을 사용하여 구현했습니다. JavaScript를 알고 있다면 쉽게 이해할 수 있습니다.

function next(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = ( j + i + 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator( i+ 1 );
}

이제 Previs 버튼이 활성화되었습니다. 미리보기 버튼을 클릭하면 미리보기 이미지를 볼 수 있습니다.

function prev(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = (j + i - 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator(i+1);
}

이제 표시기를 활성화했습니다. 표시기는 열려 있는 이미지를 이해하는 데 도움이 됩니다. 버튼을 사용하여 이미지를 변경하면 표시기가 계속 변경됩니다.

function indicator(num){
    dots.forEach(function(dot){
        dot.style.backgroundColor = "transparent";
    });
    document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#076bb8";
}

이제 표시기에 이미지를 변경하도록 지시했습니다. 이 html css 이미지 슬라이더에서 표시기를 사용하여 이미지를 변경할 수 있습니다.

function dot(index){
    images.forEach(function(image){
        image.classList.remove("active");
    });
    document.getElementById("content" + index).classList.add("active");
    i = index - 1;
    indicator(index);
}

이것은 HTML CSS 및 JavaScript의 도움으로 만든 아름답고 단순한 이미지 슬라이더 디자인입니다. 이 디자인(HTML에서 이미지 슬라이더를 만드는 방법)을 만드는 데 어려움이 있으면 댓글로 알려주세요. Like it if you like this tutorial .

관련 게시물:

Simple Weather App using JavaScript

Make a Todo List using JavaScript

Simple Stopwatch using JavaScript

Skeleton Screen Loading Animation

Javascript Age Calculator

Random Password Generator with JavaScript

Automatic Image Slider in Html, CSS

Sidebar Menu Using HTML CSS

이와 같은 더 많은 자습서를 보려면 내 블로그를 방문하십시오. 😊
https://www.foolishdeveloper.com/