adding attributes to elements inside carousel builder

code-block.js

jQuery(document).ready(function($) {

  let carouselSelector = '.my-carousel';   /* change to class of your carousel element */
  
  /* get the flickity instance to control the carousel */
  let $carousel = $(carouselSelector).find($(carouselSelector).children().data('carousel'));
  let flkty = $carousel.data('flickity');
  
  
  // 1. Update aria-current on image as carousel moves -----
  $carousel.on('select.flickity', function(event, index) {
    const $activeSlide = $(flkty.selectedElement);
    const $allSlides = $(flkty.slider.children);

    $allSlides.find('img')
      .removeAttr('aria-current')

    $activeSlide.find('img').first()
      .attr('aria-current', 'true');
  });

  
  // 2. Add image x of y aria-labels -----

  const totalSlides = flkty.cells.length;
  $(flkty.slider.children).each(function(i) {
    $(this).find('img').first().attr('aria-label', `Image ${i + 1} of ${totalSlides}`);
  });

  

  // 3. Play / Pause button -----
  const $button = $('.my-button'); /* change to class of your play/pause button element */
  
  let isPaused = false;

  $button.on('click', function(e) {

    e.preventDefault();

    if (isPaused) {
      flkty.playPlayer();
      $(this).attr('aria-pressed', 'false');
    } else {
      flkty.pausePlayer(); 
      $(this).attr('aria-pressed', 'true');
    }

    isPaused = !isPaused;
  });

});