Question

对于上下文： 我正在建立一个社交网络。就像在Facebook上一样，每个个人资料都有一个标题为“图像”的标签，该标签是个人资料所有者的帖子中的缩略图的集合。

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

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

我正在使用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>

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

1 个答案: