Using Swiper in React in 2024

[saltnpixels]

I had to implement a carousel in our project and I did some research and chose Swiper. However, I see it says the react version might be deprecated so I looked to the Web Component version.

I did not like how I did not have full control over some parts or it seemed like extra effort. I could not figure out how to swap- the arrow icons for my own. I tried to use the React version and found it was the same. Not enough ability to modify the basic html structure or requires way too much effort. We wanted the arrows changed to our icons. We wanted the arrows on the outside of the carousel at times. We wanted so many things.

So I went to core. And that's where things got extremely easy. By controlling the barebones we could do anything and it takes minutes to put this together. I recommend not using swiper web components or react. Just build your own react component using core. Waaaaaaay easier. Here is what I did:

We used Chakra so Box could be div and the css props can be swapped for style prop.

import { useRef, useEffect, Children, cloneElement, ReactElement, useState } from 'react';
import Swiper from 'swiper';
import { SwiperOptions } from 'swiper/types';
import { Pagination, Navigation } from 'swiper/modules';
import { Box, BoxProps, MotionBox } from '@components';
import { Chevronleft, Chevronright } from '@/icons';
import uniqueId from 'lodash.uniqueid';
import { Variants } from 'framer-motion';


 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';

interface CarouselProps {
  swiperOptions?: SwiperOptions;
  navigation?: boolean | 'outside';
  pagination?: boolean | 'outside';
  navigationSize?: number;
  navigationButtonSize?: number;
  children: React.ReactElement<CarouselSlideProps>[] | React.ReactElement<CarouselSlideProps>;
  navProps?: BoxProps;
  arrowBg?: string;
  variant?: 'filters' | 'normal';
  hideNavigationOnDrag?: boolean;
}

interface CarouselSlideProps extends BoxProps {}
export const CarouselSlide = ({ className = '', children, ...props }: CarouselSlideProps) => {
  return (
    <Box className={`swiper-slide ${className}`} {...props}>
      {children}
    </Box>
  );
};

export const Carousel = ({
  swiperOptions,
  navigation,
  navigationSize = 14,
  navigationButtonSize = 40,
  pagination,
  children,
  navProps,
  arrowBg = 'transparent',
  variant = 'normal',
  hideNavigationOnDrag = false,
  ...props
}: CarouselProps) => {
  // Ref for the Swiper instance
  const swiperRef = useRef<HTMLDivElement>(null);
  const id = uniqueId('carousel_');
  const [isDragging, setIsDragging] = useState(false);
  const [swiperInstance, setSwiperInstance] = useState<Swiper | null>(null);

  const defaultOptions: SwiperOptions = {
    // Swiper options
    modules: [Navigation, Pagination],
    slidesPerView: 1,
    focusableElements: 'input',
    spaceBetween: 0,
    pagination: { el: `#${id} .swiper-pagination`, clickable: true }, // Enable and configure pagination
    loop: false,
    watchOverflow: false,
    navigation: {
      nextEl: `#${id} .swiper-button-next`,
      prevEl: `#${id} .swiper-button-prev`,
    },
    // Add other Swiper configurations as needed
  };

  const options = { ...defaultOptions, ...swiperOptions };

  let styles = {};
  if (variant === 'filters') {
    arrowBg = 'white';
    styles = {
      ...styles,
      '.swiper-button-prev': {
        height: '100%',
        left: 0,
        borderRadius: 0,
      },
      '.swiper-button-next': {
        height: '100%',
        right: 0,
        borderRadius: 0,
      },
    };
  }

  // Variants for the Framer Motion animation
  const navigationVariants: Variants = {
    visible: { opacity: 1, transition: { duration: 0.5 }, pointerEvents: 'auto' },
    hidden: { opacity: 0, transition: { duration: 0.5 }, pointerEvents: 'auto' },
  };

  useEffect(() => {
    // Initialize Swiper
    if (swiperRef.current) {
      const swiper = new Swiper(swiperRef.current, options);
      setSwiperInstance(swiper);

      // Variable to keep track of the timeout
      if (hideNavigationOnDrag) {
        let timeoutId: NodeJS.Timeout;

        // Detect when the user starts dragging
        swiper.on('touchStart', function () {
          clearTimeout(timeoutId);
          setIsDragging(true);
        });

        // Detect when the user stops dragging
        swiper.on('touchEnd', function () {
          timeoutId = setTimeout(() => setIsDragging(false), 1000);
        });
      }

      // Cleanup on component unmount
      return () => {
        swiper.destroy(true, true);
      };
    }
  }, [navigation, pagination, variant, hideNavigationOnDrag, swiperOptions, children]);

  useEffect(() => {
    if (swiperInstance) {
      // This forces Swiper to recalculate slides and pagination
      swiperInstance.update();
    }
  }, [children]);

  return (
    <Box
      className="swiper-container"
      sx={styles}
      position={'relative'}
      userSelect={'none'}
      id={id}
      px={navigation === 'outside' ? '60px' : ''}
      mb={pagination === 'outside' ? '35px' : 0}
      {...props}
    >
      <Box ref={swiperRef} className="swiper">
        <Box className="swiper-wrapper">{children}</Box>
      </Box>
      {pagination && (
        <Box
          transform={pagination === 'outside' ? 'translateY(35px)' : 'none'}
          className="swiper-pagination"
          sx={{
            '.swiper-pagination-bullet-active': {
              backgroundColor: 'primary.main',
            },
          }}
        ></Box>
      )}
      {navigation && (
        <Box className="swiper-navigation" color="black" {...navProps}>
          <Box
            className="swiper-button-prev"
            background={arrowBg}
            color="inherit"
            _after={{ content: 'none' }}
            width={`${navigationButtonSize}px`}
            aspectRatio="1/1"
            borderRadius="100%"
            height="auto"
            margin="auto"
            bottom="50%"
          >
            <MotionBox
              variants={navigationVariants}
              initial={false}
              animate={isDragging ? 'hidden' : ''}
            >
              <Chevronleft
                style={{
                  width: `${navigationSize}px`,
                  position: 'relative',
                  left: '1px',
                  height: 'auto',
                }}
              />
            </MotionBox>
          </Box>
          <Box
            className="swiper-button-next"
            background={arrowBg}
            color="inherit"
            _after={{ content: 'none' }}
            width={`${navigationButtonSize}px`}
            aspectRatio="1/1"
            borderRadius="100%"
            height="auto"
            margin="auto"
            bottom="50%"
            padding="10px"
          >
            <MotionBox
              variants={navigationVariants}
              initial={false}
              animate={isDragging ? 'hidden' : ''}
            >
              <Chevronright
                style={{
                  width: `${navigationSize}px`,
                  position: 'relative',
                  left: '1px',
                  height: 'auto',
                }}
              />
            </MotionBox>
          </Box>
        </Box>
      )}
    </Box>
  );
};

This makes a simple carousel that works. Has all the major things most people want. Nagivation, pagination with a simple boolean. You can also set to "outside" to put those items outside the carousel. We used our own Chevron icons from our own library.

Hope this helps someone.