Swiper slider com animações gif

Muitos já devem conhecer o swiperjs, logo não irei explicar do que se trata, mas compartilhar uma solução para quem precisa usar animações gif junto com outros sliders.

Por padrão o swiper exibe imagens, blocos html tudo de forma impressionante, mas infelizmente quando usamos animações gif, ele não tem como saber o tempo da animação gif, além do navegador sempre usar o gif em cache. Logo, se você enviar gifs e configurar um tempo padrão e o gif for maior vai pular para o próximo slider antes ou depois. E se você passar o slider, seja pela paginação ou botões de anterior-próximo, também terá problemas, pois o navegador usa o gif em cache.

Como resolver?
- Gerar uma nova url, para evitar o cache
- Configurar o tempo do slider com animações gif individualmente

Solução

JS:

var banners = new Swiper ('#banner-rotate-6', {
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            slidesPerView: 1,
            slidesPerGroup: 1,
            //spaceBetween: 26,
            pagination: {
                el: '#banner-rotate-pagination-6',
                clickable: true
            },
            preventClicks: false,
            // reload gif
            on: {
                transitionStart: function (index, element) {
                    var img_type = $('#banner-rotate-6 .swiper-slide-active').attr("data-img-type");

                    if(img_type == 'gif'){
                        var imgID = $('#banner-rotate-6 .swiper-slide-active').attr("data-img-id");
                        var src = $('#'+imgID).attr('data-src')+"?" + new Date().getTime();
                        $('#'+imgID).attr('src', src);
                    }
                }
            }
        });

Basicamente no js, sempre que começar a transição, seja pelo tempo ou interação do usuário, gerarmos um novo url para o gif.

html:

<div class="swiper-container" id="banner-rotate-7">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-swiper-autoplay="4000" data-img-id="jpg-695" data-img-type="jpg">
            <img id="jpg-695" data-src="img1.jpg" src="img1.jpg" width="470" height="156">
        </div>
        <div class="swiper-slide" data-swiper-autoplay="12920" data-img-id="gif-700" data-img-type="gif">
            <img id="gif-700" data-src="img2.gif" src="img2.gif" width="470" height="156">
        </div>
        <div class="swiper-slide" data-swiper-autoplay="4000" data-img-id="jpg-699" data-img-type="jpg">
            <img id="jpg-699" data-src="img3.jpg" src="img3.jpg" width="470" height="156">
        </div>
    </div>
    <!-- Add Pagination -->
    <div id="banner-rotate-pagination-7" class="swiper-pagination"></div>
</div>

Aqui temos:

data-swiper-autoplay="x", que é onde definimos o tempo da animação gif.

data-img-id="x" id para a imagem, não pode ser igual, pode ser usado o id AUTO_INCREMENT do banco de dados e tem que ser igual o img id="x"

data-img-type="x" tipo de imagem: jpg, gif, png

data-src="x" link para a imagem, igual ao src="x"

Todos esses dados pode ser retornados do banco de dados, basta ao enviar o arquivo, salvar a extensão e o tempo do gif.

Função PHP calcular tempo gif

// returns length of time to display a gif image/animation once
// must be multipled by getGIFIterations to determine total duration
function getGIFDuration($image_filename)
{
    // see http://www.w3.org/Graphics/GIF/spec-gif89a.txt for more info
    $gif_graphic_control_extension = "/21f904[0-9a-f]{2}([0-9a-f]{4})[0-9a-f]{2}00/";
    $file = file_get_contents($image_filename);
    $file = bin2hex($file);

    // sum all frame delays
    $total_delay = 0;
    preg_match_all($gif_graphic_control_extension, $file, $matches);
    foreach ($matches[1] as $match) {
        // convert little-endian hex unsigned ints to decimals
        $delay = hexdec(substr($match,-2) . substr($match, 0, 2));
        if ($delay == 0) $delay = 1;
        $total_delay += $delay;
    }

    // delays are stored as hundredths of a second, lets convert to seconds
    $total_delay *= 10;

    return $total_delay-1000;
}