Simplest way to add Slider in React

If you’re a beginner in the world of React and want to spice up your web application with a sleek image slider, you’re in the right place. In this guide, we’ll walk through the process of adding a slider to your React project using the Swiper package, and we’ll style it effortlessly with Tailwind CSS. To make things even smoother, we’ll be working with Vite, a fast and opinionated build tool.

What is Swiper?

Swiper is a powerful and easy-to-use touch slider library for web and mobile applications. It provides a range of customization options and supports touch gestures, making it an ideal choice for creating responsive and interactive sliders.

Prerequisites

Before we dive in, make sure you have Node.js installed on your machine. You can download it here.

Setting up Vite

Let’s start by creating a new React project using Vite. Open your terminal and run the following commands:

npx create-vite my-slider-app --template react
cd my-slider-app

Now, let’s install the required dependencies:

npm install swiper
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring Tailwind CSS

Vite makes it simple to configure Tailwind CSS. Create a tailwind.config.js file in the project root with the following content:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, In the src folder and in index.css add the following code for tailwind css

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom styles go here */

Setting up Swiper

Let’s create a simple React component to showcase the Swiper slider. Create a component directory and make a new file Slider.jsx and add following content:

// src/components/Slider.jsx
import React from 'react';
import { Autoplay, A11y} from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/controller';

const Slider = () => {

    const images = ['https://images.pexels.com/photos/16770561/pexels-photo-16770561/free-photo-of-scenic-view-of-green-hills-and-mountains.jpeg', 'https://images.pexels.com/photos/20041507/pexels-photo-20041507/free-photo-of-close-up-of-sleeping-cat.jpeg', 'https://images.pexels.com/photos/12187128/pexels-photo-12187128.jpeg', 'https://images.pexels.com/photos/11785594/pexels-photo-11785594.jpeg']

    return (
        <section className='bg-white mt-10 mx-4 sm:mx-8 md:mx-20 lg:mx-36 z-10'>
            <div className='text-center font-extrabold text-2xl my-8'>Your own Slider</div>
            <Swiper
                modules={[Autoplay, A11y]}
                spaceBetween={30} // Adjust the spacing as needed
                slidesPerView={1} // Show only one slide by default
                autoplay
            >
                {images.map((img, index) => (
                    <SwiperSlide key={index}>
                        <a href='/#'>
                            <img
                                src={img}
                                alt={`slide-${index + 1}`}
                                className='w-fit h-[500px] mx-auto select-none'
                            />
                        </a>
                    </SwiperSlide>
                ))}
            </Swiper>
        </section>
    );
};

export default Slider;

Now, integrate the Slider component into your App.jsx:

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

const App = () => {
  return (
    <>
      <div>
        <Slider />
      </div>
    </>
  )
}

export default App

Here, we are using the Swiper component and SwiperSlide component from the Swiper package to create a basic slider. Feel free to replace the image URLs with your own content.

Running your Slider App

Now that everything is set up, run your development server:

npm run dev

Visit http://localhost:5173 in your browser, and voila! You should see a beautiful slider in action.

Preview

This image shows the final product we made in this blog

Congratulations! You’ve successfully added a slider to your React project using the Swiper package and styled it with Tailwind CSS. This combination of powerful tools allows you to create dynamic and visually appealing sliders effortlessly.

Feel free to check out the Swiper documentation for more ways to customize your slider and add cool features. You can change how the slider works, add more pictures, and let your imagination run wild to make your website more interesting for users. If you want to see some examples of different sliders in action, take a look at the demos on the Swiper website. They’ll give you a great idea of what you can do with your slider!

Now that you’ve mastered the art of integrating a slider in React with Tailwind CSS using Vite, you’re well on your way to building more dynamic and responsive web applications. Happy coding!