Carousel change only after gif is finished

Asked

Viewed 98 times

3

I’m sorry if I already have that topic, and I looked and I found nothing. I have the code below where I need Carousel to only switch to the next one when the gif is finished. Following image1 after image2 and when it goes back to the gif it starts normal. What always happens is that the GIF it follows the normal exchange time, so it never finishes running the gif and already switches to the next one. gif can have a time that changes, so I can’t just adjust the time that each slide will be. Is there any other way to do this? ps: I use Carousel with bootstrap.

 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="image.gif" alt="">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image1.jpg" alt="">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image2.png" alt="">
    </div>
  </div>
</div>
javascript jquery html5 css3

  • Starting points (server side): http://www.imagemagick.org/discourse-server/viewtopic.php?t=23276 - https://justinsomnia.org/2006/10/gif-animation-duration-calculation/

  • If you give up and just want to control the slider speed I think I have an answer for you.

  • you say, "gif can have a time that changes," you get that time per parameter?

  • Danielle meant that it can be different gifs with different duration time, I do not receive the time itself as parameter.

  • @hugocsl I can’t just control the slider speed because gif might not be the same forever, so I’d have to watch the gif time itself, or something like that.

  • People I didn’t put there, but maybe it’s relevant, this is an HTML that is part of a web system in JAVA. A bunch of banners that I receive images and gifs and it keeps running, only when it is a GIF happens the described.

Show 1 more comment

1 answer

1

To answer what I solved, it was with java script where whenever I finished a gif and he went to change the gif, I take the source and put it back. This way the gif will always be at the beginning.

I use Cycle2 to make Carousel with gifs and to do what I said I use the following code: This code basically stops Carousel and takes the source that is an image/gif and switches to empty and then adds the source back into the element, then it continues Carousel.

`$('.cycle-slideshow').on('cycle-before', (event, opts) => {`
   let promise= new Promise((resolve,reject)=>{
    $('.cycle-slideshow').cycle('pause');
    resolve(true);
    });       
    promise.then((resolve)=>{
        let lista =  $(event.currentTarget).find('img');
        for(let i = 0; i < lista.length; i++) {
            let el = lista[i];
            let x = el.src;
            el.src = '';
            el.src = x;
        }
    }).then((resolve)=>{
        $('.cycle-slideshow').cycle('resume');
        });

});`

  • Could give concrete examples of how this is done in JS?

  • You can edit this answer and make it complete by itself, you don’t need two answers.

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.