The Ultimate JavaScript Image Carousel — Phase 1

Fully responsive; Mobile and Desktop; Button, Wheel, Touch navigation.

This is Phase One of a Two-phase project where we build a fully responsive image carousel for mobile and desktop.

We’ll start by putting all of our elements on screen.

We have 7 elements to work with:
1. a button for moving right (BUTTON)
2. a button for moving left (BUTTON)
3. a view port (DIV)
4. an images container (DIV)
5. a “card” which we’ll use to hold the image (DIV)
6. the actual image (IMG)
7. a touch area that we’ll use to determine whether or not the user is allowed to scroll the carousel (DIV)

We’ll use a combination of absolute positions and transforms.

We write a simple function that determines the middle card of our deck and moves the cards to the left of that middle to the left and the cards to the right of that middle to the right.

Let’s discuss RESPONSIVE.

To make our carousel responsive, we need to resize our view port based on percentages and not hard pixel units.

So we’ll just pick 50% and calculate a hard pixel count based on the width of the user’s browser window; then we’ll run this code in a resize window event listener.

window.addEventListener(‘resize’, () => {
img_width_as_percentage = 50;
new_width =
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent) ?
(img_width_as_percentage / 100) * screen.width :
(img_width_as_percentage / 100) * window.innerWidth;
view_port.style.width = `${new_width}px`;
});

We have our elements laid out and ready to go.

You can get the source files here.

In the next phase, we’ll start moving this thing with touch, button, and wheel navigation.

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store