Django - Bootstrap Carousel无法滑到下一个或上一个

时间:2016-08-09 09:28:41

标签: html css django

单击箭头或点时没有响应。只能显示第一张图像。我查了所有帖子但仍无法解决。任何人都可以找出问题吗?非常感谢!

{% extends 'base.html' %}

{% block title %}
    Travel - Homepage
{% endblock %}

<!-- Display images -->
{% block display %}
    <div class="container">
        <div class="row">
            <div class="box">
                <div class="col-lg-12 text-center">
                    {% if attraction.attractionimage_set.all %}
                        <!-- Uses carousel to display images -->
                        <div id="carousel-homepage" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                {% for image in attraction.attractionimage_set.all %}
                                    <li data-target="#carousel-homepage" data-slide-to="{{ forloop.counter0 }}"
                                        class="{% if forloop.counter0 == 0 %}active{% endif %}"></li>
                                {% endfor %}
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                {% for image in attraction.attractionimage_set.all %}
                                    <div class="item {% if forloop.counter == 1 %}active{% endif %}">
                                        <img src="{{ image.medium_image.url }}" alt="Image {{ forloop.counter }}">

                                        <div class="carousel-caption">
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>

                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-homepage" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-homepage" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <strong>No image for this attraction</strong>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

0 个答案:

没有答案