如何使我的React-Multi-Carousel使用我的ReactJS应用的灯箱功能 [英] How to make my react-multi-carousel use a light-box feature for my ReactJS app
问题描述
我有来自Rest API的图像进入我的应用程序.然后将这些图像填充到反应多轮播中.我想做的是使这些图像对于灯箱而言是可点击的.我对React很陌生.到目前为止,我对轮播滑块的代码是:
I have images coming in from a rest api, into my application. Those images then get populated into a react-multi-carousel. What I would like to do is to make those images clickable for a light-box. I am fairly new to React. My code for the carousel slider so far is:
slider.js
import React, { Component } from 'react';
import '../slider/slider.css';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 1,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 1,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 1,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};
class Slider extends Component {
_isMounted = false;
state = {
awsApiData: [],
loading: false,
}
componentDidMount() {
this._isMounted = true;
console.log('app mounted');
this.setState({ loading: true });
/*global fetch */
fetch('https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/xxxxx')
.then(data => data.json())
.then(data => this.setState({ awsApiData: data[0], loading: false }, () => console.log(data)));
}
componentWillUnmount() {
this._isMounted = false;
}
render() {
return (
<div>
{this.state.loading
? <div className="text-center">Loading...</div>
:
<Carousel
additionalTransfrom={0}
showDots={false}
arrows={true}
autoPlaySpeed={3000}
autoPlay={false}
centerMode={false}
className="slider"
containerClass="container-with-dots"
dotListClass="dots"
draggable
focusOnSelect={false}
infinite
itemClass="carousel-top"
keyBoardControl
minimumTouchDrag={80}
renderButtonGroupOutside={false}
renderDotsOutside
responsive={responsive}>
{Object.values(this.state.awsApiData).map((post, indx) => {
return (
<div className="mt-5" key={indx}>
<img className="media-img card-img-top card-img-hero" src={post.image} alt="Alt text"></img>
</div>
);
})}
</Carousel>
}
</div>
);
}
}
export default Slider;
推荐答案
您可以通过为每个图像发出onClick
并放大图像,添加标题,全屏等方式来手动制作灯箱.
You can do the lightbox by hand by issuing an onClick
for each image and enlarging the image, adding captions, full screen etc.
It is a lot easier if you can make use of existing libraries to implement lightbox feature for your carousal such as react-images.
这是实现了灯箱功能的代码的工作副本(使用react-multi-carousel和react-images).
Here is the working copy of your code with light box feature implemented(using react-multi-carousel and react-images).
https://codesandbox. io/s/react-multi-corousal-issue-72s9o?file =/src/Slider.js
这是代码段.
import React, { Component } from "react";
// import "../slider/slider.css";
import "./slider.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import LightBox, { Modal, ModalGateway } from "react-images";
const responsive = {
superLargeDesktop: {
breakpoint: { max: 4000, min: 3000 },
items: 1
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 1
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 1
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1
}
};
class Slider extends Component {
_isMounted = false;
state = {
awsApiData: [],
loading: false,
selectedIndex: 0,
lightboxIsOpen: false
};
componentDidMount() {
this._isMounted = true;
console.log("app mounted");
this.setState({ loading: true });
/*global fetch */
// fetch("https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/xxxxx")
fetch("https://picsum.photos/v2/list?page=1&limit=10")
.then(data => data.json())
.then(data =>
// this.setState({ awsApiData: data[0], loading: false }, () =>
this.setState(
{
awsApiData: data.map(item => ({ source: item.download_url })),
loading: false
},
() => console.log(data)
)
);
}
componentWillUnmount() {
this._isMounted = false;
}
toggleLightbox = selectedIndex => {
this.setState(state => ({
lightboxIsOpen: !state.lightboxIsOpen,
selectedIndex
}));
};
render() {
return (
<div>
{this.state.loading ? (
<div className="text-center">Loading...</div>
) : (
<>
<Carousel
additionalTransfrom={0}
showDots={false}
arrows={true}
autoPlaySpeed={3000}
autoPlay={true}
centerMode={false}
className="slider"
containerClass="container-with-dots"
dotListClass="dots"
draggable
focusOnSelect={false}
infinite
itemClass="carousel-top"
keyBoardControl
minimumTouchDrag={80}
renderButtonGroupOutside={false}
renderDotsOutside
responsive={responsive}
>
{Object.values(this.state.awsApiData).map((post, indx) => {
return (
<div
className="mt-5"
key={indx}
onClick={() => this.toggleLightbox(indx)}
>
<img
className="media-img card-img-top card-img-hero"
src={post.source}
alt="Alt text"
/>
</div>
);
})}
</Carousel>
<ModalGateway>
{this.state.lightboxIsOpen ? (
<Modal onClose={this.toggleLightbox}>
<LightBox
components={{
FooterCaption: () => <div>footer caption</div>
}}
currentIndex={this.state.selectedIndex}
// formatters={{ getAltText }}
frameProps={{ autoSize: "height" }}
views={this.state.awsApiData}
/>
</Modal>
) : null}
</ModalGateway>
</>
)}
</div>
);
}
}
export default Slider;
这篇关于如何使我的React-Multi-Carousel使用我的ReactJS应用的灯箱功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!