Breaking News: Grepper is joining You.com. Read the official announcement!

django loop from param

nitsh vasundhara answered on June 17, 2022 Popularity 1/10 Helpfulness 1/10

answer django loop from param

django loop from param

Comment

{% extends 'shop/basic.html' %}
{% block css %}
        .col-md-3 {
            display: inline-block;
            margin-left: -4px;
        }

        .col-md-3 {
            width: 100%;
            height: auto;
        }



        body .no-padding {
            padding-left: 0;
            padding-right: 0;
        }

        .carousel-control-prev-icon {
            background: black no-repeat center center;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
        }

        .carousel-control-next-icon {
            background: black no-repeat center center;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");

        }
        body .carousel-indicators{
        bottom:0;
        }

        .carousel-indicators .active{
        background-color: blue;
        }


    {% endblock %}
{% block body %}
{% load static %}



<!--        carousel indicators starts from here-->

<div class="container" xmlns:data="http://www.w3.org/1999/xhtml">
    <div id="demo" class="carousel slide my-3" data-ride="carousel">'
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
    {% for i in range %}
       <li data-target="#demo" data-slide-to="{{i}}" ></li>
    {% endfor %}
</ul>

<!--        slideshow starts here-->

      <div class="carousel-inner">
        <div class="carousel-item active">
            
            <div class="col-xs-3 col-sm-3 col-md-3">
              <div class="card" style="width: 18rem;">
                <img src='{% static "shop/test.jpg" %}' class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>

            {% for i in product|slice:"1:" %}
            <div class="col-xs-3 col-sm-3 col-md-3">
              <div class="card" style="width: 18rem;">
                <img src='{% static "shop/test.jpg" %}' class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>

            {% if forloop.counter|divisibleby:3 and forloop.counter > 0 and not forloop.last %}
             </div><div class="carousel-item">
            {% endif%}

            {% endfor %}
      </div>

      </div>
        </div>

<a class="carousel-control-prev " href="#demo" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true" ></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#demo" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
 {% endblock %}
</div>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: www.codewithharry.com

Tags: django param whatever

Link to this answer
Share Copy Link

Contributed on Jun 17 2022

nitsh vasundhara

0 Answers Avg Quality 2/10

django loop from param

Contents

More Related Answers

django loop from param

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.