AngularJS / HTML / CSS-幻燈片顯示不同的鏈接按鈕和URL鏈接

Question

我正在嘗試創建一個包含四個圖像的幻燈片。 而且，我想為每個圖像創建一個具有自己的url鏈接的鏈接按鈕。 但是我所做的是創建了四個鏈接按鈕，它們顯示在幻燈片上，而不是一個鏈接按鈕隨每個圖像及其自己的URL鏈接而變化。

 {% 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 %} 

我完全不知道該做什么，因為我對此很陌生。 我想我需要以某種方式將圖像與url和鏈接按鈕鏈接起來，但是不知道如何編碼，以便每個圖像都有自己的鏈接按鈕和url鏈接...有幫助嗎？ 有什么例子嗎？

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>

外觀請嘗試使用此鏈接進行ng-repeat

對於您需要的功能，我建議您研究更清晰的Carousel方法