Is there an way to use custom Swiper Component in React (using Typescript)?

[hayoung-jeremy]

• Swiper Version: 6.7.0
• npm version : 7.17.0
• Platform/Target and Browser Versions: Windows, CHROME

What You Did

I wanted to make a custom Swiper Template, so that I can re-use it whenever the contents change.

and this is my folder structure (simplified) :

public/
  images/
    banner_01.jpg
    banner_02.jpg
    banner_03.jpg
src/
  components/
    swiper/
      SwiperTemplate.tsx
  container/
    Home/
      HomeContainer.tsx
  db/
    bannerImages.json

bannerImages.json is an array containing objects which have information of the images in public folder :

    [
      { "id": 1, "url": "/images/banner_01.jpg", "alt": "메인배너 1" },
      { "id": 2, "url": "/images/banner_02.jpg", "alt": "메인배너 2" },
      { "id": 3, "url": "/images/banner_03.jpg", "alt": "메인배너 3" }
    ]

my SwiperTemplate.tsx looks like :

    import { Swiper, SwiperSlide } from "swiper/react";
    import SwiperCore, { Navigation, Pagination, Virtual } from "swiper";
    import "swiper/swiper.scss";
    import "swiper/components/navigation/navigation.scss";
    import "swiper/components/pagination/pagination.scss";
    
    SwiperCore.use([Virtual, Navigation, Pagination]);
    
    interface Props {
      slidesPerView?: number;
      spaceBetween?: number;
      pagination?: object;
      navigation?: boolean;
      loop?: boolean;
      virtual?: boolean;
      data?: any[] | undefined;
    }
    
    const SwiperTemplate = ({
      slidesPerView,
      spaceBetween,
      pagination,
      navigation,
      loop,
      virtual,
      data,
    }: Props) => {
      return (
        <>
          <Swiper
            slidesPerView={slidesPerView}
            spaceBetween={spaceBetween}
            pagination={pagination}
            navigation={navigation}
            loop={loop}
            virtual={virtual}
          >
            {data?.map((item, index) => (
              <SwiperSlide key={item.id} virtualIndex={index}>
                <img src={item.url} alt={item.alt} />
              </SwiperSlide>
            ))}
          </Swiper>
        </>
      );
    };
    
    export default SwiperTemplate;

and I use it in my HomeContainer :

    import React from "react";
    // swiper :
    import SwiperCore, { Navigation, Pagination, Virtual } from "swiper";
    import { Swiper, SwiperSlide } from "swiper/react";
    import "swiper/swiper.scss";
    import "swiper/components/navigation/navigation.scss";
    import "swiper/components/pagination/pagination.scss";
    
    // custom :
    import bannerImages from "db/bannerImages.json";
    import { SectionTemplate } from "components";
    import { SwiperTemplate } from "components";
    
    SwiperCore.use([Virtual, Navigation, Pagination]);
    
    const HomeContainer = () => {
      return (
        <>
          <SectionTemplate hasInner h2Content="main banner">
            <Swiper
              slidesPerView={1}
              virtual
              pagination={{ clickable: true }}
              navigation
            >
              {bannerImages.map((item, index) => {
                return (
                  <SwiperSlide key={item.id} virtualIndex={index}>
                    <img src={item.url} alt={item.alt} />
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </SectionTemplate>
          <SectionTemplate hasInner h2Content="신제품 & 베스트셀러">
            <SwiperTemplate
              data={bannerImages}
              slidesPerView={1}
              virtual
              pagination={{ clickable: true }}
              navigation
            />
          </SectionTemplate>
          <SectionTemplate hasInner h2Content="추천 카테고리"></SectionTemplate>
          <SectionTemplate hasInner h2Content="EVENT"></SectionTemplate>
          <SectionTemplate hasInner h2Content="Best Reviews"></SectionTemplate>
        </>
      );
    };
    
    export default HomeContainer;

as you can see above, when I import Swiper directly in my HomeContainer, it shows my whole images perfectly, and Swiper works too, but when I import my custom SwiperTemplate, it only shows two images, and Swiper doesn't work(I can't swipe the banner, navigation and pagination does not work either)

this is how it looks

// first one is the case when I directly import Swiper

// second one is the case when I use my custom SwiperTemplate

here is my github : https://github.com/hayoung-jeremy/nature-republic/commit/4cf5697255b6d14e8328813ad9512cda62b5c37e

What am I doing wrong?

Expected Behavior

I want my images rendered
and swiping action works

Actual Behavior

It only renders one or two images,
and swiper doesn't work

[hayoung-jeremy]

this could be the answer for me : #4291