如何使用flask/python创建动态引导轮播？

Question

对于上下文： 我正在建立一个社交网络。与 Facebook 一样，每个个人资料都有一个标题为“图片”的选项卡，它是个人资料所有者帖子的缩略图集合。

我的目标： 就像 Facebook 一样，我希望用户浏览页面能够点击任何缩略图，启动引导轮播并在更大的视图中显示该特定图像。然后，用户可以使用 carousel-control 类来滚动浏览配置文件所有者的其他图像。

目前情况： 缩略图显示，您可以单击任何缩略图并启动轮播，但所有个人资料所有者的图像都显示为堆叠，就好像它们都处于活动状态一样。

我正在使用 jinja2 for 循环和 url_for 语句来访问图像。我还在 if 语句中使用循环计数器来使其只有一个图像处于活动状态，但它显然不起作用:(
正是这个 4 岁的 stackoverflow post 我开始尝试解决这个问题。

使用静态添加了几张图片的轮播时，它可以正常工作，但出于显而易见的原因，我需要它是动态的。
我不确定如何只显示被点击的特定图像，并能够滚动浏览其他图像。

任何帮助将不胜感激！

这是我的 HTML

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    {% for post in user.posts %}
      {% if post.post_img != None %} 
        <div class="container">
          <div class="item {% if loop.counter == 1 %} active {% endif %}" id="slide{{ loop.counter }}">
            <img src="{{ url_for('static', filename='post_pics/' + post.post_img) }}"> 
          </div>
          <a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
         </a>
       </div>
     {% endif %}
   {% endfor %} 
 </div>
</div>

Answer 1

您可以将a 标签移到inner-carousel div 之外，可能如下所示（未经测试）

如果您查看documentaion，a 标签必须在外面。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    {% for post in user.posts %}
      {% if post.post_img != None %} 

          <div class="carousel-item {% if loop.index == 1 %} active {% endif %}" id="slide{{ loop.index }}">
            <img src="{{ url_for('static', filename='post_pics/' + post.post_img) }}"> 
          </div>

     {% endif %}
   {% endfor %} 
 </div>
  <a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>