我将其添加react-slick到我的项目中以显示carousel. 我想使用位于滑块内容顶部的自定义下一个和上一个按钮来控制我的滑块。所以我遵循了自定义箭头文档,但我不想在光滑的内容中显示我的按钮,我想将控件提供给滑块内容上方的按钮。如何实现这一目标?我包含了我创建的组件中的代码。
import React from 'react';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
function SampleNextArrow(props) {
const { onClick } = props;
return (
<React.Fragment>
<Button
onClick={onClick} className="slickRight">
Next
</Button>
</React.Fragment>
);
}
function SamplePrevArrow(props) {
const { onClick } = props;
return (
<React.Fragment>
<Button
onClick={onClick} className="slickLeft">
Prev
</Button>
</React.Fragment>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {}
} …Run Code Online (Sandbox Code Playgroud)我的组件中有一个react-loading-skeleton,我的页面中有一个使用 img 标签加载的静态图像,我想显示一个骨架组件,直到图像加载。我尝试了react.lazy和suspense,但它只显示直到组件加载不起作用,直到图像完全加载。
import React from 'react';
export default class SlideItems extends React.Component {
render() {
return (
<div>
<img src={require("./someImg.jpg")}/>
</div>
);
}
}Run Code Online (Sandbox Code Playgroud)
我使用了 React slick PrevNextMethod
https://react-slick.neostack.com/docs/example/previous-next-methods
我将“Infinite”设置为 false,因此轮播中不会显示循环。现在,如果当前显示的幻灯片之前没有可用的幻灯片,我想禁用上一个按钮,反之亦然,我想禁用下一个按钮。
官方文档中没有任何选项。有办法实现这个目标吗?