インデックス ページがあり、インデックス ページ レイアウトに ajax を介してさまざまな単一ページを読み込みます。すべての単一ページには、フリック スライダーがあり、すべてのスライダーを個別に (前/次) 制御できますが、キャプションに問題があります。1 つのスライダーからキャプション情報を取得してすべてのスライドショーに出力するだけですが、各スライダーに適切なキャプションを取得するにはどうすればよいですか?
キャプションを取得するためにこれを持っています
var $gallery = $('.gallery').flickity({
cellSelector: '.gallery-cell',
imagesLoaded: true,
percentPosition: false,
wrapAround: true,
pageDots: false,
lazyLoad: true,
lazyLoad: 1,
imagesLoaded: true
});
var $caption = $('.caption');
var flkty = $gallery.data('flickity');
$gallery.on( 'cellSelect' , function() {
var element = flkty.selectedElement;
var cap = $(element).children().attr("alt");
console.log (cap);
$caption.text( cap )
});
});
この
<div class="gallery-cell ">
<img class="gallery-cell-image"
data-flickity-lazyload="http://i.imgur.com/8lEJtbg.jpg" alt="grapes" />
</div>
<div class="gallery-cell ">
<img class="gallery-cell-image"
data-flickity-lazyload="http://i.imgur.com/ERMbVdn.jpg" alt="raspberries" />
</div>
何か案は？
2 つ目の問題があります。スライダーを ajax 経由で読み込むと、スライダーが 1 ～ 2 秒間少し破壊されているように見えますが、これを回避する可能性はありますか?
どうもありがとう！