Home » Python » html – How to create a dynamic bootstrap carousel, using flask/python?-Exceptionshub

html – How to create a dynamic bootstrap carousel, using flask/python?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

For context:
I’m building a social network. Just like with Facebook, each profile has a tab titled “images”, which is a collection of thumbnails from the profile owner’s posts.

My goal:
Just like with Facebook, I’d like the user navigating the page to be able to click on any thumbnail image, launching a bootstrap carousel and displaying that specific image in a much larger view. The user could then use the carousel-control class to scroll through the profile owner’s other images.

Current situation:
The thumbnails display, you can click on any thumbnail and launch the carousel, but all of the profile owner’s images appear stacked, as if they’re all active.

I’m using a jinja2 for loop and a url_for statement to access the images. I also use a loop counter within an if statement to make it so only one image is active, but its obviously not working 🙁
It was this 4 year old stackoverflow post that I used to attempt solving this problem to begin with.

When using the carousel with a few images added statically it works properly, but I need it to be dynamic for obvious reasons.
I’m unsure how to go about showing just the specific image that was clicked on, and having the ability to scroll through the others.

Any help will be greatly appreciated!

Here is my 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>

How to&Answers:

You can move the a tags outside the inner-carousel div, maybe like below ( its untested)

If you look at the documentaion, the a tags have to be outside.

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