How can I start an image animation from the beginning when it appears in my slider?

Question

I have made a slider using swiper.js, I want the gif to start animating from the beginning whenever we go to that slide. I tried it using ajax load but the gif ain't reloading!

swiper.on('slideChange', function() {
  $('#ts .gif').load(document.URL + '#ts .gif');
});

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide d-flex" id="da">
      hello
    </div>
    <div class="swiper-slide" id="ts">
      <div>
        <h3><strong>Digital Agency Support</strong></h3>
      </div>
      <div class="gif">
        <img src="dm.gif" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

Seems like [lazy loading](https://www.tutorialdocs.com/tutorial/swiper/api-lazy-loading.html) would do. — isherwood, Oct 21 '20 at 13:30
Does this answer your question? [Stopping GIF Animation Programmatically](https://stackoverflow.com/questions/3688460/stopping-gif-animation-programmatically) — Marc, Oct 21 '20 at 13:49
Marc Not sure if that answer my question, I could not make that work, anyway got my answer, thanks. — Ayan, Oct 21 '20 at 14:25

score 3 · Accepted Answer · answered Oct 21 '20 at 13:45

Sadly there is no way to interact with gifs as far as I know. One way to achieve what you want is to replace the gif with a static image, as long as it is not in focus. Something like:

swiper.on('slideChange', function() {
  if (swiper.activeIndex == 1 ) {
        document.getElementById("gif").src = "gif.gif";
    }else{
        document.getElementById("gif").src = "image.png";
    }
});

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide d-flex" id="da">
      hello
    </div>
    <div class="swiper-slide" id="ts">
      <div>
        <h3><strong>Digital Agency Support</strong></h3>
      </div>
      <div class="gif">
        <img id="gif" src="image.gif" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

How can I start an image animation from the beginning when it appears in my slider?

1 Answers1