Question

I was wondering if anyone knew of a way to add a tag to a Flickity image slider? Here's what I have for my slider but it messes with the functionality of the slider itself:

<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "autoPlay": true, "wrapAround": true}'>
  <a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" />
  </a>
  <a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
  </a>
  <a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look-out" />
  </a>
  <a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="One World Trade" />
  </a>
  <a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" />
  </a>
  <a id="firstpic" class="scrollTo" data-scrollTo="first" href="#">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose" />
  </a>
</div>

I have another JS file with some basic scrollTo jQuery code, but other than that I just need to figure out how to get the links on the images to work. Any ideas?

Answer 1

我担心你不能同时拥有触摸响应和链接。但是您可以添加一个元素来链接您正在滑动的元素内部。

<table  class="table">
<tbody>
<tr>
<td>test</td>
<td>bash</td>
<td>vim</td>
</tr>
</tbody>
</table>

这是Flickity网站的一个例子，你可以看到我添加了一个

元素的链接。如果你需要有图像，你可以在包装div中将它们设置为背景图像，并在里面放一个可点击的链接而不是覆盖整个div。

如何添加<a> tag to Flickity?

1 个答案: