Modern Image Slider with HTML, CSS, and JavaScript @rayen-code

Rayen

Step into the world of dynamic web design with our tutorial on building a Modern Image Slider using HTML, CSS, and JavaScript. This versatile slider enhances user experience, showcasing your content in an engaging and interactive manner.




Step 1: HTML Markup:

Begin by structuring your HTML to include the image slider components. Define the container, slide elements, navigation buttons, and indicators, laying the foundation for your sleek image slider. 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Slider</title>
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

    <div class="container">
        <div class="slide">
            <!-- item 01 -->
            <div class="item" style="background-image: url(https://source.unsplash.com/1400x600/?animal,two);">
                <div class="content">
                    <div class="name">Rayen</div>
                    <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisci
                        doloribus animi.</div>
                    <button>See More</button>
                </div>
            </div>
            <!-- item 02 -->
            <div class="item" style="background-image: url(https://source.unsplash.com/1400x600/?animal,three);">
                <div class="content">
                    <div class="name">Rayen</div>
                    <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisci
                        doloribus animi.</div>
                    <button>See More</button>
                </div>
            </div>
            <!-- item 03 -->
            <div class="item" style="background-image: url(https://source.unsplash.com/1400x600/?animal,four);">
                <div class="content">
                    <div class="name">Rayen</div>
                    <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisci
                        doloribus animi.</div>
                    <button>See More</button>
                </div>
            </div>
            <!-- item 04 -->
            <div class="item" style="background-image: url(https://source.unsplash.com/1400x600/?animal,five);">
                <div class="content">
                    <div class="name">Rayen</div>
                    <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisci
                        doloribus animi.</div>
                    <button>See More</button>
                </div>
            </div>
            <!-- item 05 -->
            <div class="item" style="background-image: url(https://source.unsplash.com/1400x600/?animal,one);">
                <div class="content">
                    <div class="name">Rayen</div>
                    <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisci
                        doloribus animi.</div>
                    <button>See More</button>
                </div>
            </div>
            <!-- item 06 -->
            <div class="item" style="background-image: url(https://source.unsplash.com/1400x600/?animal,six);">
                <div class="content">
                    <div class="name">Rayen</div>
                    <div class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisci
                        doloribus animi.</div>
                    <button>See More</button>
                </div>
            </div>
        </div>


        <div class="btns">
            <button class="prev"><i class="fa-solid fa-arrow-left"></i></button>
            <button class="next"><i class="fa-solid fa-arrow-right"></i></button>
        </div>
    </div>


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

</html>

Step 2: Styling with CSS:

Enhance the visual appeal of your image slider with CSS styles. Customize the appearance of slides, navigation buttons, and indicators to create a modern and sleek design.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
}

.container {
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.container .item {
    width: 200px;
    height: 300px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 20px;
    box-shadow: 0 30px 50px #505050;
    background-position: center;
    background-size: cover;
    display: inline-block;
    transition: 0.5s;
}

.container .item:nth-child(1),
.container .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;
}

.container .item:nth-child(3) {
    left: 60%;
}

.container .item:nth-child(4) {
    left: calc(60% + 220px);
}

.container .item:nth-child(5) {
    left: calc(60% + 440px);
}

.container .item:nth-child(n + 6) {
    left: calc(60% + 660px);
}

.container .content {
    position: absolute;
    top: 50%;
    left: 100px;
    width: 300px;
    text-align: left;
    color: white;
    transform: translate(0, -50%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: none;
}

.container .item:nth-child(2) .content {
    display: block;
}

.container .content .name {
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    animation: anime 1s ease-in-out 1 forwards;
}

.container .content .desc {
    opacity: 0;
    animation: anime 1s ease-in-out 0.3s 1 forwards;
}

.container .content button {
    padding: 10px 20px;
    border: 0;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0;
    animation: anime 1s ease-in-out 0.6s 1 forwards;
    margin-top: 5px;
}

@keyframes anime {
    0% {
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(30px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0px);
        filter: blur(0px);
    }
}


.btns {
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 20px;
}

.btns button {
    width: 40px;
    height: 35px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    margin: 0 5px;
    transition: 0.2s;
}

.btns button:hover {
    background: #ababab;
}

Step 3: Adding JavaScript Interaction:

Implement the logic for navigating slides and updating indicators using JavaScript. Define functions to switch between slides and update the active indicator dynamically.
//-------------------- Java Script --------------------//
let prev = document.querySelector(".prev")
let next = document.querySelector(".next")

next.addEventListener("click", () => {
    let items = document.querySelectorAll(".item");
    let slider = document.querySelector(".slide")
    slider.appendChild(items[0])
})
prev.addEventListener("click", () => {
    let items = document.querySelectorAll(".item");
    let slider = document.querySelector(".slide")
    slider.prepend(items[items.length - 1])
})

In conclusion, the Modern Image Slider tutorial empowers you to create visually stunning and interactive sliders for your website. With HTML, CSS, and JavaScript, you can elevate your web design and captivate your audience with dynamic content presentations.

0 Comments