Карусель начальной загрузки - цикл в javascript

#javascript #html #bootstrap-4 #carousel

#javascript #HTML #bootstrap-4 #карусель

Вопрос:

Я пытаюсь использовать карусель начальной загрузки, но не могу заставить ее работать. У меня есть список с картинками, которые я хочу просмотреть и показать в карусели. Я не могу показать все изображения, поскольку «активировать» (строка 3 в тексте ниже) следует применять только к первому изображению (а не к остальным в списке). Это означает, что мне нужно какое-то ограничение относительно «активировать». Вероятно, что-то вроде «используйте activate только для первого цикла». Я не совсем уверен, как это написать. Я пишу на javascript (новичок), и мне действительно сложно включить его в HTML-файл.

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

1. здесь вы используете механизм шаблонов, а не только js.

2. В вашем шаблоне вам понадобится оператор if. Что-то, что проверяет, является ли изображение первым, если да, добавьте активный класс, если нет, не делайте этого.

3. В качестве альтернативы вы помещаете первое изображение и устанавливаете его как активное, затем вы просматриваете все остальные изображения, не устанавливая его как активное (js эквивалент array.slice(1)).

Ответ №1:

Вы используете здесь какой-то язык шаблонов, я думаю, Django.

Вам нужно сделать класс активным в блоке if.

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

Я думаю, вы можете использовать синтаксис with. Этот пример — просто логика, которой вам нужно следовать.
Просто найдите правильный синтаксис. Другое изменять не нужно.