如何在 react-awesome-slider 上添加按钮或文本

Question

我是 React 的新手，正在尝试使用 React awsome 滑块，它工作正常，但我想在滑块图像上添加按钮和文本，但不知道该怎么做。

这是我的滑块组件

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>

    )
  }
}

如果有人能提供帮助，我将不胜感激。谢谢

Answer 1

将 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>

如何在 react-awesome-slider 上添加按钮或文本

How to add Button or Text on react-awsome-slider

slider

reactjs

react-slick

react-component