DEV Community

Joseph Nelson
Joseph Nelson

Posted on

Building Touch Sliders with react-id-swiper in React

#react #swiper #webdev #tutorial

react-id-swiper is a React wrapper for Swiper.js, a powerful touch slider library. It provides a React-friendly API for creating touch-enabled sliders, carousels, and galleries with touch gestures, navigation controls, and extensive customization options. This guide walks through setting up and creating touch sliders using react-id-swiper with React, from installation to a working implementation. This is part 59 of a series on using react-id-swiper with React.

Demo animation

Prerequisites

Before you begin, make sure you have:

  • Node.js version 14.0 or higher installed
  • npm, yarn, or pnpm package manager
  • A React project (version 16.8 or higher) or create-react-app setup
  • Basic knowledge of React hooks (useState, useEffect, useRef)
  • Familiarity with JavaScript/TypeScript
  • Understanding of touch events

Installation

Install react-id-swiper and Swiper dependencies:

npm install react-id-swiper swiper
Enter fullscreen mode Exit fullscreen mode

Or with yarn:

yarn add react-id-swiper swiper
Enter fullscreen mode Exit fullscreen mode

Or with pnpm:

pnpm add react-id-swiper swiper
Enter fullscreen mode Exit fullscreen mode

After installation, your package.json should include:

{
  "dependencies": {
    "react-id-swiper": "^3.0.0",
    "swiper": "^8.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Project Setup

Import Swiper CSS in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

First Example / Basic Usage

Let's create a simple image slider. Create a new file src/SwiperExample.jsx:

// src/SwiperExample.jsx
import React from 'react';
import SwiperCore, { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'react-id-swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

SwiperCore.use([Navigation, Pagination]);

function SwiperExample() {
  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  const params = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    spaceBetween: 30
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Swiper Example</h2>
      <Swiper {...params}>
        {images.map((image, index) => (
          <SwiperSlide key={index}>
            <img
              src={image}
              alt={`Slide ${index + 1}`}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default SwiperExample;
Enter fullscreen mode Exit fullscreen mode

Update your App.jsx:

// src/App.jsx
import React from 'react';
import SwiperExample from './SwiperExample';
import './App.css';

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

export default App;
Enter fullscreen mode Exit fullscreen mode

This creates a basic touch-enabled slider with navigation and pagination.

Understanding the Basics

react-id-swiper provides React components for Swiper:

  • Swiper: Main slider container component
  • SwiperSlide: Individual slide component
  • SwiperCore: Core Swiper functionality
  • Modules: Navigation, Pagination, Autoplay, etc.
  • Configuration: Extensive configuration options via params

Key concepts:

  • Modules: Import and use Swiper modules (Navigation, Pagination, etc.)
  • Params object: Configure slider behavior through params
  • Touch gestures: Built-in swipe/touch support
  • Responsive: Automatic responsive behavior
  • Customization: Extensive styling and behavior options

Here's an example with autoplay and custom styling:

// src/AdvancedSwiperExample.jsx
import React from 'react';
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'react-id-swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

SwiperCore.use([Navigation, Pagination, Autoplay]);

function AdvancedSwiperExample() {
  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  const params = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      dynamicBullets: true
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    },
    loop: true,
    spaceBetween: 30,
    slidesPerView: 1,
    breakpoints: {
      640: {
        slidesPerView: 1,
        spaceBetween: 20
      },
      768: {
        slidesPerView: 2,
        spaceBetween: 30
      },
      1024: {
        slidesPerView: 3,
        spaceBetween: 40
      }
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Advanced Swiper with Autoplay</h2>
      <Swiper {...params}>
        {images.map((image, index) => (
          <SwiperSlide key={index}>
            <div style={{
              height: '300px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: '#f8f9fa',
              borderRadius: '8px',
              overflow: 'hidden'
            }}>
              <img
                src={image}
                alt={`Slide ${index + 1}`}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default AdvancedSwiperExample;
Enter fullscreen mode Exit fullscreen mode

Practical Example / Building Something Real

Let's build a comprehensive image gallery with thumbnails:

// src/ImageGallerySwiper.jsx
import React, { useState } from 'react';
import SwiperCore, { Navigation, Thumbs } from 'swiper';
import { Swiper, SwiperSlide } from 'react-id-swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';

SwiperCore.use([Navigation, Thumbs]);

function ImageGallerySwiper() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  const images = [
    {
      full: 'https://via.placeholder.com/800x500/007bff/ffffff?text=Image+1',
      thumb: 'https://via.placeholder.com/150x100/007bff/ffffff?text=1'
    },
    {
      full: 'https://via.placeholder.com/800x500/28a745/ffffff?text=Image+2',
      thumb: 'https://via.placeholder.com/150x100/28a745/ffffff?text=2'
    },
    {
      full: 'https://via.placeholder.com/800x500/ffc107/000000?text=Image+3',
      thumb: 'https://via.placeholder.com/150x100/ffc107/000000?text=3'
    },
    {
      full: 'https://via.placeholder.com/800x500/dc3545/ffffff?text=Image+4',
      thumb: 'https://via.placeholder.com/150x100/dc3545/ffffff?text=4'
    },
    {
      full: 'https://via.placeholder.com/800x500/6c757d/ffffff?text=Image+5',
      thumb: 'https://via.placeholder.com/150x100/6c757d/ffffff?text=5'
    }
  ];

  const mainParams = {
    spaceBetween: 10,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    thumbs: {
      swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
    }
  };

  const thumbsParams = {
    spaceBetween: 10,
    slidesPerView: 4,
    freeMode: true,
    watchSlidesProgress: true,
    onSwiper: setThumbsSwiper
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h1>Image Gallery with Thumbnails</h1>
      <div style={{ marginBottom: '20px' }}>
        <Swiper {...mainParams}>
          {images.map((image, index) => (
            <SwiperSlide key={index}>
              <img
                src={image.full}
                alt={`Image ${index + 1}`}
                style={{
                  width: '100%',
                  height: '500px',
                  objectFit: 'cover',
                  borderRadius: '8px'
                }}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <Swiper {...thumbsParams}>
        {images.map((image, index) => (
          <SwiperSlide key={index}>
            <img
              src={image.thumb}
              alt={`Thumbnail ${index + 1}`}
              style={{
                width: '100%',
                height: '100px',
                objectFit: 'cover',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default ImageGallerySwiper;
Enter fullscreen mode Exit fullscreen mode

Now create a product carousel:

// src/ProductCarouselSwiper.jsx
import React from 'react';
import SwiperCore, { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from 'react-id-swiper';
import 'swiper/css';
import 'swiper/css/navigation';

SwiperCore.use([Navigation]);

function ProductCarouselSwiper() {
  const products = [
    { id: 1, name: 'Product 1', price: '$99', image: 'https://via.placeholder.com/300x300/007bff/ffffff?text=Product+1' },
    { id: 2, name: 'Product 2', price: '$149', image: 'https://via.placeholder.com/300x300/28a745/ffffff?text=Product+2' },
    { id: 3, name: 'Product 3', price: '$199', image: 'https://via.placeholder.com/300x300/ffc107/000000?text=Product+3' },
    { id: 4, name: 'Product 4', price: '$249', image: 'https://via.placeholder.com/300x300/dc3545/ffffff?text=Product+4' },
    { id: 5, name: 'Product 5', price: '$299', image: 'https://via.placeholder.com/300x300/6c757d/ffffff?text=Product+5' }
  ];

  const params = {
    slidesPerView: 1,
    spaceBetween: 20,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    breakpoints: {
      640: {
        slidesPerView: 2,
        spaceBetween: 20
      },
      768: {
        slidesPerView: 3,
        spaceBetween: 30
      },
      1024: {
        slidesPerView: 4,
        spaceBetween: 40
      }
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Product Carousel</h2>
      <Swiper {...params}>
        {products.map((product) => (
          <SwiperSlide key={product.id}>
            <div style={{
              padding: '15px',
              textAlign: 'center',
              backgroundColor: '#f8f9fa',
              borderRadius: '8px',
              height: '100%'
            }}>
              <img
                src={product.image}
                alt={product.name}
                style={{
                  width: '100%',
                  height: '250px',
                  objectFit: 'cover',
                  borderRadius: '4px',
                  marginBottom: '10px'
                }}
              />
              <h3 style={{ margin: '0 0 5px 0' }}>{product.name}</h3>
              <p style={{ margin: 0, fontWeight: 'bold', color: '#007bff' }}>{product.price}</p>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default ProductCarouselSwiper;
Enter fullscreen mode Exit fullscreen mode

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ImageGallerySwiper from './ImageGallerySwiper';
import ProductCarouselSwiper from './ProductCarouselSwiper';
import './App.css';

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

export default App;
Enter fullscreen mode Exit fullscreen mode

This example demonstrates:

  • Image gallery with thumbnail navigation
  • Product carousel with responsive breakpoints
  • Touch/swipe gestures
  • Navigation controls
  • Custom styling
  • Multiple slides per view

Common Issues / Troubleshooting

  1. Swiper not displaying: Make sure you've imported the CSS files. Also check that SwiperCore modules are properly initialized with SwiperCore.use().

  2. Navigation not working: Ensure navigation selectors (.swiper-button-next, .swiper-button-prev) are correctly configured in params. The elements are created automatically by Swiper.

  3. Thumbnails not syncing: For thumbnail galleries, make sure the thumbs param is set correctly and the thumbs swiper is passed to the main swiper.

  4. Touch gestures not working: Touch support is enabled by default. If gestures aren't working, check for CSS conflicts or ensure the swiper container has proper dimensions.

  5. Responsive breakpoints: Use the breakpoints object in params to configure different settings for different screen sizes. The breakpoint values are in pixels.

  6. Autoplay not working: Make sure the Autoplay module is imported and used with SwiperCore.use([Autoplay]). Also check that autoplay params are correctly configured.

Next Steps

Now that you have an understanding of react-id-swiper:

  • Explore all available Swiper modules
  • Learn about advanced configuration options
  • Implement lazy loading for images
  • Add custom animations and transitions
  • Create vertical sliders
  • Integrate with React Router for navigation
  • Learn about other slider libraries (swiper, react-slick)
  • Check the official repository: https://github.com/kidjp85/react-id-swiper
  • Look for part 60 of this series for more advanced topics

Summary

You've successfully integrated react-id-swiper into your React application and created touch-enabled sliders with navigation, thumbnails, and responsive breakpoints. react-id-swiper provides a React-friendly wrapper for Swiper.js with full feature support.

SEO Keywords

react-id-swiper
React Swiper wrapper
react-id-swiper tutorial
React touch slider
react-id-swiper installation
React Swiper.js
react-id-swiper example
React carousel slider
react-id-swiper setup
React image gallery
react-id-swiper customization
React swipe gestures
react-id-swiper navigation
React slider library
react-id-swiper getting started

Top comments (0)