The Ultimate ReactJS Image Slider | Phase 2

ReactJS Image Carousel - Making this thing move.

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

Phase One can be found here.

Browse our Teachable courses.

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;

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;

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;

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.

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.

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

How to Create The ULTIMATE Image Slider in ReactJS (RESPONSIVE; 3 types of navigation) | Phase 2