Por padrão, o seletor jQuery de slides
do Cycle2 é > img
(seleciona apenas imagens diretamente filhas do .cycle-slideshow
).
Você precisa alterá-lo para corresponder com a sua marcação. O picturefill utiliza span
s para cada imagem responsiva, então adicione este atributo ao container do Cycle2:
data-cycle-slides="> span"
Fiddle (sim, utilizei as mesmas imagens duas vezes)
Desta forma, todos os span
s diretamente filhos do .cycle-slideshow
serão utilizados como slides. Aqui está a marcação utilizada para a demo:
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-speed="200"
data-cycle-slides="> span"
>
<span data-picture data-alt="Uma foto">
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/small.jpg"></span>
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></span>
</span>
<span data-picture data-alt="Uma foto">
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/small.jpg"></span>
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="http://scottjehl.github.io/picturefill/external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></span>
</span>
</div>
Obs.: não estou incluindo fallbacks para JS desabilitado nem IE antigo para deixar a demo mais simples. Adicione-os caso necessário.
NOTA: esta resposta se aplica à versão 1.2.x do Picturefill, visto que esta era sua versão mais recente quando esta resposta foi originalmente escrita.
O Picturefill a partir da versão 2.0 utiliza o elemento <picture>
, ou também <img>
com atributos srcset
e sizes
. Para que o Cycle funcione com o Picturefill 2.x, você terá então que adaptar o seletor de slides do Cycle para > picture
ou > img
dependendo da sintaxe adotada.