WooCommerce Swiper in AJAX Mini-Cart

I’m trying to create a slider inside the mini cart containing product’s cross sales. For example, product A has cross sale items 1, 2 and 3. Product B has cross sale items 4, 5 and 6, so when you add product A to the cart, inside your mini cart you should see a slider containing products 1, 2 and 3. When you also add product B, you should see a slider containing products 1 to 6. And if you remove product A, the slider should display only products 4, 5 and 6. Now the problem I’m facing is that I can’t init the Swiper.. In my app.js I have the basic swiper init:

const miniCartSwiper = new Swiper('.mini-cart-slider', {
  direction: 'horizontal',
  loop: true,
  slidesPerView: 1,
  spaceBetween: 0,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

In my PHP I have a basic foreach with the products. The problem is that when I try to console log my .mini-cart-slider, the length is always 0 and JS doesn’t find that element, even though is there. I suspect that is because is added after a product is added to the cart. So how should I init my Swiper? And how should I handle the changes in the slides? I should reInit it on every change on the mini cart..