我是 react 新手,并尝试使用 react 很棒的 slider ,它工作正常,但我想在 slider 图像上添加按钮和文本,但不知道该怎么做。
这是我的 slider 组件
import React, { Component } from 'react'
import slider1 from '../images/slider/1.jpg'
import AwesomeSlider from 'react-awesome-slider'
import withAutoplay from 'react-awesome-slider/dist/autoplay'
import 'react-awesome-slider/dist/styles.css'
const AutoplaySlider = withAutoplay(AwesomeSlider)
class Slider extends Component {
render () {
return (
<div className='slider-area'>
<AutoplaySlider
play
cancelOnInteraction={false} // should stop playing on user interaction
interval={6000}
>
<div data-src={slider1} />
<div data-src={slider1} />
<div data-src={slider1} />
</AutoplaySlider>
</div>
)
}
}
如果有人能提供帮助,我将非常感激。 谢谢
最佳答案
将 organicArrows
属性设置为 false 并提供 buttonContentRight
和 buttonContentLeft
。它会起作用的。
Working demo - 它显示自定义文本而不是箭头。您可以添加按钮等。
代码片段
<AwesomeSlider
organicArrows={false}
buttonContentRight={<p style={{ color: "black" }}>Right</p>}
buttonContentLeft={<p style={{ color: "black" }}>Right</p>}
play
cancelOnInteraction={false} // should stop playing on user interaction
interval={6000}
>
<div data-src={"https://randomuser.me/api/portraits/women/43.jpg"} />
<div data-src={"https://randomuser.me/api/portraits/women/44.jpg"} />
</AwesomeSlider>
关于reactjs - 如何在react-awesome-slider上添加按钮或文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62408487/