Info

07 jan 15h09

Swiper slider com animações gif

  • URL Curta:
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;
}

© MNDTI - Tecnologia e Informação. Todos Direitos Reservados. Política de privacidade.