React-slick: Slider single slide onClick event ES6

[Riccardo-Zanutta]

Hello, I've some troubles attaching a onClick event to the slides.
I didn't notice any advise in the console.
I tried to make also: {() => console.log('ehi')} inside the onClick handler but didn't work.
Any clue about how to resolve?
Thanks

[xuchaobei]

I also meet this issue. Really a confusing thing while v0.12 works fine.

[trailingend]

@Riccardo-Zanutta I am experiencing the same issue. However for now it works for me to add event listener to any element inside the wrapper div. E.g. if you write, the event listener will run

<div className="single-artwork-slide">
  <div data-image={"http://unsplash.it/650/400"} onClick={this.changeMainImage} style={{backgroundImage: url(${urlYouDontCare})}}></div>
</div>

[akiran]

Are you facing this issue on mobile or desktop browser ?

[trailingend]

desktop, hav'nt test on mobile yet

[Riccardo-Zanutta]

@trailingend1992 thanks! Moving the event listener to any element inside the div works. Facing the issue on desktop browser (chrome last versione for mac) , haven't tested on mobile yet.

[xuchaobei]

@akiran both on mobile and desktop.

[Eschon]

I'm having the same problem

Here's a fiddle with react-slick 0.12.1 that works:
https://jsfiddle.net/Eschon/322u60ae/1/

And here's another one with 0.13.1 that doesn't:
https://jsfiddle.net/Eschon/322u60ae/2/

[akiran]

Recent addition of focusOnSelect is overriding the click handler.
I will fix this soon

[HunterManhart]

I am also having trouble with the onClick event. My handler function calls with onMouseOver, but not with onMouseDown and onClick. I tried making focusOnSelect: false, but that didn't change anything.

I have only tested this on desktop in Chrome.

Edit: OnMouseUp works

[carlosloaiza21]

i had the same problem but i resolved whit this way:
the wrapper has the onclick and i generate a reference:

then: i get the index in seleccion metod:

because i have the reference i can have access to all the slick context

i hope that this will ok for you

[renerubio]

I have a solution with the Lifecycle "componentDidMount" i know is not the ideal but works!

1. the item slide : <img className="class-img" src={myUrl} data-id={dataId} />);
2. in componentDidMount : this.handlerBindClickImage();
3. in handlerBindClickImage : $(".class-img").on("click",(e)=>{ this.myHandler(e.target.dataset.id) });

[vaibhavi3t]

I have the same issue with the latest version 0.23.2 . but working fine with 0.14.11 for me.

[TinyChou]

I just bind an onClick listener to every item dom element.But when beforeChange event fired, we should disable the item onClick and then afterChange recover the listener.

const SimpleSlider = (props) => {
  const { onChange, imageUrlsList, onItemClick } = props;
  const [index, setIndex] = useState(0);
  const [clickable, setClickable] = useState(true);
  const onSliderChange = (newIndex) => {
    setClickable(true);
    setIndex(newIndex);
    onChange(newIndex);
  };
  const options = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,

    centerPadding: 0,
    centerMode: false,
    afterChange: onSliderChange,
    beforeChange: () => setClickable(false),
  };

  return (
    <Slider {...options}>
      {
        imageUrlsList.map((image, idx) => (
          <div className='slider-container'>
            <img onClick={() => clickable && onItemClick(idx) } className='slider-img' width='100%' height='500px' src={image} alt='' />
          </div>
        ))
      }
    </Slider>
  );
};

hope can help u