当用户点击react js中的Image或[]图标时，如何在全屏中预览滑动器幻灯片

我对swipper功能很陌生，我在项目中使用了swipper组件https://swiperjs.com/demos

当用户单击图像幻灯片或[]图标时，如何应用全屏模式？

我已经在我的项目中安装了CCD_ 1包CCD_，但当用户单击幻灯片中的图像或[]图标时，我无法应用全屏预览模式。其主要思想是，当用户希望只在全屏中查看幻灯片的图像时，全屏显示图像(包括幻灯片底部的缩略图(。

或者，在npm中是否有其他相关的包可以在reactJS中实现以下结果？你能帮我一下吗？。

滑块设计示例

App.js

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination, Controller, Thumbs } from 'swiper';
import 'swiper/swiper-bundle.css';
import './styles.css';
SwiperCore.use([Navigation, Pagination, Controller, Thumbs]);

function App() {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
const [controlledSwiper, setControlledSwiper] = useState(null);
const slides = [];
for (let i = 0; i < 5; i += 1) {
slides.push(
<SwiperSlide key={`slide-${i}`} tag="li">
<img
src={`http://localhost:3000/logo512.png`}
style={{ listStyle: 'none' }}
alt={`Slide ${i}`}
/>
</SwiperSlide>
);
}
const thumbs = [];
for (let i = 0; i < 5; i += 1) {
thumbs.push(
<SwiperSlide key={`thumb-${i}`} tag="li" style={{ listStyle: 'none' }}>
<img
src={`http://localhost:3000/logo192.png`}
alt={`Thumbnail ${i}`}
></img>
</SwiperSlide>
);
}

return (
<React.Fragment>
<Swiper
id="main"
thumbs={{ swiper: thumbsSwiper }}
controller={{ control: controlledSwiper }}
tag="section"
wrapperTag="ul"
navigation
pagination
spaceBetween={0}
slidesPerView={1}
onInit={(swiper) => console.log('Swiper initialized!', swiper)}
onSlideChange={(swiper) => {
console.log('Slide index changed to: ', swiper.activeIndex);
}}
onReachEnd={() => console.log('Swiper end reached')}
>
{slides}
</Swiper>
<Swiper
id="thumbs"
spaceBetween={5}
slidesPerView={3}
onSwiper={setThumbsSwiper}
>
{thumbs}
</Swiper>
</React.Fragment>
);
}
export default App;
styles.css
.swiper-container {
width: 500px;
}
.swiper-pagination {
bottom: 0;
padding-bottom: 10px;
}
.swiper-wrapper {
padding-inline-start: 0;
}
包.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"swiper": "^6.5.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

import React, { useEffect } from "react";
import { Fancybox as NativeFancybox } from "@fancyapps/ui/dist/fancybox.esm.js";
import "@fancyapps/ui/dist/fancybox.css";
function Fancybox(props) {
const delegate = props.delegate || "[data-fancybox]";
useEffect(() => {
const opts = props.options || {};
NativeFancybox.bind(delegate, opts);
return () => {
NativeFancybox.destroy();
};
}, []);
return <>{props.children}</>;
}
export default Fancybox;

<Fancybox options={{ infinite: false }}></Fancybox>

data-fancybox="gallery"