Swiper pagination shows wrong

[TrendBlend]

Hello, I'm creating a popup after a product is added to cart. When multiple items are added to the cart at the same time, I'm trying to create a carousel within the popup. This is currently working but the pagination shows on top of the carousel, instead of underneath the carousel. How can I get the pagination to show under the carousel instead of on top. URL: Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows

The carousel popup is there when you add multiple different variants to cart at the same time:

IMG of issue:

Code:

    // Create the swiper container if more than one item
    const swiperContainer = document.createElement('div');
    swiperContainer.classList.add('swiper-container');

    const swiperWrapper = document.createElement('div');
    swiperWrapper.classList.add('swiper-wrapper');

    // Loop through items and add them to the swiper wrapper
    updatedItems.forEach(function(item) {
      console.log("Fetching details for item:", item);

      // Fetch the variant details using the variant ID from itemsToAdd
      getVariantById(item.id).then(variant => {
        console.log("Fetched variant:", variant);

        if (!variant) {
          console.error(`No variant found for ID: ${item.id}`);
          return;
        }

        console.log(variant);
        // Extract product details
        const productTitle = variant.name;
  const productImage = variant.featured_image 
  ? variant.featured_image.src 
  : (document.querySelector('.product__media img') ? document.querySelector('.product__media img').src : 'default_image_url');

        let comparePrice = (variant.compare_at_price / 100).toFixed(2);
        const quantity = item.quantity;

        // Create HTML for this item to add to the swiper
        const itemElement = document.createElement('div');
        itemElement.classList.add('swiper-slide'); // Each product gets its own slide
        itemElement.classList.add('cart-popup-slide');
        let productPrice;
                  if (discount == 0) {
           productPrice = (variant.price / 100).toFixed(2);     
} else {
                          if (comparePrice == 0) {
          comparePrice = (variant.price / 100).toFixed(2);
                          }
 productPrice = (Math.ceil(variant.price / 100) - ((discount * (variant.price / 100) * 100) / 100)).toFixed(2);
}


    
        
        if (comparePrice != 0) {
        itemElement.innerHTML = `
          <div class="cart-popup-item">
            <img src="${productImage}" alt="${productTitle}" width="100" height="100" class="cart-popup-item-img">
            <div class="cart-popup-item-details">
              <h4>${productTitle}</h4>
              <p>Quantity: ${quantity}</p>
              <p><span class="popup-compare-price">{{ country_currency_symbol  }}${comparePrice}</span> <span class="popup-product-price">{{ country_currency_symbol  }}${productPrice}</span></p>
            </div>
          </div>
        `;
        } else {


          itemElement.innerHTML = `
          <div class="cart-popup-item">
            <img src="${productImage}" alt="${productTitle}" width="100" height="100" class="cart-popup-item-img">
            <div class="cart-popup-item-details">
              <h4>${productTitle}</h4>
              <p>Quantity: ${quantity}</p>
              <p><span class="popup-product-price">{{ country_currency_symbol  }}${productPrice}</span></p>
            </div>
          </div>
        `;
        }




                // Add each item element to the swiper wrapper (this will be in separate slides)
        swiperWrapper.appendChild(itemElement);

        
// Append navigation buttons for the swiper
const swiperNavPrev = document.createElement('div');
swiperNavPrev.classList.add('swiper-button-prev');
swiperContainer.appendChild(swiperNavPrev);

const swiperNavNext = document.createElement('div');
swiperNavNext.classList.add('swiper-button-next');
swiperContainer.appendChild(swiperNavNext);

// Append the swiper wrapper inside the swiper container
swiperContainer.appendChild(swiperWrapper);

// Append the pagination (dots navigation) after swiper wrapper
const swiperPagination = document.createElement('div');
swiperPagination.classList.add('swiper-pagination');
swiperContainer.appendChild(swiperPagination);  // Place this after swiperWrapper

        
// Add the swiper container to the popup content
popupContent.appendChild(swiperContainer);



        
const swiper = new Swiper(swiperContainer, {
  slidesPerView: 1,   // Show 1 product at a time by default
  centeredSlides: true,  // Center the active slide
  loop: true,         // Enable looping of slides
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
    pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    0: {
      slidesPerView: 1,  // 1 product on mobile
      spaceBetween: 10,  // Reduced space on mobile
    },
    750: {
      slidesPerView: 1,  // 1 product on tablet
      spaceBetween: 10,  // Keep some space
    },
    1024: {
      slidesPerView: 1,  // 1 product on desktop
      spaceBetween: 20,  // Normal space on desktop
    },
  },

});

[Moeed · Accepted solution]

Hey @TrendBlend 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.popup-item-info .swiper-container {
    display: flex !important;
    flex-flow: column-reverse !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed