添加一个链接到动态滑块标题

Add a link to dynamic slider caption

本文关键字：动态 标题 链接 一个 添加      更新时间：2023-09-26

我有一个由amazingslider插件创建的滑块。它的工作很好，但有没有办法添加一个链接(href)每个图像的标题?我试过了，但是链接没有显示在滑块标题中。

下面是我的代码片段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:804px;margin:0px auto 59px; overflow:hidden;">
  <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
    <ul class="amazingslider-slides" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="This is a caption This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
        />
      </li>
      <li>
        <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="This is a caption" />
      </li>
    </ul>
    <ul class="amazingslider-thumbnails" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
      </li>
      <li>
        <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
      </li>
    </ul>
  </div>
</div>

你能做的就是给标题属性添加一个链接标签。如果您使用单引号或转义双引号，则此操作有效:

<a href='#your-url'>your caption</a>

使用此方法，只能插入到标题的链接，而不能链接整个标题本身。

还有一个提示:尽量不要使用内联样式，最好使用你已经使用的类和id来应用你的样式。

#amazingslider-wrapper-1 {
  display: block;
  position: relative;
  max-width: 804px;
  margin: 0 auto;
  overflow: hidden;
}
#amazingslider-1 {
  display: block;
  position: relative;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.worldinbag.com/js/amazingslider.js"></script>
<script src="http://www.worldinbag.com/js/initslider-1.js"></script>
<div id="amazingslider-wrapper-1">
  <div id="amazingslider-1">
    <ul class="amazingslider-slides" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/4hlh_img-10.jpg" alt="img-10" title="<a href='#'>This is a link</a> This is a caption This is a caption This is a caption This is a caption " data-description="This is a caption This is a caption This is a caption This is a caption This is a caption "
        />
      </li>
      <li>
        <img src="http://uupload.ir/files/8dn2_img-11.jpg" alt="img-10" title="img-10" data-description="<a href='#'>This is a link</a>" />
      </li>
    </ul>
    <ul class="amazingslider-thumbnails" style="display:none;">
      <li>
        <img src="http://uupload.ir/files/zck1_img-10-tn.jpg" alt="img-10" title="img-10" />
      </li>
      <li>
        <img src="http://uupload.ir/files/jcyq_img-11-tn.jpg" alt="img-11" title="img-11" />
      </li>
    </ul>
  </div>
</div>

相关文章：