DEV Community

codeek
codeek

Posted on

🚀How to Integrate Swiper.js in a React Project (Step-by-Step) for modern slider implementation

#react #frontend #frontendchallenge

🚀 How to Build a Responsive Carousel in React with Swiper.js

If you're building an e-commerce application, portfolio, blog, or dashboard, a responsive carousel can significantly improve the user experience. Swiper.js is one of the most popular libraries for creating modern, touch-enabled sliders in React applications.

📦 Step 1: Install Swiper 

npm install swiper
Enter fullscreen mode Exit fullscreen mode

Swiper React components are included within the main swiper package.

🎯 Step 2: Create a Basic Slider 

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

const ProductSlider = () => {
  return (
    <Swiper spaceBetween={20} slidesPerView={1}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

export default ProductSlider;
Enter fullscreen mode Exit fullscreen mode

This creates a simple responsive slider.

🧭 Step 3: Add Navigation & Pagination 

import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const ProductSlider = () => {
  return (
    <Swiper
      modules={[Navigation, Pagination]}
      navigation
      pagination={{ clickable: true }}
      spaceBetween={20}
      slidesPerView={1}
    >
      <SwiperSlide>Product 1</SwiperSlide>
      <SwiperSlide>Product 2</SwiperSlide>
      <SwiperSlide>Product 3</SwiperSlide>
    </Swiper>
  );
};

export default ProductSlider;
Enter fullscreen mode Exit fullscreen mode

Swiper provides several useful modules, including:

  • Navigation
  • Pagination
  • Autoplay
  • Scrollbar
  • Keyboard
  • Mousewheel
  • Effect Fade
  • Thumbs

▶️ Step 4: Enable Autoplay 

import { Navigation, Pagination, Autoplay } from "swiper/modules";

<Swiper
  modules={[Navigation, Pagination, Autoplay]}
  navigation
  pagination={{ clickable: true }}
  autoplay={{
    delay: 3000,
    disableOnInteraction: false,
  }}
>
Enter fullscreen mode Exit fullscreen mode

This is perfect for:

  • Hero banners
  • Featured products
  • Testimonials
  • Promotional sliders

📱 Step 5: Make It Responsive 

<Swiper
  breakpoints={{
    640: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 3,
    },
    1024: {
      slidesPerView: 4,
    },
  }}
>
Enter fullscreen mode Exit fullscreen mode

Your slider will automatically adjust based on screen size:

Screen Width Slides
Mobile 1
≥640px 2
≥768px 3
≥1024px 4

🛒 Real-World E-Commerce Example 

<Swiper
  modules={[Navigation, Pagination]}
  navigation
  pagination={{ clickable: true }}
  spaceBetween={20}
  breakpoints={{
    640: { slidesPerView: 2 },
    768: { slidesPerView: 3 },
    1024: { slidesPerView: 4 },
  }}
>
  {products.map((product) => (
    <SwiperSlide key={product.id}>
      <ProductCard product={product} />
    </SwiperSlide>
  ))}
</Swiper>
Enter fullscreen mode Exit fullscreen mode

💡 Perfect Use Cases

  • 🛍️ Featured Products
  • 🆕 New Arrivals
  • 🔥 Best Sellers
  • 💬 Testimonials
  • 🖼️ Product Galleries
  • 📚 Portfolio Projects
  • 📰 Blog Highlights

🎯 Conclusion

Swiper.js makes it incredibly easy to build beautiful, responsive, and touch-friendly carousels in React. With features like Navigation, Pagination, Autoplay, and Responsive Breakpoints, it's an excellent choice for modern React applications.

🎥 Prefer Video Tutorials?

If you'd like to see Swiper.js integrated into a complete modern React E-Commerce application, check out this tutorial from the Codeek E-Commerce Series.

📺 Swiper.js Integration in React E-Commerce App

https://www.youtube.com/watch?v=NWPLHEpaHGc&list=PL_02r0p8Ku_6tR8L-n-yj7MW8rrMtswwk&index=9

In this series, you'll learn:

  • ⚛️ React + Vite
  • 🛣️ React Router
  • 🐻 Zustand
  • 🔄 React Query
  • 🌐 Axios
  • 💳 Stripe Payments
  • 🎠 Swiper.js
  • 🚀 Deployment

Build a production-ready React e-commerce application from scratch while learning the tools used in modern frontend development.

#react #javascript #webdev #frontend #reactjs #swiper #css #vite #tutorial #beginners

Top comments (0)