Question

如何在模板中显示一组6个缩略图以创建幻灯片。我正在迭代for循环的列表有大约30个项目，我想将其分成6个块，并将其显示为幻灯片滑块。我尝试使用for循环的范围函数，但这不起作用

<div class="carousel-inner">
        <div class="item active">
            <ul class="thumbnails">

              {% for show in object_list %}
                    <li class="span2">
                        <div class="thumbnail">
                             <a href="{{ show.get_absolute_url }}" data-title="{{ show.name }}" >
                                    {% if show.images.exists %}
                                        {% with show.images.all.0.image as show_image %}
                                            <img src="{% thumbnail show_image 160x160 crop %}" alt="{{show.name}}" class="thumbnail">
                                        {% endwith %}
                                    {% else %}
                                        <img src="{% static 'img/default-image.gif' %}" alt="{{show.name}}" class="thumbnail">
                                    {% endif %}
                                </a>


                        </div>
                    </li>
            {%endfor%}  
           </ul>
        </div>

Answer 1

如果你想要每6张图片1张旋转木马，那么你就可以这样做

步骤1）在名为film-slider.html的模板文件夹中创建一个新的.html文件。

{% for reel in reels %}
<div class="carousel-inner">
    <div class="item active">
        <ul class="thumbnails">
            {% for show in reel %}
            <li class="span2">
                <div class="thumbnail">
                     <a href="{{ show.get_absolute_url }}" data-title="{{ show.name }}" >
                        {% if show.images.exists %}
                            {% with show.images.all.0.image as show_image %}
                                <img src="{% thumbnail show_image 160x160 crop %}" alt="{{ show.name }}" class="thumbnail">
                            {% endwith %}
                        {% else %}
                            <img src="{% static 'img/default-image.gif' %}" alt="{{ show.name }}" class="thumbnail">
                        {% endif %}
                    </a>
                </div>
            </li>
            {% endfor %}  
       </ul>
    </div>
</div>
{% endfor %}

步骤2）在你的templatetags / tags.py中（如果你没有，则创建它）

from django import template

register = template.Library()

def filmslider(reel):
    reels = []
    for i in range(0, len(reel), 6):
        reels.append(reel[i:i+6])
    return {'reels':reels}

register.inclusion_tag('film-slider.html')(filmslider)

这将使您的模板中的包含标记在您通过{% load tags %}加载后生效。

这将使您能够像{% filmslider object_list %}一样为您工作，您将替换您发布的所有上述HTML代码。

我还没有测试这个但它应该可以工作，如果将来你想要为这个标签提供更多功能你可以简单地在标签定义中添加参数，我将给出一个例子

def filmslider(reel, slides):
    #do the code.

这将引导您{% filmslider object_list 9 %}瞧，现在您可以将胶卷从6张幻灯片扩展到9张。

希望这有点帮助！

如何使用bootstrap和for循环在django中创建电影胶片？

1 个答案: