Add to Cart button on Swiper JS carousel

[msango33]

Hi, I'm looking to add a "Add to cart" button for a Swiper JS carousel on my homepage. The carousel has been set up using a loop but the button isn't working. I'm sure it's because I'm not using the correct form but can't get it to work.

Would love your help.

Thanks in advance.

<div class="carousel-container row">
            <div class="col-4">    
                <h2 class="carousel-heading">{{ section.settings.product-carousel-title }} </h2>
                <img alt="" class="carousel-child" src="https://cdn.shopify.com/s/files/1/0503/0192/7577/files/content-6_2x_55edc3a6-963e-4189-8d42-d26e55fee2cd.png?v=1605795054">
            </div> 
            <div class="swiper-container col-8">
                <div class="swiper-wrapper">

                    {% for block in section.blocks %}
                    {% assign product_item = all_products[block.settings.product] %}
                        <div class="swiper-slide">

                            <div class="row">

                                <div class="col-12">
                                    <a href="{{ product_item.url | within: collection }}">
                                    <img src="{{ product_item.featured_media | img_url: 'medium'}}" alt="">
                                    </a>
                                </div>
                                
                                <div class="col-md-10 mx-auto carousel-text-padding">
                                    <span class="carousel-title">{{ product_item.title }}</span>
                                </div>

                                <div class="col-6 carousel-field-1">
                                    <span class="carousel-field-1-text">500ml</span>
                                    </div>

                                <div class="col-6 carousel-field-2">
                                    <span class="carousel-field-2-text">UHT</span>
                                </div>

                                <div class="col-4 price-padding">
                                    <span class="carousel-price">{{ product_item.price | money }}</span>
                                </div>

                                <div class="col-4 select-padding">
                                    <select class="select" name="quantity" id="Quantity">
                                        <option type="number" id="Quantity" name="quantity" value="1">1</option>
                                        <option type="number" id="Quantity" name="quantity" value="3">3</option>
                                        <option type="number" id="Quantity" name="quantity" value="6">6</option>
                                    </select>
                                </div>

                                <div class="col-4 button-padding">
                                    <button type="button" class="carousel-button">
                                        <span> + </span><a ><img alt="" class="carousel-cart" src="https://cdn.shopify.com/s/files/1/0503/0192/7577/files/account-32-px-copy-4_2x_c3a18fa3-a954-4e0f-bba9-e14597ea2004.png?v=1605725975"></a>
                                    </button>
                                </div>

                                <div class="col-12">
                                    <p class="carousel-quantity">Sold by 6 minimum</p>
                                </div>
                        
                            </div>
                            
                        </div>
                    {% endfor %}

                </div>
                <div class="swiper-scrollbar"></div>
            </div>
        </div>