Как создать динамическую c bootstrap карусель, используя флягу / python? - PullRequest
Новая
       49

Как создать динамическую c bootstrap карусель, используя флягу / python?

0 голосов
/ 23 февраля 2020

Для контекста: Я строю социальную сеть. Как и в случае с Facebook, в каждом профиле есть вкладка под названием «картинки», представляющая собой набор миниатюр из сообщений владельца профиля.

Моя цель: Как и в случае с Facebook, я бы как пользователь, перемещающийся по странице, чтобы иметь возможность щелкать по любому уменьшенному изображению, запускать bootstrap карусель и отображать это заданное c изображение в гораздо большем представлении. Затем пользователь может использовать класс управления каруселью для прокрутки других изображений владельца профиля.

Текущая ситуация: Отображаются миниатюры, можно щелкнуть любой эскиз и запустить карусель, но все изображения владельца профиля отображаются в стопке, как будто все они активны.

Я использую jinja2 для l oop и оператор url_for для доступа к изображениям. Я также использую счетчик al oop в операторе if, чтобы сделать так, чтобы только одно изображение было активным, но оно явно не работает: (
Это был 4-летний пост stackoverflow , который я использовал для попытайтесь решить эту проблему для начала.

При использовании карусели со статически добавленными несколькими изображениями она работает правильно, но мне нужно, чтобы она была динамической c по понятным причинам.
Я не уверен, как на go о показе только указанного c изображения, по которому щелкнули, и возможности прокрутки других.

Любая помощь будет принята с благодарностью!

Вот мой 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>

1 Ответ

0 голосов
/ 23 февраля 2020

Вы можете переместить теги a за пределы inner-carousel div, возможно, как показано ниже (не проверено)

Если вы посмотрите на документацию , 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>
...