- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有来自休息 api 的图像进入我的应用程序。然后将这些图像填充到 react 多轮播 .我想做的是使这些图像可点击用于灯箱。我对 React 还很陌生。到目前为止,我的轮播 slider 代码是:
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
手动制作灯箱为每个图像和放大图像,添加标题,全屏等。
如果您可以利用现有库为您的轮播实现灯箱功能,例如react-images,那就容易多了。 .
这是实现了灯箱功能的代码的工作副本(使用 react-multi-carousel 和 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;
关于javascript - 如何让我的 react-multi-carousel 为我的 ReactJS 应用程序使用灯箱功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61219761/
我目前正在制作一个将订阅作为 Multi-Tenancy 应用程序出售的 web 应用程序。我使用的技术是导轨。 但是,它不仅仅是使用当前应用程序的孤立租户。 每个租户创建产品并将其发布到他们的个人应
我们计划将 Azure Service Fabric 用于面向数据的 Multi-Tenancy 应用程序。通常有 100 多个客户,每个客户有 5 - 100 个用户。 查看文档,我得出的结论是,最
我们正在为我们正在构建的自定义 Saas 应用程序评估 Shiro。似乎一个伟大的框架可以完成我们想要的 90% 的工作,开箱即用。我对 Shiro 的理解是基本的,这就是我想要完成的。 我们有多个客
希望使用 NestJS 6 的新请求注入(inject)范围功能实现 Multi-Tenancy NestJS 解决方案。 对于任何给定的服务,我认为我可以做这样的事情: @Injectable({s
我正在寻找一个基于 PHP 的框架,该框架已准备好具有以下功能 1.带有登录/注销的简单仪表板 2. 多个数据库,每个数据库代表一个客户端 只是基本框架。 3.简单的注册支持 用例: 我从 githu
我正在尝试对这个已经回答的问题进行一些跟进...... Service Fabric multi-tenant 如果我要将我的租户设置为 Azure Service Fabric 无状态服务(他们将获
首先,我很清楚 Keycloak 中的多领域 Multi-Tenancy 方法。我接手了一个没有人想到 Multi-Tenancy 的遗留项目。现在,两年后,突然,客户需要这个功能。实际上,微服务已经
我正在使用 Apache Nifi 开发基于云的应用程序,为此我们需要支持 Multi-Tenancy 。但是当前的 Nifi 实现只支持基于角色的用户访问,对于单个流。 我可以理解流状态被保存为 N
对于我积极维护的客户基于 Web 的 CRM 的分支机构数量不断增加的 Multi-Tenancy ,我需要做出一个艰难的数据库设计决策。 我很早就决定为每个分支使用具有单独数据库的单独应用程序,因为
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
很抱歉我的英语不好,希望你能看到我说的。 在Lucene3 Junit测试代码中:org.apache.lucene.queryParser.TestMultiAnalyzer.testMultiAn
假设我们有一个多维数组。 multi[3][10] 那么&multi[0][0]将是multi 如果我们想访问这个数组中的任何元素。我们只需要一次解除引用。因为它位于连续的位置。我无法理解双重取消引用
表结构和示例数据 Wall_Update [INT VARCHAR VARCHAR TIMESTAMP TinyText]
我们需要构建一个软件框架(或中间件),以便在一台机器上运行的不同软件组件(或模块)之间实现消息传递。该框架将提供以下功能: 模块之间的通信是通过“消息传递”。 每个模块都有自己的消息队列和消息处理线程
我正在开发一个在多个域上运行的应用程序。 我想对所有这些都使用 Google 自定义搜索。但是 GCS 需要提供要搜索的网站域。 有没有办法动态指定域?理论上,我可以拥有数千个域,但我不喜欢手动添加所
在 here.com map 类 MapMarker 中,此方法 showInfoBubble () 无法在多 map 标记上显示多信息气泡,对此有任何解决方案吗? 最佳答案 来自 showInfoB
我正在开发一个 Multi-Tenancy 解决方案,我想使用最新的 ASP.NET Identity框架特别是Entity Framework执行。 基本上,我需要允许两个用户使用相同的用户名,尽管
我有 50 台可用台式计算机(配备 i5),每台都运行 Ubuntu 14.04 LTS。我需要通过 C 代码计算某些事件的概率,样本大小至少为 2^45。显然,在一台计算机上运行 C 代码不是一种选
我正在按照页面上的示例进行操作:Multi-input and multi-output models 用于预测新闻标题将收到多少转发和点赞的模型设置。那么 main_output 正在预测有多少
硬件:我们使用 24 核(2*12 核)机器。 SSD 磁盘和 SAS-RAID 0 磁盘有 2 个独立的 Controller 。操作系统:Windows 8.1。超线程已禁用。 软件: 2.1。有
我是一名优秀的程序员,十分优秀!