Not working perfectly with tabs

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))

@foreach ($offer->getMedia as $key => $attachment)

@endforeach

@foreach ($offer->getMedia as $key => $attachment)

@endforeach

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.**


Start from the supplied tab markup and the document-ready initialization, checking that the request and offer selectors match the rendered elements and that both sliders are initialized when their tabs are shown. Reproduce the switch between tabs and verify that each main carousel displays all images and that its navigation controls the matching slider.

Written by the indexing model from the issue text.