Responsive, Auto-Play & Manual Navigation

We’re going to build a JavaScript image slider that has an auto-play function as well as manual navigation buttons.

We won’t be using any external libraries; all native HTML, CSS, and JS.

Browse our Teachable courses.

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

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

We have 6 elements to work with:

• In the Deck.js
  1. an img that we’ll use as a button for moving right (IMG)
  2. an img that we’ll use as a button for moving left (IMG)
  3. a view port (DIV)
  4. an images container (DIV)
  5. a DIV to hold our “radio” buttons (DIV)
• In the Card.js
  6. a “card” which we’ll use to hold the image (DIV)
  7. the actual image (IMG)

Responsive, Auto-play, Manual Navigation Buttons

We’re going to build a ReactJS image slider that has an auto-play function as well as manual navigation buttons.

We won’t be using any external libraries; all native JSX, CSS, JavaScript.

Browse our Teachable courses.

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

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

We have 6 elements to work with:

• In the Deck.js
  1. an img that we’ll use as a button for moving right (IMG)
  2. an img that we’ll use as a button for moving left (IMG)
  3. a view port (DIV)
  4. an images container (DIV)
  5. a DIV to hold our “radio” buttons (DIV)
• In the **Card.js**
  6. a “card” which we’ll use to hold the image (DIV)
  7. the actual image (IMG)

Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.

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. …

The final Phase of our Cyberpunk 2077-inspired React-Chrome Extension

This is Phase Six of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Expert Web Developer?

Understand how ReactJS-Chrome Extensions work:

Like any Chrome Extension, we need to inject the foreground page into the User’s browser.

We, of course, inject from our Background.js script.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 if (changeInfo.status === ‘complete’ && tab.url.includes(‘http’)) {
 active_tabId = tabId;chrome.tabs.executeScript(tabId, { file: ‘./inject_script.js’ }, function () {
 chrome.tabs.executeScript(tabId, { file: ‘./foreground.bundle.js’ }, function () {
 console.log(“INJECTED AND EXECUTED”);
 });
 });
 }
});chrome.tabs.onActivated.addListener(activeInfo => {
 chrome.tabs.get(activeInfo.tabId, function (tab) {
 if (tab.url.includes(‘http’)) active_tabId = activeInfo.tabId;
 });
});

Now that we’ve done that, let create GET and SET state functions for our entire App.

Staying in our Background.js file, we’ll create those two functions…

function get_state() {
 return new Promise((resolve, reject) => {
 chrome.storage.local.get(‘chrome-ext-Spotify-controller’, item => {
 if (chrome.runtime.lastError) {
 reject(‘fail’);
 } else {
 const state = item[‘chrome-ext-Spotify-controller’] ? …

Fully responsive; Mobile & Desktop; Button, Wheel, & Touch navigation.

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 < 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. …

Phase 5 of Cyberpunk 2077-inspired React-Chrome Extension

This is Phase Five of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Expert Web Developer?

Understand how ReactJS-Chrome Extensions work:

Let’s start by registering with the Spotify developer console.

Spotify Developer Console.

The authorization flow we’ll be using is called AUTH FLOW WITH PKCE.

Documentation on that flow.

We want to be able to refresh our token, so we’ll be using the Authorization Code Flow with Proof Key.

There are three steps to this flow:

1. get an authorization code
2. get an access token using the authorization code
3. when our access token expires, refresh the token

We’ll follow the instructions for getting an authorization code and construct the proper URI to request.

We’ll handle all of this logic in the background.js of our extension.

Here, we’re creating variables to hold all of the parameters for the request URL. …

Fully responsive; Mobile and Desktop; Button, Wheel, & Touch navigation.

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

Phase Two is coming soon.

Browse our Teachable courses.

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)

Phase 4 of Cyberpunk 2077-inspired React-Chrome Extension

This is Phase Four of a multi-phase project where we build a Spotify Chrome Extension powered by ReactJS that allows us to control the user’s Spotify session.

Phase One can be found here.

This series of tutorials supposes that you…

Understand how Google Chrome Extensions work:

Need an in-depth course? Try our Teachable:

We have a course for completely-new-to-web-dev’ers
as well as for experienced web dev’s who want a more curated experience.

Expert Web Developer?

Understand how ReactJS-Chrome Extensions work:

Right off the bat, we need to install another package to help us with transitions.

>> npm install — save react-transition-group

We have two components that use this new package the Player and OptionsPage components.

We’ll start with the open_close button for our ‘Player’.

CSSTransition works by wrapping an HTML element in a DIV element.

This wrapper DIV then has CSS classes added and removed from it.

Those CSS classes have pre-defined names (defined by React Transition Group).

You, however, define the animations.

Those class names are:

• .chrome-ext-flip-appear
• .chrome-ext-flip-appear-active
• .chrome-ext-flip-appear-done
• .chrome-ext-flip-enter
• .chrome-ext-flip-enter-active
• .chrome-ext-flip-enter-done
• .chrome-ext-flip-exit
• .chrome-ext-flip-exit-active
• .chrome-ext-flip-exit-done

The basic breakdown is this:

• there are three total states: appear, enter, and…