Multiple Image Slider using JavaScript

Hey, developers welcome to Day 54 of our 90Days 90Projects challenge. And in Day 54 we are going to Create a multiple images slider using HTML CSS and JavaScript.


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

sidebar menu using html css & javascript, responsive sidebar menu html css, responsive side navigation bar in html css javascript, css sidebar navigation menu


Image Resource - Download Now

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Slider using HTML CSS </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div class="slider">
            <div class="images">
                <img class="image" src="image1.jpg" alt="">
                <img class="image" src="image2.jpg" alt="">
                <img class="image" src="image3.jpg" alt="">
                <img class="image" src="image4.jpg" alt="">
            </div>
        </div>
        <div class="buttons">
            <input type="radio" name="btn" id="btn-1">
            <input type="radio" name="btn" id="btn-2">
            <input type="radio" name="btn" id="btn-3">
            <input type="radio" name="btn" id="btn-4">
        </div>
    </div>

</body>
    <script src="script.js"></script>
</html>



CSS Code

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

.container {
    width: 90%;
    height: 100vh;
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
}

.slider {
    width: 600px;
    padding: 10px;
    display: flex;
    transition: 0.5s;
    overflow: hidden;
    border-radius: 10px;
}

.images {
    display: flex;
    position: relative;
    border-radius: 10px;
    transition: all 0.5s;
}

img {
    width: 100%;
    margin: 0 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgb(62 27 155);
}

.buttons {
    position: absolute;
    display: flex;
    top: 70%;
}

.buttons input {
    margin: 2px;
    cursor: pointer;
}

JavaScript

const btn1 = document.getElementById('btn-1');
const btn2 = document.getElementById('btn-2');
const btn3 = document.getElementById('btn-3');
const btn4 = document.getElementById('btn-4');
const slider = document.querySelector('.slider');
const allImages = document.querySelector('.images');

btn1.addEventListener('click', function () {
    allImages.style.transform = 'translateX(-0px)';
});

btn2.addEventListener('click', function () {
    allImages.style.transform = 'translateX(-105%)';
});

btn3.addEventListener('click', function () {
    allImages.style.transform = 'translateX(-209%)';
});

btn4.addEventListener('click', function () {
    allImages.style.transform = 'translateX(-312%)';
});

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad