Not working perfectly with tabs

[Abdullah-Iftikhar]

I am trying to use sliders with tabs on my page. I have two tabs, and each tab contains its own set of images. The slider works correctly for the active tab, but when I switch to the other tab, it only displays the last image from the loop and does not function correctly with the slider and its navigation.

I suspect the issue may be with the jQuery not being applied to the second tab. How can I use custom classes to ensure that both sliders and their navigation work properly for each tab?

This is for request media and offer media. I have attached HTML code block with Jquery block as well

 @if(isset($offer->getMedia) && count($offer->getMedia))
  <div class="carousel carousel-offer-media-main"
       data-flickity='{"pageDots": false }'>
      @foreach ($offer->getMedia as $key => $attachment)
          <div class="carousel-cell">
              <img src="{{ my_asset($attachment->file_name) }}">
          </div>
      @endforeach
  </div>
  <div class="carousel carousel-offer-media-nav"
       data-flickity='{ "asNavFor": ".carousel-offer-media-main", "contain": true, "pageDots": false }'>
      @foreach ($offer->getMedia as $key => $attachment)
          <div class="carousel-cell">
              <img src="{{ my_asset($attachment->file_name) }}">
          </div>
      @endforeach
  </div>
@else
  <div class="carousel carousel-main">
      <img
          src="{{ my_asset('assets/front/default-request.png') }}"
          class="max_wd"
          alt="">
  </div>
@endif

I have attempted to attach the initialization to the document, like this:

$(document).ready(function() {
    // Initialize the first slider for request media
    $('.carousel-request-media-main').flickity({
        contain: true,
        pageDots: false,
        prevNextButtons: true,
        wrapAround: true
    });

    $('.carousel-request-media-nav').flickity({
        asNavFor: '.carousel-request-media-main',
        contain: true,
        pageDots: false,
        prevNextButtons: true,
        wrapAround: true
    });

    // Initialize the second slider for offer media
    $('.carousel-offer-media-main').flickity({
        contain: true,
        pageDots: false,
        prevNextButtons: true,
        wrapAround: true
    });

    $('.carousel-offer-media-nav').flickity({
        asNavFor: '.carousel-offer-media-main',
        contain: true,
        pageDots: false,
        prevNextButtons: true,
        wrapAround: true
    });
});

This is also not working.

[DaveTTS]

I have exactly the same issue using a bootstrap tab control. Flickity does not work when you switch between tabs, even trying to initialize between the tabs does not work. If you resize the browser then it starts working, but there seems to be no way that I can see to use this in a tab control. Is this project even still active, as there does not appear to be any commits for over a year? I was going to buy a commercial license, but if it cannot be using within a tab control it won't work for me unfortunately.