Quiero una juerga para mi ciclo for de productos en la plantilla html de Django y quiero 6 elementos por diapositiva para mover con los botones anterior y adelante. Por favor, hágame saber cómo hacerlo usando html, CSS y JavaScript.

código:

 <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>