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

Posted 2023-02-25

【中文标题】如何在 react-awesome-slider 上添加按钮或文本

【英文标题】：How to add Button or Text on react-awsome-slider

【发布时间】：2020-06-16 12:27:10

【问题描述】：

我是 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>

    )
  

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

【问题讨论】：

您是否尝试过使用doc 中提到的customContent 道具

@Harikrishnan 是的，我试过了，但没用 const welcome = 'welcome' return ( <div className='slider-area'> <AutoplaySlider play cancelOnInteraction=false interval=6000 customContent=welcome > 我就是这样做的

【参考方案1】：

将 organicArrows 属性设置为 false 并提供 buttonContentRight 和 buttonContentLeft。它会起作用的。

Working demo - 它显示自定义文本而不是箭头。您可以添加一个按钮等。

代码 sn-p

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

【讨论】：

我不想更改箭头只想添加另一个按钮和文本请查看此链接microsoft.com/en-in/… 喜欢在此链接上了解更多按钮和文本

您可以使用任何您想要的元素/文本/样式...我已经更新了代码框中的代码并为您制作了一些样式...。只需根据您的需要扩展样式即可。 ...刷新代码框链接以查看更新的代码...

明白了，谢谢你能告诉我如何在我的滑块图像上添加文本我在我的 image-src div 中使用段落标签，但它不起作用

我在图片上添加了一个按钮和一些文字...刷新代码框以查看更新...现在它的全部内容都是关于坐在图片上的内容的样式...请继续前进，做你自己的风格.. thx..