Question

我正在尝试创建一个包含四个图像的幻灯片。事情是我想创建一个链接按钮，每个图像都有自己的url链接。但我所做的是创建了幻灯片显示的四个链接按钮，而不是随每个图像一起更改的一个链接按钮，以及它自己的URL链接。

＆＃13;

{% if settings.show_block_lookbook %}
<div id="lookbook-section" class="section-full lookbook-section">

  <div class="lookbook-wrapper">
    <div class="lookbook-text">
      <div class="lookbook-container">
        <div class="container">

          <div class="lb-text">
            {% assign lbText1 = settings.block_lookbook_text_1 %}
            {% assign lbText2 = settings.block_lookbook_text_2 %}
            {% assign lbText3 = settings.block_lookbook_text_3 %}
            {% assign lbText4-1 = settings.block_lookbook_text_4_1 %}
            {% assign lbText4-2 = settings.block_lookbook_text_4_2 %}
            {% assign lbText4-3 = settings.block_lookbook_text_4_3 %}
            {% assign lbText4-4 = settings.block_lookbook_text_4_4 %}
            {% assign lbLink-1 = settings.block_lookbook_link_1 %}
            {% assign lbLink-2 = settings.block_lookbook_link_2 %}  
            {% assign lbLink-3 = settings.block_lookbook_link_3 %}  
            {% assign lbLink-4 = settings.block_lookbook_link_4 %}  

            {% if lbText1 != blank %}<h3>{{ lbText1}}</h3>{% endif %}

            <div class="bg-slider-arrows">
              <span class="button-prev no-border"></span>
              <span class="button-next no-border"></span>  
            </div>

            {% if lbText2 != blank %}<h2>{{ lbText2 }}</h2>{% endif %}

            {% if lbText3 != blank %}<p>{{ lbText3 }}</p>{% endif %}

            {% if lbText4-1 != blank %}<a href="{{ lbLink-1 }}" class="btn btn-custom btn-lb">{{ lbText4-1 }}</a>{% endif %}
            {% if lbText4-2 != blank %}<a href="{{ lbLink-2 }}" class="btn btn-custom btn-lb">{{ lbText4-2 }}</a>{% endif %}
            {% if lbText4-3 != blank %}<a href="{{ lbLink-3 }}" class="btn btn-custom btn-lb">{{ lbText4-3 }}</a>{% endif %}
            {% if lbText4-4 != blank %}<a href="{{ lbLink-4 }}" class="btn btn-custom btn-lb">{{ lbText4-4 }}</a>{% endif %}
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="lookbook-bg">
    {% for i in (1..4) %}
      {% assign newShow = 'block_lookbook_img_' | append: i %}

      {% if settings[newShow] %}
        {% assign newImage = 'block_lookbook_img_' | append: i %}

        <div class="lookbook-item">
          <img src = "{{ newImage | append: '.jpg' | asset_url}}" alt="" />
        </div>

      {% endif %}

    {% endfor %}
  </div>

</div>
{% endif %}

＆＃13;

我完全迷失了该怎么做，因为我对此非常陌生。我想我不知何故需要链接图像与网址和链接按钮等，但不知道如何编码它，以便每个图像都有自己的链接按钮和网址链接...任何帮助？有什么例子吗？

Answer 1

等一下，你在这里没有使用多少角。我认为它的django或其他模板{% if %}。

使用类似：

<div ng-repeat="object in objects">
    <a href="{{ object.link }}" class="btn btn-custom btn-lb">{{object.name }}</a>
    <img src="{{ object.img_path}}" />
</div>

看看try this link for ng-repeat

对于您需要的功能，我建议您查看cleaner approach of Carousel

AngularJS / HTML / CSS - 幻灯片显示不同的链接按钮和URL链接

1 个答案: