SwiperJS allows you to control a slider programmatically from your React components. This is useful when you want to create custom navigation buttons, place controls outside the slider, or trigger slide changes based on user actions elsewhere in your UI.

To achieve this, you can capture the Swiper instance using the onSwiper callback. Once the instance is available, you can call Swiper's navigation methods—such as slideNext() and slidePrev()—directly from your own event handlers.

This approach gives you full control over the slider's behavior without relying on Swiper's built-in navigation UI. It also keeps your component logic clear and React-friendly, making it easy to integrate Swiper with other parts of your application.

Programmatic navigation is commonly used for custom buttons, step-based interfaces, onboarding flows, or any situation where slide changes need to be triggered by external UI elements rather than swipe gestures alone.

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

export default function CustomSwiper() {
  const [swiper, setSwiper] = useState(null);

  return (
    <div style={{ maxWidth: 600, margin: "40px auto" }}>
      <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
        <button onClick={() => swiper?.slidePrev()}>Previous</button>
        <button onClick={() => swiper?.slideNext()}>Next</button>
      </div>

      <Swiper slidesPerView={1} onSwiper={setSwiper}>
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>
    </div>
  );
}