添加指向 jCarousel 图像的链接

Question

我正在与 jQuery 合作，将 jCarousel 添加到我在 Shopify 上的主页。轮播正确显示和滚动，但我需要添加指向每个图像的链接，以便在单击图像时将用户定向到特定产品页面。

Shopify 使用名为 liquid 的模板引擎，它是 Ruby 的变体。我不知道 Ruby 或如何实现我正在寻找的功能。

下面是我使用 jCarousel 的片段。谁能建议在哪里修改代码，以便我为每张图片创建链接？

<div class="carousel-inner">
{% for i in (1..4) %}
{% capture show_slide %}slide_{{ i }}{% endcapture %}
{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}
{% capture link %}slide_{{ i }}_link{% endcapture %}
{% capture link_text %}slide_{{ i }}_link_text{% endcapture %}
{% capture headline %}slide_{{ i }}_headline{% endcapture %}
{% capture content %}slide_{{ i }}_content{% endcapture %}
{% if settings[show_slide] %}
<div class="item{% if i == 1 %} active {% endif %}">
  <img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" />
  <div class="slide-container">
    <div class="container-fluid">
      <div class="carousel-caption col-md-5 col-sm-10">
        <h1>{{ settings[headline] | escape }}</h1>
        <p>{{ settings[content] | escape }}</p>
        <a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endfor %}

Answer 1

看起来每张幻灯片都有一个带有 link 的按钮，在“设置”中设置：

<a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>

如果您尚未将此功能用于其他用途，您可以修改此代码以将 link 添加到图像本身而不是按钮。那么你不需要改变任何其他东西。

例如：

<div class="item{% if i == 1 %} active {% endif %}">
  <a href="{{ settings[link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>
  <div class="slide-container">
    ...
  </div>
</div>

如果您已经在使用按钮 link 做其他事情，您需要在“设置”中添加额外的字段来保存产品 link 并执行如下操作：

{% capture image_link %}slide_{{ i }}_image_link{% endcapture %}
...
<a href="{{ settings[image_link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>

添加指向 jCarousel 图像的链接

Add links to jCarousel Images

jquery

ruby

shopify

liquid

jcarousel