Move pagination under carousel

[TrendBlend]

Hello, my swiper pagination stays above my carousel in the cart popup i’m trying to create for my volume bundle offer. URL: https://interiorglows.com/products/glowcurtain-400-led-lights

It currently shows like this:

 and I want the pagination to be under the item information. 

 It shows like that when you add multiple products to cart at the same time.

[Arif_Shopidevs]

You can add this css to show the pagginate in bottom

#popup-item-info .swiper-pagination {
    position: absolute!important;
}

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App
Hi @TrendBlend  Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Function to move pagination
    function movePagination() {
        const existingPagination = document.querySelector(".swiper-pagination.swiper-pagination-clickable");
        const newPaginationContainer = document.querySelector(".swiper-pagination:not(.swiper-pagination-clickable)");

        if (existingPagination && newPaginationContainer) {
            newPaginationContainer.appendChild(existingPagination);
            observer.disconnect(); // Stop observing after moving
        }
    }

    // Observe changes in the document for dynamically inserted pagination
    const observer = new MutationObserver(movePagination);
    observer.observe(document.body, { childList: true, subtree: true });

    // Run once in case the pagination is already available
    movePagination();
});
</script>

And here is result

Hope my solution will help you resolve the issue.Best regards,
Richard | PageFly

[TrendBlend]

Hello @PageFly-Richard  it looks like this with those changes: CANNOT UPLOAD IMAGE IDK WHY I will send the image in a respond

Is it not easier to edit this using the javascript that creates the carousel or css, I tried doing so but I did not manage to solve the issue. Important part of Code for creating carousel:

    // 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 : '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 = ((variant.price / 100) - (discount*((variant.price).toFixed(2)/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">${currencySymbol}${comparePrice}</span> <span class="popup-product-price">${currencySymbol}${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">${currencySymbol}${productPrice}</span></p>
            </div>
          </div>
        `;
        }

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

        console.log("swiperWrapper after appending item:", swiperWrapper);

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

        // 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 pagination (dots navigation)
        const swiperPagination = document.createElement('div');
        swiperPagination.classList.add('swiper-pagination');
        swiperContainer.appendChild(swiperPagination);

        // 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
    },
  },
});

[TrendBlend]

[TrendBlend]

Hello @PageFly-Richard I'm still struggling with this and made a new, clearer threat concerning the issue. If you have time and want to check it out for me: Swiper pagination shows wrong - Shopify Community