Uso swiper.js en mi componente de reacción. Si no uso virtual en swiper, todo va bien, pero cuando uso Virtual, el control deslizante no se procesa. Eliminé los códigos extra para que no esté abarrotado.

 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> );

Versiones de React y Swiper:

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

Ayudame por favor . Lo intenté de todas las formas pero no funcionó