rcaferati / react-awesome-slider

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱

Home Page:https://fullpage.caferati.me

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how to hide arrows for single image ?

varunsga opened this issue · comments

Hi I am getting difficulties hiding arrows for single image. Is it possible to hide arrow for single image with this library ?

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 gif - bullets show/hide

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.