swiper usage with react typescript

[greenpau]

First, I installed swiper.

npm install swiper

Then, followed the example here: https://swiperjs.com/element#usage-with-react

It did not work, because I got the following error:

Property 'swiper-container' does not exist on type 'JSX.IntrinsicElements'.

Next I added IntrinsicElements to swiper-container and swiper-slide.

import React from 'react';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'swiper-container': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
      'swiper-slide': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
    }
  }
}

import { useRef, useEffect } from 'react';
import { register, SwiperContainer, SwiperSlide } from 'swiper/element/bundle';
import useLocalStorage from '../../builtin/common/LocalStorage';
import { ImageCarouselProps } from './interfaces';

register();

// eslint-disable-next-line no-empty-pattern
const ImageCarousel: React.FC<ImageCarouselProps> = (props) => {
  const swiperElRef = useRef(null);

  // useEffect(() => {
  //   // listen for Swiper events using addEventListener
  //   swiperElRef?.current?.addEventListener('progress', (e) => {
  //     const [swiper, progress] = e.detail;
  //     console.log(progress);
  //   });

  //   swiperElRef?.current?.addEventListener('slidechange', (e) => {
  //     console.log('slide changed');
  //   });
  // }, []);

  return (
    <swiper-container
      ref={swiperElRef}
      slides-per-view="1"
    >
      {props.urls && props.urls.map((url) => {
        return <swiper-slide><img src={url} /></swiper-slide>
      })}
    </swiper-container>
  );
};

export default ImageCarousel;

The page renders the following.

I can scroll by dragging the picture, but is no go left/right icon to indicate that I can scroll it..

What should I do to make it work? 😄

[zewas-digital]

Maybe try adding navigation="true" to your swiper-container

 <swiper-container
      ref={swiperElRef}
      slides-per-view="1"
      navigation="true"
    >
      {props.urls && props.urls.map((url) => {
        return <swiper-slide><img src={url} /></swiper-slide>
      })}
    </swiper-container>