Create Animated card slider with Tailwind CSS and Swiper | React.js

Introduction

In this tutorial, you will learn how to create an animated interactive card slider using React, Vite, Tailwind CSS, and the Swiper library. This project serves as an excellent way to enhance your web development skills by combining modern technologies to build a visually appealing component.

Step 1: Set Up Your Development Environment

1. Install Vite:

   • Open your terminal and run the following command to create a new Vite project:

     npm create vite@latest my-card-slider --template react
     

   • Navigate to the project directory:

     cd my-card-slider
     

2. Install Dependencies:

   • Install Tailwind CSS and Swiper. Run the following commands:

     npm install tailwindcss postcss autoprefixer
     npm install swiper
     

3. Configure Tailwind CSS:

   • Create a configuration file for Tailwind:

     npx tailwindcss init -p
     

   • Add the paths to your template files in tailwind.config.js:

     module.exports = {
       content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
       theme: {
         extend: {},
       },
       plugins: [],
     }
     

4. Add Tailwind Directives:

   • Open src/index.css and add the following lines:

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

Step 2: Create the Card Slider Component

1. Create a New Component:

   • In the src folder, create a new file named CardSlider.js.

2. Import Swiper and Required Styles:

   • At the top of CardSlider.js, add the following imports:

     import { Swiper, SwiperSlide } from 'swiper/react';
     import 'swiper/swiper-bundle.css';
     

3. Define the CardSlider Component:

   • Create a functional component and use the Swiper component to set up your slider:

     const CardSlider = () => {
       return (
         <Swiper
           spaceBetween={30}
           slidesPerView={3}
           pagination={{ clickable: true }}
           navigation
         >
           <SwiperSlide>Card 1</SwiperSlide>
           <SwiperSlide>Card 2</SwiperSlide>
           <SwiperSlide>Card 3</SwiperSlide>
           {/* Add more slides as needed */}
         </Swiper>
       );
     };
     

4. Export the Component:

   • Don’t forget to export the component at the end of the file:

     export default CardSlider;
     

Step 3: Integrate the CardSlider into Your App

1. Modify the App Component:

   • Open src/App.js and import the CardSlider component:

     import CardSlider from './CardSlider';
     

2. Use the CardSlider Component:

   • Replace the default content in the App component’s return statement with <CardSlider />:

     function App() {
       return (
         <div className="App">
           <CardSlider />
         </div>
       );
     }
     

Step 4: Style Your Cards with Tailwind CSS

1. Add Tailwind Classes:

   • Inside each SwiperSlide, use Tailwind classes to style your cards. For example:

     <SwiperSlide className="bg-white border rounded-lg shadow-md p-4">
       <h3 className="text-lg font-bold">Card Title</h3>
       <p>Card description goes here.</p>
     </SwiperSlide>
     

2. Customize the Styles:

   • Adjust colors, padding, and other styles as needed to fit your design.

Conclusion

You have successfully created an animated card slider using React, Vite, Tailwind CSS, and the Swiper library. This component can be enhanced further by adding images, animations, or additional functionality. Explore the Swiper documentation to discover more features and customize your slider to fit your project's needs. Happy coding!