React Slider - 3 - Smooth Transitions & Browser Resizing with React Hooks

In the final video of the React Slider series, we finish off by removing the need to cycle through intermediary slides, and adding the ability to adapt to browser resizing. We will add two more React Hooks, and add two more listeners in the useEffect function that we implemented during the autoplay phase of the series.

We also get super fancy, and decide to only display three slides at a time, instead of rendering all of the slides received as props. This allows our components prevSlide and nextSlide functions to be refactored into 3 line functions with no confusing logic needed.

Only displaying three slides at a time in our React Image Slider makes it way easier to calculate the new translate value, and makes handling browser resizes incredibly easy.

At the end of this series I hope that useState, useEffect, and useRef hooks are more approachable for you.

Links
--------
Repository:
https://github.com/DZuz14/react-hooks-image-slider

React Hooks Documentation:
https://reactjs.org/docs/hooks-intro.html

Emotion CSS in JS:
https://emotion.sh/docs/introduction

Prettier Code Formatter:
https://prettier.io/

Medium Article:
https://medium.com/@ItsMeDannyZ/react-hooks-slider-how-to-build-an-image-slider-with-smooth-transitions-automatic-resizing-8a99859ac471

Follow Me:
https://github.com/DZuz14
https://twitter.com/ItsMeDannyZ