swipe-simple

Swiper React Library

It's a customizable React component that allows you to create a swipeable, interactive carousel. This component supports navigation buttons, loop functionality, and reverse transitions.

Installation

To install in your React project, run:

npm install swiper-react

or if you are using Yarn:

yarn add swiper-react

Usage

Basic Usage

Here is a simple example of using the Swiper component in your React application:

import React from "react";
import { Swiper, SwiperSlide } from "swiper-react";

const App = () => {
  return (
    <Swiper>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

export default App;

Configuration Options

Swiper accepts several props that allow you to customize its behavior.

Props for Swiper

Prop	Type	Default Value	Description
children	React.ReactNode	N/A	The slides to display inside the swiper.
defaultIndex	number	0	The initial slide index.
allowLoop	boolean	true	Determines whether looping between the first and last slides is allowed.
className	string	""	Custom class name for the container element.
onActiveIndexChange	(index: number) => void		Callback function to be triggered when the active slide index changes.
showNavigation	boolean	true	Show or hide the navigation buttons (previous and next).
activeIndex	number		Controlled active slide index. If provided, overrides defaultIndex.
enableLogs	boolean	true	Enable or disable console logging for slide changes.
prevButton	(props: { prevSlid: () => void; index: number; slideTo: (index: number) => void }) => React.ReactNode		Custom previous button renderer.
nextButton	(props: { nextSlid: () => void; index: number; slideTo: (index: number) => void }) => React.ReactNode		Custom next button renderer.
showDisabledButtons	boolean	true	Determines whether to show the navigation buttons when they are disabled.

Props for SwiperSlide

Prop	Type	Default Value	Description
children	React.ReactNode	N/A	The content of the slide.

Methods

The Swiper component exposes several methods that can be accessed via ref:

Method	Description
nextSlide	Programmatically moves to the next slide.
prevSlide	Programmatically moves to the previous slide.
slideTo	Programmatically slides to a specific index.
getActiveIndex	Returns the current active slide index.

Example with Custom Navigation Buttons

You can customize the navigation buttons by passing your own components to the prevButton and nextButton props.

import React from "react";
import { Swiper, SwiperSlide } from "swiper-react";

const App = () => {
  return (
    <Swiper
      prevButton={({ prevSlid }) => (
        <button onClick={prevSlid}>Custom Prev</button>
      )}
      nextButton={({ nextSlid }) => (
        <button onClick={nextSlid}>Custom Next</button>
      )}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

export default App;

Example with Looping and Logs

This example demonstrates how you can enable looping and view logs for slide changes.

import React from "react";
import { Swiper, SwiperSlide } from "swiper-react";

const App = () => {
  return (
    <Swiper
      allowLoop={true}
      enableLogs={true}
      onActiveIndexChange={(index) => console.log(`Active index: ${index}`)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
};

export default App;

CSS Customization

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.swiper-slide {
  width: 100%;
  flex-shrink: 0;
}

Conclusion

The Swiper React component provides a flexible and customizable way to implement a swipeable carousel in your React application. You can configure it with features such as looped navigation, custom buttons, and console logs to help with debugging or enhance the user experience.

For more details on customization, refer to the source code or consult the React documentation.