React Scroll Carousel Guide

Back story: I wrote this article back in 2023 but hesitated for so long to share it. But here it is—my supposed first tech article!

Introduction

Hi everyone! This is my first tech article, and I wrote it with you in mind because it took me several days to figure this out.

There are many carousel sliders for images, but I needed an infinite-scroll slider for my project. However, this time, I wasn’t working with images but divs, showcasing products it offers to clients.

Let’s dive in!

What is a Scroll Carousel in React?

A carousel is a slideshow component that cycles through elements—images or text—like a traditional carousel.

A scroll carousel in React is a unique content slider that works based on window scroll events.

Features of Scroll Carousel React:

Mobile-Friendly: Designed for and utilized in mobile web apps and websites.
Autoplay Support: The carousel can scroll automatically and supports autoplay.
Library Agnostic: It is lightweight and does not require jQuery or other libraries.
Responsive: It is responsive by default and adapts to different screen sizes.
TypeScript Support: It is fully typed for a better development experience

Installation Methods

The installation method depends on your preferred approach as a developer. You can:
- Download the CSS and JavaScript files manually.
- Use a CDN (Content Delivery Network) to load the necessary files.
- Install via npm (Node Package Manager -a library and registry for JavaScript software packages) for easy package management.
  
  Using npm (Recommended)
  
  I used npm for my project and installed scroll-carousel-react as follows:

    npm install scroll-carousel-react

How to Use Scroll Carousel React

Step 1: Install and Import

After setting up my IDE, I installed the package and imported it:

import React from 'react';
import ScrollCarousel from 'scroll-carousel-react';

Step 2: Create an Array of Divs

Since I wasn’t using images, I created an array of div elements:

const CarouselItems = [
  (<div className='my-slide'>
    <div className='border-2 border-blue-600 rounded-xl m-4 px-8 pt-8 w-full h-[230px]'>
      <div className='text-blue-600'>
        <a href="https://my.cowrywise.com/signup">
          <p className='font-bold text-2xl'>“</p>
          <h4 className='text-xl font-semibold'>Automate and build my savings</h4>
        </a>
      </div>
    </div>
  </div>),

  (<div className='my-slide'>
    <div className='border-2 border-blue-600 rounded-xl m-4 px-8 pt-8 w-full h-[230px]'>
      <div className='text-blue-600'>
        <a href="https://my.cowrywise.com/signup">
          <p className='font-bold text-2xl'>“</p>
          <h4 className='text-xl font-semibold'>Diversified long-term investing</h4>
        </a>
      </div>
    </div>
  </div>),

  // Add more slides as needed
];

Step 3: Implement the Scroll Carousel

To use the carousel, I followed the official documentation and implemented the component, and mapped the array:

<ScrollCarousel autoplay autoplaySpeed={8} speed={8} onReady={() => console.log('Carousel Ready')}>
  {CarouselItems.map((item) => (
    <div key={Number}>{item}</div>
  ))}
</ScrollCarousel>

Full Code Implementation

import React from 'react';
import ScrollCarousel from 'scroll-carousel-react';

const QuoteSection = () => {
  const CarouselItems = [
    (<div className='my-slide'>
      <div className='border-2 border-blue-600 rounded-xl m-4 px-8 pt-8 w-full h-[230px]'>
        <div className='text-blue-600'>
          <a href="https://my.cowrywise.com/signup">
            <p className='font-bold text-2xl'>“</p>
            <h4 className='text-xl font-semibold'>Automate and build my savings</h4>
          </a>
        </div>
      </div>
    </div>),

    (<div className='my-slide'>
      <div className='border-2 border-blue-600 rounded-xl m-4 px-8 pt-8 w-full h-[230px]'>
        <div className='text-blue-600'>
          <a href="https://my.cowrywise.com/signup">
            <p className='font-bold text-2xl'>“</p>
            <h4 className='text-xl font-semibold'>Diversified long-term investing</h4>
          </a>
        </div>
      </div>
    </div>),
  ];

  return (
    <div className='container'>
      <div className='mx-8 my-24 flex flex-col w-[50%]'>
        <h2 className='font-semibold text-7xl text-blue-900'>You name it, we’ve figured it out.</h2>
      </div>
      <ScrollCarousel autoplay autoplaySpeed={8} speed={8} onReady={() => console.log('Carousel Ready')}>
        {CarouselItems.map((item) => (
          <div key={Number}>{item}</div>
        ))}
      </ScrollCarousel>
    </div>
  );
};

export default QuoteSection;

You can have a sneak peek at the outcome here

That's the end of my tutorial! I hope you found it helpful. If you liked this article and gained value from it, please like and share it. I’d also love to receive your constructive feedback!

Cheers! 🚀

How To Use Scroll Carousel React