对于不适用于升降带转盘的回路

2024-05-16 11:34:44 发布

您现在位置：Python中文网/ 问答频道 /正文
1152 3

我有一个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>

Tags： 图像divsrcidtargetimgdatali
1条回答
网友
1楼 · 发布于 2024-05-16 11:34:44

嘿，你试过这个代码吗：

   <!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>

相关问题 更多 >

    编程相关推荐