JavaScript Image Carousel | Phase 2
Tags: programming, javascript, webdev
Published: 2020-12-17 15:03:35

### <center>JavaScript Image Carousel - Making this thing move.</center>

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

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

### <center>Phase One can be found [here](https://dev.to/anobjectisa/the-ultimate-javascript-image-carousel-phase-1-1l90 "here").</center>

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

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

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

![Ultimate JavaScript Image Carousel](https://user-images.githubusercontent.com/58220766/102022736-bbab9c80-3d56-11eb-9128-cda46c08cb56.png)

### We have 4 large tasks on-hand.

1. TOUCH navigation
2. BUTTON navigation
3. WHEEL navigation
4. Snap-back functionality

#### The basis for ALL navigation is this piece of code here:

```
for (let i = 0; i < images.children.length; i++) {
    updated_position = last_positions[i] + difference;
    images.children[i].style.left = `${updated_position}px`;
    last_positions[i] = updated_position;
}
```

##### What it says is this:
Take the current position of all of the images--where are they on the X-axis?; add some **difference** which will move them to a new position.

We have a **last_positions** array to keep track of where our images are on screen.

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

### Let's code up the TOUCH navigation.

We're concerned with **three** touch event listeners.

1. **'touchstart'**
    When the user first touches the carousel, we record the X-coordinate in a variable.
2. **'touchmove'**
    When the user moves their finger across this carousel, we calculate the **difference** between the current X-coordinate and the recorded X-coordinate in step 1.
3. **'touchend'**
    When the user releases their finger from the carousel, we call a function to re-align our carousel, or **SNAP**, our carousel back to an active card.

So the **difference** in this case would be:

```
const current_touch_position = event.changedTouches[0].screenX;
difference = current_touch_position - start_touch_position;
```

![js-ult-slider-touch-nav](https://user-images.githubusercontent.com/58220766/102023653-0fb88000-3d5b-11eb-97b7-5bf5baa0a95f.gif)

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

### Let's code up the BUTTON navigation.

Very simple.

We move the images left or right **one whole card width**.
This makes our **difference** simply equal to the width of one card.

```
...
difference = new_width;

updated_position = last_positions[i] + difference;
images.children[i].style.transitionDuration = '0.5s';
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
```

![js-ult-slider-button-nav](https://user-images.githubusercontent.com/58220766/102023883-5eb2e500-3d5c-11eb-893b-30eb9c5ea15b.gif)

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

### Let's code up the WHEEL navigation.

Again, very simple.

The **deltaY** of our **mouse wheel** gives us the "distance" (really change in Y-coordinate) the user has scrolled.

This makes our **difference** simply equal to how far the user is scrolling up or down.

```
...
difference = event.deltaY;

updated_position = last_positions[i] - difference;
images.children[i].style.left = `${updated_position}px`;
last_positions[i] = updated_position;
```

![js-ult-slider-wheel-nav](https://user-images.githubusercontent.com/58220766/102023968-fe707300-3d5c-11eb-9bad-37cd4eeaabea.gif)

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

### The SNAP-BACK function is a bit complicated.

The thinking behind it is this:

Our **snapping point** is the left boundary of our view-port.

![snapping-point](https://user-images.githubusercontent.com/58220766/102024421-0251c480-3d60-11eb-9b53-4c6d85a35caa.png)

Whichever image's **x-value** is closest to that point, becomes our **active image**.

We calculate the pixels needs to move our **active image** to that point and move **all images** by that amount.

As a result, our carousel is re-centered.

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

### There are much finer points to finishing this Ultimate JavaScript Image Slider.

View the video tutorial below for a much more detailed instruction.

You can get the source files [here](https://github.com/an-object-is-a/javascript-ult-slider "here").

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

#### <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>How to Create The ULTIMATE Image Slider in JavaScript (RESPONSIVE; 3 types of navigation) | Phase 2</center>

{% youtube BcGYpqS6RUA %}