Как создать красивый слайдер для галереи изображений с помощью HTML CSS и JavaScript

В этом видео мы создадим слайдер для галереи изображений с использованием HTML CSS и Javascript. Скольжение изображений по клику. Навигация под изображениями. Надеюсь, это видео будет полезным для вас. Скачать коды можно по ссылке ниже.

СКАЧАТЬ

ДЕМО

Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, то оставьте комментарий ниже. Ваши отзывы помогают нам создавать более ценный контент.

HTML КОД:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-cUR9qTVzmiMaXKni6O3zdy8rn5ybam5P6EKjrq6taRxA3fBaTCIISD70NNW6k8RywnqVCIInVd9sPuCX_KfwKt0mzM43GZL6QiPp_AxD52L4p0DIj6aXHTyrV0DcBn5pLQHRxAlJim6mT8kRdlO3YvxSc501dzSf22AYfA6IbU3qZCShxqG18AaAR-7J/s80/monster-fav-80-80.png' rel='icon' type='image/png'/>
<title>Image Slider with HTML CSS and Javascript | Image Slider gallery</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!--Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<!--Stylesheets-->
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<section>
<div class="buttons">
  <input type="radio" name="radio-btn" id="radio1" class="button" onclick="changeSlide(0)" checked>
  <input type="radio" name="radio-btn" id="radio2" class="button" onclick="changeSlide(1)">
  <input type="radio" name="radio-btn" id="radio3" class="button" onclick="changeSlide(2)">
  <input type="radio" name="radio-btn" id="radio4" class="button" onclick="changeSlide(3)">
</div>

<img src="images/p1.jpg" alt="" class="slide">
<img src="images/p2.jpg" alt="" class="slide">
<img src="images/p3.jpg" alt="" class="slide">
<img src="images/p4.jpg" alt="" class="slide">

</section>

<div class="nav">
  <a class="side-button prev" onclick="goPrev()"><i class="fa-solid fa-circle-left"></i></a>
  <a class="side-button next" onclick="goNext()"><i class="fa-solid fa-circle-right"></i></a>
</div>


<!--Script-->
<script src="js/script.js"></script>

</body>
</html>

CSS КОД:


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

body{
    background-color: rgb(82, 82, 82);
    height: 100vh;
    width: 100vw;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

section{
    background-color: aliceblue;
    height: 550px;
    width: 1000px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    border: 4px solid aliceblue;
    box-shadow: 5px 5px 20px aliceblue,
    -2px -2px 10px aliceblue;
}

img{
    width: 100%;
    height: fit-content;
    position: absolute;
    transition: 1s;
}

.nav{
    color: aliceblue;
    position: absolute;
    display: flex;
    justify-content: space-between;
    gap: 900px;
    font-size: 30px;
	cursor: pointer;
}

.prev:hover,
.next:hover{
    color: rgb(255, 251, 0);
}

.buttons{
    z-index: 100;
    display: flex;
    position: absolute;
    color: aliceblue;
    bottom: 20px;
    gap: 15px;
}

input[type="radio"] {
    height: 1.2rem;
    width: 1.2rem;
	cursor: pointer;
}

JAVASCRIPT КОД:


const slides = document.querySelectorAll(".slide")
const radioButton = document.querySelectorAll(".button")

var counter = 0;

slides.forEach(
    (slide, index) => {
        slide.style.left = `${index * 100}%`
    }
)

const goNext = () => {
    counter++
    slideImage()
}

const goPrev = () => {
    counter--
    slideImage()
}

const slideImage = () => {
    slides.forEach(
        (slide) => {
            counter <= slides.length - 1 ?
            slide.style.transform = `translateX(-${counter * 100}%)` 
            : counter = slides.length - 1
        }
    )

    radioButton.forEach((radio, i) => {
        radio.checked = i===counter
    })
}

const changeSlide = (slideNumber) => {
    counter = slideNumber
    slides.forEach(
        (slide) => {
            counter <= slides.length -1 ?
            slide.style.transform = `translateX(-${counter * 100}%)` 
            : counter = slides.length -1
        }
    )
}