BuildWithAman's Blog

How to build a Expanding Image Carousel Project in vanila JavaScript

Aman Kumar's photo
Aman Kumar
·

8 min read

How to build a Expanding Image Carousel Project in vanila JavaScript

Table of contents

Introduction

Hey Everyone,👋
I hope you all are fine and doing great.

Today we are going to build a simple but very impressive and great looking javaScript project named "Expanding Image Carousel".

Before proceeding with the steps on how to build it,
Check this project right here 👈

How does the project work?

How it works ?? Just click on the images and it will expand with an animation effect.
I hope you have watched the project by clicking on the link and are very excited to build it.

Let's proceed with the STEPS on how to build it.

First create files - index.html, style.css, and script.js.
And Link style.css file and script.js file with index.html file.

Before proceeding further make sure that you have installed "Live Server Extension" If you have not Installed it :-
Click on the extension tab and search for Live Server Extension by Ritwick Dey and install it.

HTML Code Explanation

Now we are ready to go
Here is the HTML code we need:-

<!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>Expanding Cards</title>
    <link rel="stylesheet" href="style.css"> <!--Linked the CSS page -->
</head>

<body>
    <div class="container">
        <div class="image active" id="flame"><h3>Flame Hashira</h3></div>
        <div class="image" id="sound"><h3>Sound Hashira</h3></div>
        <div class="image" id="water"><h3>Water Hashira</h3></div>
        <div class="image" id="insect"><h3>Insect Hashira</h3></div>
        <div class="image" id="serpent"><h3>Serpent Hashira</h3></div>
    </div>

    <script src="script.js"></script> <!-- Javascript Page linked Here -->
</body>
</html>

In the above HTML code, we have added five "<div>" elements with "class" attribute - "image" and unique "id" attribute for all the "<div>" elements so that we can easily select them and apply our JavaScript and CSS code on them.

After saving this HTML code open it with Live Server, for doing so right click anywhere when you are inside the index.html file and choose Open with live server option.

After doing so the above code implementation will look like :

CSS Code Explanation

/* Here I have used google font "Caveat" by importing google fonts */
@import url('https://fonts.googleapis.com/css2 family=Bruno+Ace&family=Caveat&family=Foldit&display=swap');

Here in the above CSS file I have imported Google fonts.
If you don't know how to do this Let me know in the comment section.
I will provide you with a small article on how to import Google fonts and use different varieties of fonts on your website.

Let's continue further...

* {
    margin :0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Caveat', cursive;
}

This code snippet here is a basic CSS reset or normalization snippet that removes default spacing, sets the box-sizing behavior, and defines a specific font for the page.

It provides a consistent starting point for styling web elements across different browsers.

body{
    display: flex;
    min-height:100vh;
    align-items: center;
    justify-content: center;
}

This code snippet is used to center the "div element" with the "class" container" both vertically and horizontally.

Basically, This set of codes selects the body element of the web page and applies the following CSS properties :

  • display : flex; :--
    This will allow us to place the body's children element "div" with class "container" with ease (for instance, centering it vertically and horizontally).

  • min-height : 100vh :--
    This CSS property sets the minimum height of the body element here to 100% of the viewport(viewport means the user's visible area of the web page. It varies from device to device).

    It prevents the used value of the "height" property from becoming smaller than the value specified for "min-height".

  • align-items :
    center; :-- This property centers the "div" element with class "container" vertically inside the body.

    For using this css property the div element must be given a height

  • justify-content : center; :--
    This property centers the "div" element with class "container" horizontally inside the body.

.container{
    display: flex;
    width:80vw;
}

I hope you understood this set of codes.
Here

  • width : 80vw :-- this will set the height of the div element with class "container" to 80% of the viewport(viewport means the user's visible area of the web page. It varies from device to device) width w.r.t "body" element.
#flame{
    background-image: url('images/flameHashira.jpeg');
}

#sound{
    background-image: url('images/soundHashira.jpeg');
}

#water{
    background-image: url('images/waterHashira.png');
}

#insect{
    background-image: url('images/insectHashira.png');
}

#serpent{
    background-image: url('images/serpentHashira.jpeg');
}

Here in this set of code snippets, I have selected all "div" elements with class "image"
one by one with their unique "id s" and set their "background image" with the help of the URL().

.image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height:80vh;
    flex:0.5;
    border-radius: 50px;
    margin:10px;
    transition: flex 0.7s ease-out;
    cursor:pointer;
    color:rgb(255, 0, 0);
    position : relative;
    text-align: center;
}

I hope you all are comfortable with this set of codes above👆

  • Only property which may be bothering you can be :
    flex : 0.5 :-- This property affect the width of the "div" elements having class "image".
.image h3{
    position:absolute;
    bottom:20px;
    left:20px;
    opacity: 0;
}

Here "h3 tag" which is inside the "div" element with class "image" is selected and the following CSS properties are implemented.

  • position : absolute :-- This will help us to easily position the content inside the h3 tag to the bottom left inside the div element with the class "image".

  • opacity : 0; :-- Here the opacity of the div element with class "image" is set to zero so that when the image is in the folded state, the content inside the h3 tag must not be visible to the user.

    When the viewer clicks on the folded image it will increase its width and the content inside the h3 tag will be visible now ( how this can be done is explained later in this blog post).

.image.active{
    flex: 5;
    color:rgb(0, 136, 255);
    font-size: 2rem;
}

Here the div element with both the classes "image" and "active" is selected and the following CSS properties are implemented on it :-

  • flex : 5; :-- This property will set the width of the div element with both the classes "image" and "active" to 5;

  • Other codes color and font-size are used to set the text color of the text content inside the "h3" tag inside the div element with both the classes "image" and "active" to specified values respectively.

.image.active h3{
    opacity: 1;
    transition: opacity 0.4s ease-in 0.7s;
}

This set of code snippets selects the "h3" tag inside the div element with both the classes "image" and "active" and

  • Sets the opacity of content inside the "h3" tag to 1 so that text inside the h3 tag is visible when the "div" element with both the classes "image" and "active" is in the unfolded state.
@media (max-width:500px) {
    .container{
        width:100vh;
    }

    #serpent{
        display: none;  
    }  
}

Here when the screen width is 500 pixels or less, the container will take up the full height of the viewport, and the div element with id - #serpent will be hidden and not displayed.

The #serpent element is hidden because mobile phones have smaller screen sizes.
Here we have concluded the HTML and CSS part

JavaScript Code Explaination

JavaScript Logic Behind This project

Let us now discuss the logic part of the JavaScript code.

What I am trying to let you know is "What will we the logic behind - whenever the viewer clicks the image which is in the folded state will be in the open state and the previous open image will have to be in folded state"

The answer to this question is
When the viewer clicks on the unfolded image two things will happen :

  1. "active" class will be added to the div element on which the viewer has clicked. So that this div element will be in the opened or unfolded state.

  2. "active" class will be removed from the previous div element which is in the opened or unfolded state. So that this div element gets closed or folded.

const allImages = document.querySelectorAll(".image");

This line of javascript code will select all the HTML elements with class "image" and store it in the variable array "all_Images"

for(let i=0; i < allImages.length; i++){
    allImages[i].addEventListener("click",function(){
        removePreviousActiveClass();
        allImages[i].classList.add("active");     
    });
}

  • for loop : This iterates over each element in the "all images" array.

  • for each element in the array "all_Images" an "click" event listener is added
    Whenever the image is clicked the removePreviousActiveClass() function will be called.
    Here in the removePreviousActiveClass() function some lines of code are written which will remove the ".active" class from the previous div element which is in the opened or unfolded state.

  •           function removePreviousActiveClass(){
              for(let i=0; i<allImages.length; i++){
                  allImages[i].classList.remove("active");
              }
          }

    Here in the above code we can see
    all_Images[i].classList.remove("active") is removing the active class from div element which is in the opened or unfolded state.

  • After the execution of the removePreviousActiveClass() function
    this line of code will be executed :
    all_Images[i].classList.add("active") :-- This will add "active" class to the clicked div element.

Conclusion

So here we have completed our javascript Expanding Image Carousal Project.
I hope you enjoyed the process.

Do comment down Do you like the project or not, what are your thoughts regarding this blog post?
Also, Let me know if You have any doubts.
If you want me to do any improvements comment down.

That's all for today
I will see you all in my next blog with some other exciting projects.
Thanks for having patience.
Bye

KEEP LEARNING , KEEP BUILDING AND KEEP EXPLORING

Web DevelopmentFrontend DevelopmentHTML5JavaScriptCSS