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

回答

相关问题