Sliding Card Image Gallery in JavaScript

This JavaScript code creates a sliding card image gallery. It adds interactive functionality to slideshow images. Clicking on each image activates it, displaying the respective content. It helps showcase multiple images in an engaging, user-friendly manner.

You can use this code on your website to showcase a collection of images attractively. It enhances user experience by allowing them to interactively browse through images. It’s beneficial for portfolio websites, product showcases, or any site needing visually appealing image displays.

How to Create Sliding Card Image Gallery In Javascript

1. Begin by creating the HTML structure for your gallery. You’ll need a container div to hold all the slides.

<div class="header">
    <h2>JavaScript Cards Gallery</h2>
    <div class="row">
      <div class="container">
        <div class="slide"
          style="background-image: url(&singleQuote;https://images.unsplash.com/photo-1567618890770-5fba551e55fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1568&q=80&singleQuote;);">
          <h3>Greenland</h3>
        </div>
        <div class="slide" style="
            background-image: url(&singleQuote;https://images.unsplash.com/photo-1544220830-7da42df1ff8d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80&singleQuote;);
          ">
          <h3>Texas</h3>
        </div>
        <div class="slide" style="
            background-image: url(&singleQuote;https://images.unsplash.com/photo-1622983472977-c6f47788c7be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1650&q=80&singleQuote;);
          ">
          <h3>Honsu</h3>
        </div>
        <div class="slide" style="
            background-image: url(&singleQuote;https://images.unsplash.com/photo-1623180921692-204e49f5a34e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1568&q=80&singleQuote;);
          ">
          <h3>Hania</h3>
        </div>
        <div class="slide" style="
            background-image: url(&singleQuote;https://images.unsplash.com/photo-1622983473068-37c2e7d04432?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80&singleQuote;);
          ">
          <h3>The Andes mountains</h3>
        </div>
      </div>
    </div>

2. Begin by creating the HTML structure for your gallery. You’ll need a container div to hold all the slides.

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
    box-sizing: border-box;
}

/* Header/Blog Title */

body {
    font-family: "Muli", sans-serif;
    overflow: hidden;
    margin: 0;
    padding: 20px;
    background: rgb(126, 133, 192) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {
    width: 100%;
    margin-top: 5%;
    padding: 20px;
    font-size: 40px;
    text-align: center;
    background: white;
    border-radius: 10px;
}

.container {
    width: 100%;
    display: flex;
    padding: 0 20px;
}

.slide {
    height: 400px;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
    color: #fff;
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: all 500ms ease-in-out;
}

.slide h3 {
    position: absolute;
    font-size: 24px;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
}
.slide.active {
    flex: 10;
}

.slide.active h3 {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

3. Next, write the JavaScript code to implement the sliding functionality. Create a function to handle the slideshow behavior.

function slidesPlugin(activeSlide = 0) {
    const slides = document.querySelectorAll(".slide");

    slides[activeSlide].classList.add("active");

    for (const slide of slides) {
        slide.addEventListener("click", () => {
            clearActiveClasses();
            slide.classList.add("active");
        });
    }

    function clearActiveClasses() {
        slides.forEach((slide) => {
            slide.classList.remove("active");
        });
    }
}

slidesPlugin(2);

Customize the gallery further by tweaking the CSS styles and adding additional features like navigation buttons or autoplay functionality.

Test your gallery thoroughly to ensure it works as expected across different devices and browsers. Once satisfied, deploy it on your website to showcase your images effectively.

That’s all! hopefully, you have successfully created a Sliding Card Image Gallery on your website. If you have any questions or suggestions, feel free to comment below.