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

Question

I am new in react and trying to use react awsome slider its working fine but i want to add button and text on slider image but dont know how to do that.

Here is my slider component

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>

    )
  }
}

I would really appreciate if someone can help. thanks

have you tried using `customContent` props as mentioned in the [doc](https://github.com/rcaferati/react-awesome-slider) — Harikrishnan, Jun 16 '20 at 12:43
@Harikrishnan yes i have tried but it didnt work ```const welcome = 'welcome' return (
``` this is how i did it — dhananjay, Jun 16 '20 at 13:24

score 3 · Accepted Answer · answered Jun 16 '20 at 13:31

3

Set organicArrows prop to false and provide buttonContentRight and buttonContentLeft. It will work.

Working demo - it shows custom text instead of arrow. You can add a button etc.

Code snippet

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

answered Jun 16 '20 at 13:31

gdh

13,114
2
16
28

i dont want to change arrow just want to add another button and text plz checkout this link https://www.microsoft.com/en-in/?ranMID=24542&ranEAID=je6NUbpObpQ&ranSiteID=je6NUbpObpQ-zius4J5HiRwVJN61K5LfyA&epi=je6NUbpObpQ-zius4J5HiRwVJN61K5LfyA&irgwc=1&OCID=AID2000142_aff_7593_1243925&tduid=%28ir__fy9bswtibwkftm6ckk0sohzz0v2xnbvdeddjyeoe00%29%287593%29%281243925%29%28je6NUbpObpQ-zius4J5HiRwVJN61K5LfyA%29%28%29&irclickid=_fy9bswtibwkftm6ckk0sohzz0v2xnbvdeddjyeoe00 like learn more button and text on this link – dhananjay Jun 16 '20 at 14:02
1

you can use any element/text/styles you want... I have updated the code in the codesandbox and have made some styles for you .... just extend the styles based on your needs.... refresh the codesandbox link to see the udpated code... – gdh Jun 16 '20 at 14:11
got it thanks can you plz tell me how to add text also on my slider image i am using paragraph tag inside my image-src div but its not working – dhananjay Jun 16 '20 at 14:20
i have added a button and some text on the image ...refresh the codesandbox to see the updates... now its all about the styling of the the content sitting on the image...pls take it forward and do your own styles.. thx.. – gdh Jun 16 '20 at 14:47

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

1 Answers1