Add captions

Following Flickity’s guide to add captions I can’t seem to get the code to work can anyone shed some light.
https://codepen.io/desandro/pen/dPdVNM
I am using “$caption.text( flkty.selectedElement.children[0].alt )” to target the alt tag as the caption in the children of the div .gallery-cell this works on the above codepen but not in my test. I have the <p class=”caption”> </p> inserted into the plugins shortcode php file.

flickity.shortcode.js code:

var $carousel = jQuery('.flickity-shortcode').flickity({
  autoPlay: false,
cellAlign: 'center',
contain: true,
imagesLoaded: true,
wrapAround: true
    
});

 
var $caption = jQuery('.caption');
// Flickity instance
var flkty = $carousel.data('flickity');

$carousel.on( 'select.flickity', function() {
  // set image caption using img's alt
  $caption.text( flkty.selectedElement.children[0].alt )
   
});

Resultant code:

<div class="elementor-shortcode"><div class="gallery flickity-shortcode flickity-enabled is-draggable" id="slider-”portfolio”" tabindex="0">
          
          
          <div class="flickity-viewport" style="height: 1106px;"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="gallery-cell is-selected" style="position: absolute; left: 0%;">
          
          <img src="http://mydomain.com/wp-content/uploads/2019/08/page2.jpg" alt="three pages layout" data-lazy-loaded="true" style="display: inline;"><noscript><img src='http://mydomain.com/wp-content/uploads/2019/08/page2.jpg'  
          alt='three pages layout'></noscript>
          </div><div class="gallery-cell" style="position: absolute; left: 100%;">
          
          <img src="http://mydomain.com/wp-content/uploads/2019/11/nbd__darwin_3.jpg" alt="Darwin" data-lazy-loaded="true" style="display: inline;"><noscript><img src='http://mydomain.com/wp-content/uploads/2019/11/nbd__darwin_3.jpg'  
          alt='Darwin'></noscript>
          </div><div class="gallery-cell" style="position: absolute; left: 200%;">
          
          <img src="http://mydomain.com/wp-content/uploads/2019/11/coke2.jpg" alt="" data-lazy-loaded="true" style="display: inline;"><noscript><img src='http://mydomain.com/wp-content/uploads/2019/11/coke2.jpg'  
          alt=''></noscript>
          </div></div></div><ol class="flickity-page-dots"><li class="dot is-selected"></li><li class="dot"></li><li class="dot"></li></ol><button class="flickity-prev-next-button previous" type="button" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-prev-next-button next" type="button" aria-label="next"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button></div><p class="caption">&nbsp;</p> </div>

• This topic was modified 6 years, 3 months ago by stephenkdesign.