The Ultimate JavaScript Image Carousel | Phase 1
Tags: javascript, ux, webdev
Published: 2020-12-03 00:25:45

### <center>JavaScript Image Carousel - Laying down the foundation.</center>

------------

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

### <center>Phase Two is coming soon.</center>

------------

#### <center>Browse our [Teachable](http://anobject.teachable.com "Teachable") courses.</center>

------------

![Ultimate JavaScript Image Carousel](https://user-images.githubusercontent.com/58220766/100942308-1debde00-34c9-11eb-98b0-6b771de5e40d.png)

### 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)

![elements on screen no css](https://user-images.githubusercontent.com/58220766/100942867-1bd64f00-34ca-11eb-8520-a24fc079e639.png)

#### Now we need to center everything on screen.

We'll use a combination of **absolute positions** and **transforms**.
![elements on screen centered](https://user-images.githubusercontent.com/58220766/100943396-28a77280-34cb-11eb-8be5-85c492280b7e.png)

#### Now that everything is centered, we need to order the cards from left to right.

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.
![elements on screen ordered](https://user-images.githubusercontent.com/58220766/100943700-baaf7b00-34cb-11eb-8f2d-0e0cd53292fc.png)

------------

### 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`;
});
```

##### Now that we have our **resize** code, every time we resize the browser window, our carousel resizes.
![elements on screen responsive](https://user-images.githubusercontent.com/58220766/100944400-3a8a1500-34cd-11eb-9684-a4c34cd7337d.png)

------------

### We have our elements laid out and ready to go.
You can get the source files [here](https://gist.github.com/an-object-is-a/ef386e59562323134c48c17758e52a96 "here")

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

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>The Ultimate JavaScript Image Carousel/Slider (3 types of navigation; Fully responsive) | Phase 1</center>

{% youtube wqfptgArbQg %}