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

user_12603228 0
Viewed 184

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>

swiper.js gif html ajax javascript
1 Answers

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>

user_143273870
Related