Building an Image Slider with Smooth Scrolling using React

#react #webdev #javascript #css

Hey there, fellow developers! I'm super excited to share my recent experience of building an awesome Image Slider from scratch. In this article, I'll walk you through the step-by-step process of creating the slider with smooth scrolling. So, let's get started! 😃

The image slider component we'll be working on consists of a container to hold the images and navigation buttons to smoothly scroll left and right through the images.

First things first, let's create the necessary state and set up a reference to the slider using the following code snippet:

   // We use the useRef hook to get a reference to the slider container
  const sliderRef = useRef(null);
  const scrollAmount = 100; // The amount to scroll when clicking the navigation buttons
  const [images, setImages] = useState([
    // Here, you can add your own image objects with their respective URLs
    // For this example, we'll use some cool images from Unsplash
  ]);

Next up, it's time to build the slider component itself. Check out the code below:

<div className="App">
    {/* Left navigation button */}
      <button
        className="nav-btn"
        onClick={() => {
          const container = sliderRef.current;
          container.scrollLeft -= scrollAmount; // Scroll left by the specified amount
        }}
      >
        <ChevronLeftIcon />
      </button>
    {/* Image container */}
      <div className="images-container" ref={sliderRef}>
        {images.map((image) => {
          return (
            <img
              className="image"
              alt="sliderImage"
              key={image?.id}
              src={image?.url}
            />
          );
        })}
      </div>
    {/* Right navigation button */}
      <button
        className="nav-btn"
        onClick={() => {
          const container = sliderRef.current;
          container.scrollLeft += scrollAmount; // Scroll right by the specified amount
        }}
      >
        <ChevronRightIcon />
      </button>
   </div>

Lastly, to give it that smooth scrolling look and feel, let's add some styling:

.App {
  font-family: sans-serif;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 150px;
}

.images-container {
  display: flex;
  max-width: 500px;
  overflow: scroll;
  /* Add the following lines for smooth scrolling */
  scroll-behavior: smooth;
  transition: scroll 0.3s ease-in-out;
}

.image {
  width: 200px;
  height: 200px;
  margin: 5px;
  border-radius: 8px;
}

.nav-btn {
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  background-color: #c3c3c3;
  border-radius: 6px;
  height: 200px;
  width: 30px;
  margin: 5px;
}