Building an Awesome Carousel Reusable Component with React and Splide.js
Tags: javascript, react, tutorial, beginners
Published: 2022-11-07 07:18:12

# **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](https://nodejs.org/en/download/) v14 or later.

# Creating a new React.js Project

You can create a new react project with this command

```jsx
npm create vite@latest
```

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrps0h5edvthvxhgyos4.JPG)

Run these commands to complete your installation.

```jsx
cd <project name>
  npm install
  npm run dev
```

## Adding Tailwind CSS to React Project

### 1. Install Tailwind CSS

Install `tailwindcss`via `npm`

```jsx
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

### 2. **Add Tailwind to your PostCSS configuration**

Add `tailwindcss` and `autoprefixer`to your `postcss.config.js`file, or wherever PostCSS is configured in your project.

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

### 3. **Configure your template paths**

Add the paths to all of your template files in your `tailwind.config.js`file.

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

### 4. **Add the Tailwind directives to your CSS**

```jsx
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

```jsx
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](https://splidejs.com/guides/getting-started/), 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

```jsx
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

```jsx
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.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4el8th7n2e6t5bnfygp.gif)

# 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](https://splidejs.com/guides/getting-started/) to know more.

Here is the Link to this project on Github

[https://github.com/Meenah-gurl/react_caraousel_splide.git](https://github.com/Meenah-gurl/react_caraousel_splide.git)