Image Carousel using JavaScript, HTML, CSS

Pradhyumn Sharma — Wed, 07 Feb 2024 17:51:46 +0000

Hey there!!

We all have seen carousels on many websites. And you too might have used in your web projects with the help of some framework like Bootstrap.

But today we will implement it on our own using HTML, CSS and JavaScript. And also it could be asked to you in some machine coding interview round.

Before we dive into the coding part let’s understand the structure of a carousel.

We have main div, we can call it as the container (div#container) with some width and height.
We have let’s say 4 div inside the main div that contains our images (div.image__container).
Every inner div contains an image taking full width and height of the parent and also object-fit : cover property, so our every image covers the whole div.
Now, the main div would be having display : flex property so that our inner divs are in a row but we need to show one image at a time so we need to apply overflow : hidden property too.
We need two buttons, one to move to the next image and one to get back to the previous one.

After these 5steps our output would be like this.

Now here’s one thing to note, by default flex property has flex-shrink : 1 set to the children, that’s why our images are being shrunk, but for our use case we want the div to take full width of the main container. In order to achieve that we need to put flex-shrink : 0 for inner divs.

And after this step our output would be like this.

Now let’s have some dive into coding!!

1. HTML

<!DOCTYPE html>
<head>
    <link href="carousel.css" rel="stylesheet" />
</head>
<body>
    <div id="carousel__container">
        <div class="img__container">
        <img class="carousel__img" src="https://i.ibb.co/K2KkmJx/florian-olivo-4hb-J-eym-Z1o-unsplash.jpg" alt="carousel-img" />
        </div>
        <div class="img__container">
            <img class="carousel__img" src="https://i.ibb.co/3Nmfpsm/jackson-sophat-t-l5-FFH8-VA-unsplash.jpg" alt="carousel-img" />
        </div>
        <div class="img__container">
            <img class="carousel__img" src="https://i.ibb.co/sVXbVdr/nathan-da-silva-k-r-Kfq-Sm4-L4-unsplash.jpg" alt="carousel-img" />
        </div>
        <div class="img__container">
        <img class="carousel__img" src="https://i.ibb.co/fMf7S4k/kobu-agency-ip-ARHax-ETRk-unsplash.jpg" alt="carousel-img" />
        </div>
        <button id="prev-btn" class="btn">P</button>
        <button id="next-btn" class="btn">N</button>
        </div>
</body>
<script src="carousel.js"></script>
</html>

2. CSS

#carousel__container {
  position: relative;
  display: flex;
  width: 600px;
  height: 300px;
  overflow: hidden;
  border: 1px solid red;
}

.img__container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.img__container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  color: black;
  background-color: white;
  border: none;
  outline: none;
  padding: 5px 7px;
  cursor: pointer;
}
#prev-btn {
  left: 10px;
}
#next-btn {
  right: 10px;
}

3. JavaScript : This is where all the magic happens.

This block of code is simple to understand, we are adding event listeners to our buttons so to invoke corresponding functions.

We are getting our images from the DOM and storing them in an array.

const nextBtn = document.getElementById("next-btn");
const prevBtn = document.getElementById("prev-btn");

nextBtn.addEventListener("click", showNextImage);
prevBtn.addEventListener("click", showPrevImage);

//document.getElementsByClassName return HTML collection so we are using "Array.from" method to get an iterable

const images = Array.from(document.getElementsByClassName("carousel__img"));
const totalImages = images.length;

let currentImageIndex = 0; //index of image that being display on screen

You must have seen that in a carousel, images slide with a smooth sliding effect so to add the same effect, we are creating a function that add CSS styling to every image..

function addTransitionEffectToImages() {
  images.forEach((img) => {
    img.style.transition = "transform 0.8s ease";
  });
}

Now let’s understand what happens when user click on the next button.

Firstly, we are adding the transition effect to our images so they slide smoothly giving a sliding effect.
In CSS, we have transform property through which we can animate a HTML element in various ways. But for our use case we want to move our inner divs in X(horizontal) direction by some specific pixels or percentage. For that we have translateX function. If we want our element to move in right direction, the value passed would be positive and vice-versa.

transform : translateX(50px); //moves elements to right by 50px
transform : translateX(-30px); //moves elements to left by 30px

transform : translateX(100%); //moves elements to right as far as its length
transform : translateX(-100%); //moves elements to left as far as its length

Now, every time we click on the next button, every image would move to the left based on what position they are at currently on and update the index by 1.
If we are on last image we will reset our carousel using the resetCarousel() function. ``` function showNextImage() { //if we are at last image reset the carousel if (currentImageIndex == totalImages - 1) { resetCarousel(); return; }

if (currentImageIndex === 0) addTransitionEffectToImages();
//translate every image with (-100%) every time we go to next image
images.forEach((img) => {
img.style.transform = translate(${(currentImageIndex + 1) * -100}%);
});
currentImageIndex++;
}

function resetCarousel() {
images.forEach((img) => {
//we are setting "none" so when every image gets back to position we don't want to show sliding effect
img.style.transition = "none";
img.style.transform = translate(0); //every image back to original position
});
currentImageIndex = 0;
}


In our **resetCarousel()** function we are removing the transition property because every image will return to its normal position but with the sliding effect like a train goes on but we don’t want that. Removing this property will show directly the first image without any effect. You can try removing in your code and see what happens.

We are remaining with one last thing that how to make previous button work.

- If we are on the 1st image then we simply return.
- The logic of this part is opposite of the next button functionality. We simple **translateX** the images by -100% and decrement the index by 1.

function showPrevImage() {
if (currentImageIndex === 0) return; //if we are at first image, then simply return

//reverse logic for what we did in showNextImage
images.forEach((img) => {
img.style.transform = translateX(${(currentImageIndex - 1) * -100}%);
});
currentImageIndex--;
}


**_Happy Coding!!_**

**_Thank you for reading…Do like and comment!!_**

Polyfill for map, filter and reduce in JavaScript

Pradhyumn Sharma — Tue, 06 Feb 2024 11:04:15 +0000

Hey there!!

If you are a JavaScript developer or learner then you must have come around these 3 widely used array methods : map, filter and reduce.

If you are a consistent learner or preparing for interviews, this article might help you to go little bit deep down in JS. Before we see how Polyfills are implemented lets define what a Polyfill is.

Polyfill : A piece of code to implement a specific functionality so that browsers provide them natively. Suppose a browser doesn’t support a particular String method, in that case developers could write their own implementation for the same.

Now, let’s dive into some coding!!

In JavaScript if you want add a method to an object we can do it by using the prototype. Suppose, you have an object named Person and you wish to add a method getName(), then you can do that by following piece of code.

Person.prototype.getName = function() {
  //code goes here
}

Now, using the same syntax we are going to implement our polyfills.

If you see the syntax of map(), filter() and _reduce() _functions, they take a callback as an argument. And that callback function takes 3 arguments.

currentValue
index of currentValue [Optional]
array [Optional]

Polyfill for map : customMap()

Array.prototype.customMap = function(callback) {
  const arr = this;
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    const val = callback(arr[i], i); //pass 'i' for index
    result.push(val);
  }
  return result;
};

const arr = [1,2,3,4,5];
console.log(arr.customMap((ele, index) => {
  console.log(index);
  return ele*2;
}))
//Output
//0 1 2 3 4
//[2,4,6,8,10]

Polyfill for filter : customFilter()

Polyfill for filter is same as map with the only difference that we just need to add array element into the result if the callback returns true.

Array.prototype.customFilter = function(callback) {
  const arr = this;
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if(callback(arr[i], i) === true);
      result.push(arr[i]);
  }
  return result;
};

const arr = [1,2,3,4,5];
let result = arr.customFilter((ele) => {
  return (ele%2 === 0);
})

console.log(result);
//[2,4]

Polyfill for reduce : customReduce()

Polyfill for reduce is little different than the previous ones. It takes one more argument named as initialValue.

array.reduce(callback(result, currentValue, index), initialValue = 0)

Array.prototype.customReduce = function (callback, initialValue = 0) {
  const arr = this;
  let result = initialValue;
  for (let i = 0; i < arr.length; i++) {
    result = callback(result, arr[i], i);
  }
  return result;
};

const arr = [1, 2, 3, 4, 5];
let result = arr.customReduce((res, arr) => {
  return res + arr;
}, 3);

console.log(result);
//18

Happy Coding!!

Do like and comment…Thank You for reading!!

DEV Community: Pradhyumn Sharma

Image Carousel using JavaScript, HTML, CSS

Polyfill for map, filter and reduce in JavaScript

Hey there!!