Html – Invalid block tag on line 117: 'endblock', expected 'empty' or 'endfor'. Did you forget to register or load this tag?

{% 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 css %}
  {% 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='/media/{{product.0.image}}' 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='/media/{{i.image}}' 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>

This was my code in index.html and I am getting this error:
Invalid block tag on line 117: ‘endblock’, expected ’empty’ or ‘endfor’. Did you forget to register or load this tag?

How to troubleshoot now?

THE ERROR I’M GETTING:
enter image description here

How to troubleshoot?
Debug the code for me please.
P.S: The browser is saying that endblock is missing but I added the endblock there.