The Ultimate ReactJS Image Slider | Phase 1
Tags: programming, javascript, react, ux
Published: 2020-12-10 15:30:55

### <center>ReactJS Image Slider - Laying down the foundation.</center>

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

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

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

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

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

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

![Ultimate ReactJS Image Carousel](https://user-images.githubusercontent.com/58220766/101554408-94cf1e00-3984-11eb-8cf5-3e7e60ac88fc.png)

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

We need two components: **Deck.js** and **Card.js**

We have 7 elements to work with:
- In the **Deck.js**
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 **touch area** that we'll use to determine whether or not the user is allowed to scroll the carousel (DIV)
- In the **Card.js**
6. a **"card"** which we'll use to hold the image (DIV)
7. the actual **image** (IMG)

![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;
    // img_width_as_percentage = window.innerWidth < 768 ? 100 : img_width_as_percentage;

    this.new_width =
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ?
            (img_width_as_percentage / 100) * window.screen.width :
            (img_width_as_percentage / 100) * window.innerWidth;

    this.view_port.style.width = `${this.new_width}px`;

    this.order_cards();
});
```

##### 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://github.com/an-object-is-a/reactjs-ult-slider-phase1 "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>How to Create The ULTIMATE Image Slider in ReactJS | Phase 1</center>

{% youtube 4ayMQEJgTLA %}