Building an Awesome Carousel Reusable Component with React and Splide.js

Introduction

Carousel, widely known as sliders, galleries, and slideshows, helps developers display text, graphics, images, and even video in one interactive, “sliding” block. They're a great design option for grouping content and ideas together allowing you to form visual relationships between specific pieces of content.

Components in ReactJS are basically reusable and independent bits of code that render the HTML and data passed to it.

React has two component sides, the Function component, and the Class component.

Splide.js is lightweight, flexible, and accessible, it is a library that aids in building sliders however you want to design your slides without writing any CSS styles or codes.

In this tutorial, you will be learning how to build splide.js reusable carousel components for react.

Prerequisite

Before you start learning, ensure you have the requirement below.

• Node v14 or later.

Creating a new React.js Project

You can create a new react project with this command

npm create vite@latest

While the above command is running, remember to select react and javascript as shown below

Run these commands to complete your installation.

cd <project name>
  npm install
  npm run dev

Adding Tailwind CSS to React Project

1. Install Tailwind CSS

Install tailwindcssvia npm

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Add Tailwind to your PostCSS configuration

Add tailwindcss and autoprefixerto your postcss.config.jsfile, or wherever PostCSS is configured in your project.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. Configure your template paths

Add the paths to all of your template files in your tailwind.config.jsfile.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add the Tailwind directives to your CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

You can now start your project to test the installation process.

npm run dev

Integrating Splide.js for this Project

The following steps below are the process we will be needing to carry out our awesome carousel with Splide Library.

Installing Splide.js

Splide.js has integration for vue, react, and svelte, but for this tutorial, you will install for react.

Run the command below

$ npm install @splidejs/react-splid

Add Auto scroll Extension

$ npm install @splidejs/splide-extension-auto-scroll

Visit Splide Documentation, to learn more.

Restart your Project

npm run dev

Creating a Component

Create a component inside your src folder and call component inside our component folder we create a file and call it Slider.jsx and paste the following code snippets

import React from 'react'
import { Splide, SplideSlide } from '@splidejs/react-splide'
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll'
import "@splidejs/splide/dist/css/splide.min.css";

  export  function Slider({imageUrl}){
    return (
        <Splide options={{
            type: 'loop',
            rewind:true, 
            autoplay: true,
            perMove: 1,
            perPage: 2, 
            gap: '2rem',
            arrows: false,
            pagination: false,
            autoScroll: {
                pauseOnHover: true,
                pauseOnFocus: false,
                speed: 2
            },
         }}
        extensions={{ AutoScroll }}> 
        <SplideSlide>
            <img src={imageUrl}/>
        </SplideSlide>
       </Splide>

    )
  }
  export default Slider

As seen above we imported Splide, SplideSlide, and AutoScroll from our Splide.js

On our App.jsx we are to paste these code snippets as well, if you noticed we imported our Slider.jsx component into this file

import React from 'react'
import Slider from './components/Slider';

export function App  ()  {
  return (
    <div className='max-w-2xl mx-auto py-10 flex justify-center items-center'>
      <div className=" bg-purple-600  rounded-lg py-10">
          <Slider 
              imageUrl="/src/assets/nature1.jpg " 
          />
      </div>
    </div>
  )
}

export default App

Output

We finally made it to the end, here is how our output looks like.

Conclusion

Now you have learnt how to integrate Splide.js into your project and how to use it. Try it again on a different project.

Go and explore Splide.js to know more.

Here is the Link to this project on Github

https://github.com/Meenah-gurl/react_caraousel_splide.git