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

我正在嘗試創建一個包含四個圖像的幻燈片，例如。而事情是我想創建一個鏈接按鈕與每個圖像自己的url鏈接。但是我所做的是創建了四個鏈接按鈕，它們出現在幻燈片上，而不是一個鏈接按鈕與每個圖像一起更改，並且具有自己的url鏈接。AngularJS/HTML/CSS - 幻燈片顯示不同的鏈接按鈕和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鏈接...任何幫助？任何例子？

來源

2016-04-29 Luciano

爲什麼不使用純HTML和'NG-之開關功能？ https://docs.angularjs.org/api/ng/directive/ngSwitch它將允許您定義四個按鈕並根據條件隱藏三個按鈕。 – cst1992

Angular旨在與後端完全斷開連接，只在Angular應用程序和後端服務器之間傳輸數據，而這些服務器可能是您自己的（Django，Spring，PHP等）。我建議你只保留前端HTML。 – cst1992

堅持下去，你在這裏沒有使用太多的角度。我認爲它的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

對於u需要，我會建議你看看cleaner approach of Carousel

來源

2016-04-29 13:27:28

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

回答

相關問題