For loop dynamic Product cards slider

Question

I want a carousal for my for loop of products in Django html template and i want 6 items per slide to move with previous and forward buttons. Please let me know how to do it using html and CSS and JavaScript.

code:

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-7 g-7">

        {% for product in categoryname %}
        <div class="col" style="width: 14.2%;padding: 10px;">

            <div class="card shadow-sm" style="width: 100%;height: 450px;">
                <img class="card-img-top" style="cursor:pointer;height:60%; width:100%;"
                    data-product="{{ product.Productid }}"
                    onclick=location.href="{% url 'detail' product.Productid %}" src="{{product.Icon}}"
                    alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title" style="color: black; font-size: 20px;">{{product.Name}}</h5>
                    <p class="card-text" id="price">{{product.Price}}</p>
                    <span class="card-text" id="half" style="color: lawngreen;">{% widthratio product.Price 2 1 %}
                    </span> <span style="color: orange;">First order
                        price</p></span>

                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>