How to show data from multiple sliders

[WouterLangendoen]

At the moment my flickity slider only shows information about the first slider. Not for my second slider. How can I adjust my code, so it also shows my second slider information?

Here is my javascript.

initFlickity(self) {
    var $carousel = $('.carousel');
    //flkty = $carousel.data('flickity');

    if ($('.carousel-cell', $carousel).length > 1) {
      $carousel.flickity({
        autoPlay: 10000,
        imagesLoaded: true,
        setGallerySize: true,
        wrapAround: true,
        // prevNextButtons: true
      });
    }
    else {
      $('.carousel-cell').addClass('single-slide');
    }

     // self.getCaseData();
     // self.getSlideCaption();

    $carousel.on('select.flickity', function () {
      var flkty = $(this).data('flickity');
      // var captionPhotographer = flkty.selectedElement;
      self.getCaseData()
      self.getSlideCaption();
    });
   },

  carouselNavListener() {

    $('.next-case').on('click', function (e) {
      $('.carousel--cases').flickity('next');
      e.preventDefault();
    });

    $('.prev-case').on('click', function (e) {
      $('.carousel--cases').flickity('previous');
      e.preventDefault();
    });

  },

  getSlideCaption() {
    var $activeCaptionSlide = $('.carousel--slider .is-selected'),
      captionPhoto = $activeCaptionSlide.data('photo'),
      captionPhotographer = $activeCaptionSlide.data('photographer');

    console.log(captionPhoto);
    console.log(captionPhotographer);

    $('#article-caption').text(captionPhoto + captionPhotographer);

  }

[desandro]

To handle behavior for each carousel separately, you can initialize Flickity separately via .each()

$('.carousel').each( function( i, carousel ) {
  var $carousel = $( carousel );
  $carouse.flickity({...});
});