I want to make infinite slider but it does not slide. How can I fix it? (it stays on the first image and does not move)

<div id="myCarousel" class="carousel slide slider" data-ride="carousel">

    <ol class="carousel-indicators">
         {% for slider in sliders%}
            <li data-target="#myCarousel" data-slide-to="{{slider.id}}" class="{% if forloop.first%}active{%endif%}"></li>
        {%endfor%}
    </ol>
        {% for slider in sliders%}        
            <div class="carousel-inner" role="listbox">
                    <div class="item{% if forloop.first %} active{% endif %}">                    
                          <img src="{{slider.image.url}}" alt="Chania">
                          <div class="carousel-caption capt">
                                <h1  >{{slider.caption}}</h1>
                          </div>
                    </div>
            </div>
        {%endfor%}

  </div>

I want to make infinite slider but it does not slide. How can I fix it? (it stays on the first image and does not move)

<div id="myCarousel" class="carousel slide slider" data-ride="carousel">

    <ol class="carousel-indicators">
         {% for slider in sliders%}
            <li data-target="#myCarousel" data-slide-to="{{slider.id}}" class="{% if forloop.first%}active{%endif%}"></li>
        {%endfor%}
    </ol>
        {% for slider in sliders%}        
            <div class="carousel-inner" role="listbox">
                    <div class="item{% if forloop.first %} active{% endif %}">                    
                          <img src="{{slider.image.url}}" alt="Chania">
                          <div class="carousel-caption capt">
                                <h1  >{{slider.caption}}</h1>
                          </div>
                    </div>
            </div>
        {%endfor%}

  </div>

• javascript
• jquery
• django
• twitter-bootstrap

• 1 instead of providing link add information here – I A Khan Commented May 27, 2015 at 13:02
• This has nothing to do with Django (unless the loop is only outputting one slide). It's likely a JavaScript problem. – rnevius Commented May 27, 2015 at 13:05

2 Answers 2

Without seeing anything else...it looks like you're duplicating the carousel-inner div when you don't need to. Rather, you should add the individual items within the inner wrapper:

<div class="carousel-inner" role="listbox">
    {% for slider in sliders%}        
        <div class="item{% if forloop.first %} active{% endif %}">                    
              <img src="{{slider.image.url}}" alt="Chania">
              <div class="carousel-caption capt">
                  <h1>{{slider.caption}}</h1>
              </div>
        </div>
    {%endfor%}
</div>

The below mentioned is the code for the interactive dynamic infinite slider.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for obj in sliderview %}
                {% if forloop.first %}
                    <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter0}}" class="active"></li>
                {% else %}
                    <li data-target="#carouselExampleIndicators" data-slide-to="{{forloop.counter0}}"></li>

                {% endif %}
            {% endfor %}
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            {% for obj in sliderview %}
                {% if forloop.first %}
                    <div class="carousel-item active  ">
                {% else %}
                    <div class="carousel-item  ">
                {% endif %}
                <img class="d-block w-100 h-50" class="h-50 d-inline-block" src="{{ obj.thumbnail.url}}" alt="{{obj.title}}">
                </div>

            {% endfor %}
        </div>

        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        </div>
    </div>