I have an index page and i load different single pages via ajax into the index page layout. Every single page has a flickity slider, I can control (prev/next) all slider individually but i have a problem with the captions. I only get the caption information from one slider and printed to every slideshow, but how can I get the right caption for each slider?
i have this to get the caption
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 )
});
});
and this
<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>
any ideas?
I have a second problem, loading the slider via ajax the slider looks for one or two seconds a bit destroyed, is there a possibilty to avoid this?
thanks alot!
