The Ultimate ReactJS Image Slider | Phase 2
Tags: programming, react, webdev
Published: 2020-12-30 15:34:17

### <center>ReactJS 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-reactjs-image-slider-phase-1-4650 "here").</center>

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

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

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

![Ultimate ReactJS Image Carousel](https://user-images.githubusercontent.com/58220766/102025118-cd477100-3d63-11eb-8bcb-e1fbce4e995e.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 < this.images.children.length; i++) {
    this.updated_position = this.last_positions[i] + difference;
    this.images.children[i].style.left = `${this.updated_position}px`;
    this.last_positions[i] = this.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;
let difference = current_touch_position - this.start_touch_position;

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

![reactjs-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;

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

![reactjs-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;

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

![reactjs-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 images **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 ReactJS 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/reactjs-ult-slider-phase2 "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 ReactJS (RESPONSIVE; 3 types of navigation) | Phase 2</center>

{% youtube BkhOFuuLtLM %}