Change image before slider animation

[LoganSimonsen]

Sorry, this is more of a question than an issue, but I'm wondering if there is a way to change the image on button click and have the image change before the slider animation happens? I've tried the following:

...
const [image, setImage] = useState(0);
...
<AwesomeSlider
        animation="cubeAnimation"
        cssModule={AwesomeSliderStyles}
        id="awesome"
        onTransitionRequest={() => setImage(newImage)}
        onTransitionStart={() => setImage(newImage)}
        onTransitionEnd={() => setImage(newImage)}
        transitionDelay={2000}
      >
       <div>
          <img src={image} alt="" />
        </div>
        <div>stuff</div>
      </AwesomeSlider>

The image successfully changes after the animation occurs, but I'd like it to change before the slider animation. I realize you may not have had this kind of thing in mind when you built this, so I understand if it's not possible given the current implementation.

[rcaferati]

Hi @LoganSimonsen, thanks for raising it. I'll check it later but this actually looks like a bug. The image should change on the onTransitionRequest hook, something could be preventing the re-render.

If you want a quick-solve you could access the current slide via the slider object returned onTransitionRequest and change the image src to your new image. Not optimal, but it would work.

Something like:

<AwesomeSlider
    onTransitionRequest={({currentSlide, currentIndex}) => {
      if(currentIndex === ...) {
        currentSlide.querySelector("img").src = ...;
      }
    }}
>
  <div>
    <img src={...} alt={...} />
  </div>
  <div>stuff</div>
</AwesomeSlider>

[LoganSimonsen]

That didn't quite work and I think it has something to do with a react bug when changing the src on an image element in JSX... anyways I was able to work around it like this:

<AwesomeSlider
        animation="cubeAnimation"
        cssModule={AwesomeSliderStyles}
        id="awesome"
        onTransitionRequest={({ currentSlide, currentIndex }) => {
          if (currentIndex === 0) {
            currentSlide.querySelector(".img2").style.display = "block";
            currentSlide.querySelector(".img1").style.display = "none";
          }
        }}
      >
        <div>
          <img src={image} alt="" class="img1" />
          <img
            src={surprised}
            alt=""
            class="img2"
            style={{ display: "none" }}
          />
        </div>
      </AwesomeSlider>

Here is what it looks like so far https://clever-hoover-ff5e8b.netlify.com/

[rcaferati]

Neat @LoganSimonsen! An onOrganicArrowMouseOver could also help with the animation change as you could make it look right or left depending on what's being hovered. Is this project on a public repo?