时间戳

首页 > 解决方案 > for循环不适用于boostrap轮播

python - for循环不适用于boostrap轮播

问题描述

我有一个 for 循环，显示从用户获得的图像 (media_gallery1-4)。每个帖子应显示四个图像并在引导轮播中循环。我的页面上大约有 10 个帖子。当我在 10 个帖子中的任何一个上单击下一个或上一个按钮时，它只会更改第一个帖子的图像，而其他 9 个保持不变。如何更改我的代码，以便下一个/上一个箭头更改循环通过该特定帖子的图像。让我知道是否需要更多上下文。

{% for post in posts %}
<div class="container">
    <div class="row">
        <div class = "form-group col-md-6 mb-0">
            <div id="carouselExampleControls" class="carousel slide">
                <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0"class="active"> 
                        </li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active" id="slide1">
                        {% if post.media_gallery %}
                            <img class="img" src="{{post.media_gallery.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>
                    <div class="carousel-item active" id="slide2">
                        {% if post.media_gallery2 %}
                            <img class="img" src="{{post.media_gallery2.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>
                    <div class="carousel-item active" id="slide3">
                        {% if post.media_gallery %}
                            <img class="img" src="{{post.media_gallery3.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>
                    <div class="carousel-item active" id="slide4">
                        {% if post.media_gallery %}
                            <img class="img" src="{{post.media_gallery4.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data- 
                     slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>  
    </div>

标签： pythondjangoloopsbootstrap-4

解决方案

嘿，您是否尝试过此代码：

   <!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 {% for post in posts %}
<div class="container">
    <div class="row">
        <div class = "form-group col-md-6 mb-0">
            <div id="carouselExampleControls" class="carousel slide">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0"class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
  <div class="carousel-item active" id="slide1">
                        {% if post.media_gallery %}
   
                            <img class="img" src="{{post.media_gallery.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>
  
    <div class="carousel-item" id="slide2">
                        {% if post.media_gallery2 %}
                            <img class="img" src="{{post.media_gallery2.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>

     <div class="carousel-item" id="slide3">
                        {% if post.media_gallery %}
                            <img class="img" src="{{post.media_gallery3.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>
                      <div class="carousel-item" id="slide4">
                        {% if post.media_gallery %}
                            <img class="img" src="{{post.media_gallery4.url}}">
                        {% else %}
                            <div class="defualt_image">
                                <img src= "{% static 'main/images/boston_apartments.jpg' %}">
                            </div>
                        {% endif %}
                    </div>
                     <a class="right carousel-control" href="#carouselExampleIndicators" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
                     <a class="left carousel-control" href="#carouselExampleIndicators" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
                </div>
            </div>
        </div>  
    </div>       
</body>

推荐阅读