'react swiper js not render if virtual is true

I use swiper.js in my react component.If I don't use virtual in swiper, everything is going well, but when I use Virtual, the slider does not render. I deleted the extra codes so that it is not crowded.

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Keyboard, Virtual } from 'swiper';
import 'swiper/swiper.scss';

SwiperCore.use([Virtual, Keyboard]);

...
return (
 <div className="selected-image-detail__container">
  <div className="selected-image-detail__inner-container">
    <div className="image-detail__header">
      <Close onClick={handleCloseModal}/>
    </div>
    {!loading && !isEmpty(results) && isValidIndex(getImagePosition(results, urlParams.imgrc)) ? (
    <Swiper
      ref={swiper}
      key={selectedImageData?.image_id}
      enabled={isFeatureEnabled('image.swiper')}
      keyboard={{
        enabled: true,
      }}
      preloadImages={true}
      modules={[ Virtual ]} // If i comment this line it is ok
      virtual               // If i comment this line it is ok 
      initialSlide={getImagePosition(!RI? results: related_images.related, selectedImageData?.image_id)}
      spaceBetween={7}
      slidesPerView={1}
      onTransitionEnd={handleChangeSlide}
      onSlideChange={() => setIsSliding(true)}
    >
      {results.map((image, index) => {
        return(
        <SwiperSlide key={image.image_id} virtualIndex={image.image_id}>
              <div className="selected__image__details__container">
                  <SelectedImageCard
                    image={image}
                    setIsReportModalOpen={setIsReportModalOpen}
                    selectedIndex={index}
                    isSliding={isSliding}
                  />                 
              </div>
        </SwiperSlide>

      )})}
    </Swiper>
    ) :
      (
        <div className="selected__image__details__container">
                  <SelectedImageCard
                    image={selectedImageData}
                    setIsReportModalOpen={setIsReportModalOpen}
                    selectedIndex={getImagePosition(!RI? results: related_images.related, selectedImageData?.image_id)}
                    isSliding={isSliding}
                  />
                  {relatedImageLoading && <CircularLoader />}
                  {!relatedImageLoading && _renderRelatedImages(selectedImageData)}
        </div>
      )
    }      
  </div>
 </div>
);

React and Swiper versions:

"react": "^17.0.2",
"swiper": "^6.7.1",

Help me please . I tried every way but it didn't work

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'react swiper js not render if virtual is true

Sources

Related Questions