3

Desculpem se já tiver esse tópico, procurei e não achei nada. Tenho o código abaixo onde eu preciso que o carousel só troque para o próximo quando terminar o gif. Seguindo a image1 depois a image2 e quando ele volte para o gif ele seja iniciado normal. O que sempre acontece é que o GIF ele segue o tempo de troca normal, então nunca termina de rodar o gif e ja troca pro próximo. o gif pode ter um tempo que altere, por isso não posso só ajustar o tempo que vai ficar cada slide. Tem alguma outra forma de fazer isso? ps: Utilizo o carousel com 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>
6
  • Se desistir e quiser só controlar a velocidade do slider acho que tenho uma resposta pra vc.
    – hugocsl
    Commented 28/05/2019 às 18:50
  • você diz: "o gif pode ter um tempo que altere", você recebe esse tempo por parametro? Commented 28/05/2019 às 19:22
  • Danielle quis dizer que pode ser gifs diferentes com tempo de duração diferentes, não recebo o tempo em si como parâmetro.
    – JoãoLessa
    Commented 29/05/2019 às 12:46
  • @hugocsl Não posso só controlar a velocidade do slider pq o gif pode não ser o mesmo sempre, então teria que verficar o tempo do gif em si, ou algo parecido.
    – JoãoLessa
    Commented 29/05/2019 às 12:49

1 Resposta 1

1

Pra responder o que eu resolvi, foi com java script onde sempre que terminasse um gif e ele fosse trocar o gif, eu tiro o source e coloco de volta. Desta forma o gif sempre vai estar no início.

Eu utilizo o Cycle2 pra fazer o carousel com os gifs e pra fazer o que eu falei utilizo o seguinte código: Esse código basicamente para o carousel e pega o source que é uma imagem/gif e troca pra vazio e depois adiciona o source de volta no elemento, aí ele continua o 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');
        });

});`
2
  • Poderia dar exemplos concretos de como é feito isso no JS?
    – Woss
    Commented 4/12/2019 às 12:50
  • Você pode editar essa resposta e deixá-la completa por si só, não precisa de duas respostas.
    – Woss
    Commented 4/12/2019 às 13:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .