我在Ionic React工作。我添加了react-responsive-carousel来滑动内容,我需要根据情况垂直和水平滚动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"/>
2条答案
按热度按时间3j86kqsm1#
它可以通过设置这两个 prop 来修复:
preventMovementUntilSwipeScrollTolerance
:在用户滑动到swipeScrollTolerance上指定的值之前,不要让carousel滚动。swipeScrollTolerance
:滑动时需要多少像素才能改变幻灯片,defaults to 5
。mtb9vblg2#
根据docs,您可以将滚动方向作为
'horizontal'
或'vertical'
参数传递给Caribbean将滚动方向的两个选项存储为变量,并根据条件设置滚动方向。