Swiper React

https://swiperjs.com/react
Admin
Swiper React is a modern touch slider component library that provides responsive carousel...
Tokens:5,232
Snippets:40
Trust Score:9.6
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install Swiper with npm

Source: https://swiperjs.com/react

Install Swiper React via NPM as part of the main Swiper library.

```bash
npm i swiper

```

--------------------------------

### Two-way Controller with swiper/react

Source: https://swiperjs.com/react

Two-way controller setup: each Swiper stores its own instance via `onSwiper` and passes the other instance through `controller.control`, so both control each other. Requires the `Controller` module and two state variables.

```jsx
import React, { useState } from 'react';
import { Controller } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

const App = () => {
  // store swiper instances
  const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);

  return (
    <main>
      <Swiper
        modules={[Controller]}
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper }}
      >
        {/* ... */}
      </Swiper>

      <Swiper
        modules={[Controller]}
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper }}
      >
        {/* ... */}
      </Swiper>
    </main>
  );
};

```

--------------------------------

### Attach Swiper events with on{Eventname} props

Source: https://swiperjs.com/react

Shows how to attach Swiper events as props using the on{Eventname} format. The example uses onSlideChange and onReachEnd, but any Swiper event can be used this way.

```jsx
  <Swiper
    onSlideChange={() => {/*...*/}}
    onReachEnd={() => {/*...*/}}
    ...
  >

```

--------------------------------

### Virtual Slides with swiper/react

Source: https://swiperjs.com/react

Enables virtual slides by setting the `virtual` prop on `Swiper` and `virtualIndex` on each `SwiperSlide`. The example creates 1000 slides and renders them with `slidesPerView={3}` and `spaceBetween={50}`.

```jsx
import { Virtual } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/virtual';

export default () => {
  // Create array with 1000 slides
  const slides = Array.from({ length: 1000 }).map(
    (el, index) => `Slide ${index + 1}`
  );

  return (
    <Swiper modules={[Virtual]} spaceBetween={50} slidesPerView={3} virtual>
      {slides.map((slideContent, index) => (
        <SwiperSlide key={slideContent} virtualIndex={index}>
          {slideContent}
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

```

--------------------------------

### Fade effect with Swiper React

Source: https://swiperjs.com/react

Full example of using the Fade effect. Import EffectFade from 'swiper/modules', add it to the modules array, set effect="fade", and include the required CSS files 'swiper/css' and 'swiper/css/effect-fade'.

```jsx
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectFade } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/effect-fade';

export default () => {
  return (
    <Swiper modules={[EffectFade]} effect="fade">
      {[1, 2, 3].map((i, el) => {
        return <SwiperSlide>Slide {el}</SwiperSlide>;
      })}
    </Swiper>
  );
};

```

--------------------------------

### One-way Controller with swiper/react

Source: https://swiperjs.com/react

One-way controller setup: the main Swiper passes its `controller` prop the instance stored from the controlled Swiper's `onSwiper` callback. Requires the `Controller` module and a state variable to hold the controlled instance.

```jsx
import React, { useState } from 'react';
import { Controller } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';

const App = () => {
  // store controlled swiper instance
  const [controlledSwiper, setControlledSwiper] = useState(null);

  return (
    <main>
      {/* Main Swiper -> pass controlled swiper instance */}
      <Swiper modules={[Controller]} controller={{ control: controlledSwiper }} ...>
        {/* ... */}
      </Swiper>

      {/* Controlled Swiper -> store swiper instance */}
      <Swiper modules={[Controller]} onSwiper={setControlledSwiper} ...>
        {/* ... */}
      </Swiper>
    </main>
  )
}

```

--------------------------------

### Use SwiperSlide render function with isActive

Source: https://swiperjs.com/react

Shows the SwiperSlide render function receiving an object with slide state properties. The example uses isActive, but the object also includes isPrev, isNext, isVisible, and isDuplicate.

```jsx
<Swiper>
  <SwiperSlide>
    {({ isActive }) => (
      <div>Current slide is {isActive ? 'active' : 'not active'}</div>
    )}
  </SwiperSlide>
</Swiper>

```

--------------------------------

### useSwiper hook to get Swiper instance

Source: https://swiperjs.com/react

Use inside a Swiper component to access the Swiper instance and call methods like slideNext().

```jsx
// some-inner-component.jsx
import { React } from 'react';
import { useSwiper } from 'swiper/react';

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

```

--------------------------------

### useSwiperSlide hook to get slide data

Source: https://swiperjs.com/react

Use inside a SwiperSlide to get slide data such as isActive.

```jsx
// some-inner-component.jsx
import { React } from 'react';
import { useSwiperSlide } from 'swiper/react';

export default function SlideTitle() {
  const swiperSlide = useSwiperSlide();

  return (
    <p>Current slide is {swiperSlide.isActive ? 'active' : 'not active'}</p>
  );
}

```

--------------------------------

### Swiper slots usage and rendered output

Source: https://swiperjs.com/react

Shows how to use the four slots (container-start, container-end, wrapper-start, wrapper-end) and the resulting rendered HTML.

```jsx
<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <span slot="container-start">Container Start</span>
  <span slot="container-end">Container End</span>
  <span slot="wrapper-start">Wrapper Start</span>
  <span slot="wrapper-end">Wrapper End</span>
</Swiper>

```

```html
<div class="swiper">
  <span slot="container-start">Container Start</span>
  <div class="swiper-wrapper">
    <span slot="wrapper-start">Wrapper Start</span>
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <span slot="wrapper-end">Wrapper End</span>
  </div>
  <span slot="container-end">Container End</span>
</div>

```

--------------------------------

### Thumbs gallery with Swiper React

Source: https://swiperjs.com/react

Shows how to set up a main gallery with a thumbnails Swiper. Store the thumbs instance with useState and pass it to the main Swiper via the thumbs prop; the thumbs Swiper must also set watchSlidesProgress and onSwiper={setThumbsSwiper}.

```jsx
  import React, { useState } from 'react';
  import { Swiper, SwiperSlide } from 'swiper/react';
  import { Thumbs } from 'swiper/modules';

  const App = () => {
    // store thumbs swiper instance
    const [thumbsSwiper, setThumbsSwiper] = useState(null);

    return (
      <main>
        {/* Main Swiper -> pass thumbs swiper instance */}
        <Swiper modules={[Thumbs]} thumbs={{ swiper: thumbsSwiper }} ...>
          {/* ... */}
        </Swiper>

        {/* Thumbs Swiper -> store swiper instance */}
        {/* It is also required to set watchSlidesProgress prop */ }
        <Swiper
          modules={[Thumbs]}
          watchSlidesProgress
          onSwiper={setThumbsSwiper}
          ...
        >
          {/* ... */}
        </Swiper>
      </main>
    )
  }

```

--------------------------------

### Swiper props

Source: https://swiperjs.com/react

Documentation for the Swiper React component props, including tag, wrapperTag, onSwiper, and event handling.

```APIDOC
## Swiper props

### Description
Swiper React component accepts all Swiper parameters as component props, plus additional props for customization and event handling.

### Props
- **tag** (string) - Default: `'div'` - Main Swiper container HTML element tag.
- **wrapperTag** (string) - Default: `'div'` - Swiper wrapper HTML element tag.
- **onSwiper** (function) - Default: `'div'` - Callback that receives the Swiper instance.

### Events
All Swiper events are supported in `on{Eventname}` format. For example, `slideChange` event becomes `onSlideChange` prop.

### Example
```jsx
<Swiper
  onSlideChange={() => {/*...*/}}
  onReachEnd={() => {/*...*/}}
  ...
>
```
```

--------------------------------

### useSwiper

Source: https://swiperjs.com/react

The useSwiper hook returns the Swiper instance for use inside components that are children of a Swiper component.

```APIDOC
## useSwiper

### Description
Returns the Swiper instance for use inside components that are children of a Swiper component.

### Usage
```jsx
import { React } from 'react';
import { useSwiper } from 'swiper/react';

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}
```

### Returns
- **swiper** (Swiper instance) - The Swiper instance, which provides methods like `slideNext()`.
```

--------------------------------

### SwiperSlide props

Source: https://swiperjs.com/react

Documentation for the SwiperSlide component props, including tag, zoom, and virtualIndex.

```APIDOC
## SwiperSlide props

### Description
SwiperSlide component accepts props for customizing the slide element and enabling zoom or virtual slide behavior.

### Props
- **tag** (string) - Default: `'div'` - Swiper Slide HTML element tag.
- **zoom** (boolean) - Default: `false` - Enables additional wrapper required for zoom mode.
- **virtualIndex** (number) - Default: (none) - Actual swiper slide index. Required to be set for virtual slides.
```

--------------------------------

### Slots

Source: https://swiperjs.com/react

Swiper React uses slots for content distribution. There are 4 slots available: container-start, container-end (default), wrapper-start, and wrapper-end.

```APIDOC
## Slots

### Description
Swiper React uses slots for content distribution. There are 4 slots available: `container-start`, `container-end` (default), `wrapper-start`, and `wrapper-end`.

### Usage
```jsx
<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <span slot="container-start">Container Start</span>
  <span slot="container-end">Container End</span>
  <span slot="wrapper-start">Wrapper Start</span>
  <span slot="wrapper-end">Wrapper End</span>
</Swiper>
```

### Slot Placement
- **container-start** - Element is added to the beginning of the swiper-container.
- **container-end** (default) - Element is added to the end of the swiper-container.
- **wrapper-start** - Element is added to the beginning of the swiper-wrapper.
- **wrapper-end** - Element is added to the end of the swiper-wrapper.
```

--------------------------------

### SwiperSlide render function

Source: https://swiperjs.com/react

Documentation for the SwiperSlide render function, which provides slide state properties for custom rendering.

```APIDOC
## SwiperSlide render function

### Description
SwiperSlide component can accept a render function that receives an object with slide state properties.

### Render Function Properties
- **isActive** (boolean) - true when current slide is active.
- **isPrev** (boolean) - true when current slide is the previous from active.
- **isNext** (boolean) - true when current slide is the next from active.
- **isVisible** (boolean) - true when current slide is visible (`watchSlidesProgress` Swiper parameter must be enabled).
- **isDuplicate** (boolean) - true when current slide is a duplicate slide (when `loop` mode enabled).

### Example
```jsx
<Swiper>
  <SwiperSlide>
    {({ isActive }) => (
      <div>Current slide is {isActive ? 'active' : 'not active'}</div>
    )}
  </SwiperSlide>
</Swiper>
```
```

--------------------------------

### Basic Swiper React component usage

Source: https://swiperjs.com/react

Basic usage of Swiper React with the core version (no additional modules). Imports Swiper and SwiperSlide from 'swiper/react' and the base CSS.

```jsx
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

```

--------------------------------

### Swiper React with Navigation, Pagination, Scrollbar, and A11y modules

Source: https://swiperjs.com/react

Usage with additional modules (Navigation, Pagination, Scrollbar, A11y). Imports modules from 'swiper/modules' and their CSS. The Swiper component creates required elements for these modules when their element selectors are not specified.

```jsx
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

```

--------------------------------

### useSwiperSlide

Source: https://swiperjs.com/react

The useSwiperSlide hook returns slide data for the current slide, for use inside components that are children of a SwiperSlide component.

```APIDOC
## useSwiperSlide

### Description
Returns slide data for the current slide, for use inside components that are children of a SwiperSlide component.

### Usage
```jsx
import { React } from 'react';
import { useSwiperSlide } from 'swiper/react';

export default function SlideTitle() {
  const swiperSlide = useSwiperSlide();

  return (
    <p>Current slide is {swiperSlide.isActive ? 'active' : 'not active'}</p>
  );
}
```

### Returns
- **swiperSlide** (object) - Contains slide data, including `isActive` (boolean) indicating whether the slide is active.
```
Tokens:
Raw