如何将箭头控件设置为自定义按钮
Posted
技术标签:
【中文标题】如何将箭头控件设置为自定义按钮【英文标题】:How to Set arrow controls to a custom button 【发布时间】:2019-07-08 10:35:30 【问题描述】:我将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 =
render()
var settings =
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
;
return (
<div>
/*Want to Add Control to this Buttons*/
<Button>Prev</Button>
<Button>Next</Button>
<div className="container">
<Slider ...settings>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
</Slider>
</div>
</div>
);
export default App;
【问题讨论】:
【参考方案1】:这里你可以通过使用 react useRef Hook 来实现这里是实际的代码:
import React, useRef from "react";
import Slider from "react-slick";
const SliderComponent = () =>
const slider = useRef();
const next = () =>
slider.current.slickNext();
;
const previous = () =>
slider.current.slickPrev();
;
const settings =
dots: false,
infinite: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
autoplaySpeed: 3000,
arrows: false,
responsive: [
breakpoint: 1024,
settings:
slidesToShow: 2,
slidesToScroll: 2,
infinite: true,
dots: true,
,
,
breakpoint: 768,
settings:
slidesToShow: 1,
slidesToScroll: 1,
,
,
],
;
return(
<div>
<button onClick=previous> Prev Button </button>
<Slider ref=(c) => (slider.current = c) ...settings>
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
<div>Slide 5</div>
</Slider>
<button onClick=next> Next Button </button>
</div>
)
【讨论】:
【参考方案2】:Nandhini,您必须在使用该软件包之前阅读文档一次。
官方文档中已经有这个方法了 https://react-slick.neostack.com/docs/example/previous-next-methods
使用它。
【讨论】:
以上是关于如何将箭头控件设置为自定义按钮的主要内容,如果未能解决你的问题,请参考以下文章