javascript - 如何使用 react-responsive-carousel 垂直和水平(嵌套)移动 Carousel
问题描述
我在 Ionic react 工作。我添加了 react-responsive-carousel 用于滑动内容,我需要根据条件垂直和水平滚动轮播。我该如何解决这个问题?请帮忙
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
class DemoCarousel extends Component {
render() {
return (
<Carousel>
<div>
<img src="assets/1.jpeg" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="assets/2.jpeg" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="assets/3.jpeg" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
// Don't forget to include the css in your page
// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>
解决方案
根据文档,您可以将滚动方向作为参数传递给 Carousel'horizontal'
或'vertical'
将滚动方向的 2 个选项存储为变量,并根据条件设置滚动方向。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';
const SCROLL_DIRECTION = {
H = "horizontal",
V = "vertical"
}
class DemoCarousel extends Component {
constructor() {
super()
this.state = {
scrollDirection: SCROLL_DIRECTION.H // or SCROLL_DIRECTION.V
}
}
render() {
return (
<Carousel
direction = {this.state.scrollDirection}
>
<div>
<img src="assets/1.jpeg" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="assets/2.jpeg" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="assets/3.jpeg" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
// Don't forget to include the css in your page
// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>
推荐阅读
- ios - SwiftUI 自定义步进按钮
- flutter - Flutter:Flavour 是使用相同代码库制作多个应用程序的最佳方式吗?
- acumatica - 我可以将自定义键字段添加到基本 Acumatica 表吗?
- java - 不是抽象的,并且不会覆盖回调中的抽象方法 onError(Exception)
- reactjs - NextJS:将 json 加载到 _app.js vs pages 中的 getInitialProps 并避免重复调用
- r - 降低 R 中 arules 的支持阈值
- ios - React Native 在设备 iOS 崩溃上运行
- r - 调整标题
- javascript - 当从 ref 触发时,Safari 会忽略文件输入的 onChange
- javascript - 为什么 Web 元素仅随机抛出带有 TimedOut 原因的 CypressError?