locomotive cms liquid template logic issue

Question

I'm trying to achieve the following result:

I have a model for carousel_images, which has_many "tags". I want to only show images in the carousel where the conditions are met. I've tried a bunch of different approaches and the closest I've got to working is with the code below, however, it shows the image for each tag rather than only 1 per tag.

<div class="span12">
    <div id ="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            {% for caro in contents.caro_images %}
                {% assign first_loop = forloop.index0 %}                  
                {% for tag in caro.tags %}
                    {% if tag.tag_name|downcase contains page.slug %}
                        <div class="{% if first_loop%}active {% endif %}item">
                            <a href="{{ caro.url}}">
                                <img src="{{ caro.image.url }}" width="720" height="316" alt="">
                            </a>
                        </div>
                    {% endif %}
                {% endfor %}         
             {% endfor %}
             <a style="display:none;" class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
             <a style="display:none;" class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
        </div>
    </div>
</div>

I realize it has to do with the actual images being displayed inside the inner for loop checking tags, but I really dont know how to do the check outside of that loop and get the images to only show once.

I'm also not 100% sure how to set the "active" class properly since its nested inside the secondary additional loop.

Thanks in advance!

edit ---- this is the working code:

<div class="span12">
  <div id ="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      {% for caro in contents.caro_images %}
      {% assign first_loop = forloop.index0 %}
        {% for tag in caro.tags %}
          {% if tag.tag_name == page.slug %}
            <div class="{% if first_loop == 0 %}active {% endif %}  item">
              <a href="{{ caro.url}}">
                <img src="{{ caro.image.url }}" width="720" height="316" alt="">
              </a>
            </div>
          {% endif %}
        {% endfor %} 
      {% endfor %}
      <a style="display:none;" class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
      <a style="display:none;" class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>
  </div>
</div>

I think the endless app restarts may have also contributed to things working.

Answer 1

I ended up changing the structure a bit with a ton of trial and error, but eventually got it working. updated code is in the edit in case anyone else comes accross this.

Answer 2

I think this would be better handled clientside with javascript. maybe look at some of these: 45+ carousel plugins.