how to hide arrows for single image ? about react-awesome-slider HOT 1 OPEN

Hi. If you still consider that feature, I'm afraid that it's not possible within provided version unless you accept big cons of workaround mentioned below.

I've tried to attach to organicArrows stateful variable and change it on particular slide:

import React, { useState, Component } from 'react';

const [isActive, setActive] = useState(true);

<AutoplaySlider
      organicArrows={isActive}
      onTransitionEnd={e => {
         if (e.currentIndex === 1) {
            setActive(false);
         }
   }}
>

but slider hangs out as soon as setActive(false) is called . I've tested that approach on bullets prop and for that particular prop, slider works as intended (check gif below)

bullets behaviour preview

You can achieve small progress(no arrows at given slide & working slider) by doing reverse thing, that is

• setting isActive as false when defining stateful variable

const [isActive, setActive] = useState(false);

• changing onTransitionEnd

onTransitionEnd={e => {
   if (e.currentIndex === 1) {
         setActive(false);
      } else {
         setActive(true);
      }
   }
}

but you will face 2 problems:

• you won't see default arrows on the first slide (onFirstMount won't help)
• slide where you don't want to have default arrows will work but ONLY for the first time. On the second loop (or if you go backwards), once you call setActive(false), slider stops working again

So with that package you can achieve requested behaviour but only once and with poor side effect unless you dive into slider code, debug what's going on with organicArrows and fix it to fit your needs.

from react-awesome-slider.