Bootstrap carousel - loop in javascript

Question

I am trying to use the bootstrap carousel, but cannot really get it to work. I have a list with pictures I want to loop through and show in the carousel. I cannot show all the pictures since the "activate" (line 3 in the text below) only should be applied for the first picture (and not for the other ones in the list). This mean that I need some kind of restriction regarding the "activate". Probably something like "only use activate for the first loop-through". I'm not quite sure how to write that. I'm writing in javascript (newbie) and having a really hard time incorporating it in the html file.

  <div class="carousel-inner">
        {% for image in images %}
          <div class="carousel-item active">
            <img src="{{ url_for('static', filename='images/' + image.image) }}" alt="{{ name }} product image" class="d-block w-100">
          </div>
        {% endfor %}
    </div>

In your template you will need an if statement. Something that checks if the image is the first, if so add the active class, if not don't. — imvain2
– imvain2, Commented Mar 22, 2019 at 17:23
Alternatively you put the first image and set it as active, then you loop through all the rest of the images without setting it as active (js equivalent of array.slice(1)). — Iskandar Reza
– Iskandar Reza, Commented Mar 22, 2019 at 17:27

Bojan Golubovic · Accepted Answer · 2019-03-22 17:31:02Z

1

You are using some template language here, I think Django.

You need to put class active in if block.

 {% if image in images is first %} active {% endif %}
 {% with %} {% endwith %}

I think you can use with syntax. This example is just logic you need to follow. Just find the correct syntax. Other you do not need to change.

answered Mar 22, 2019 at 17:31

Bojan Golubovic

1513 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap carousel - loop in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related