如何向<a>Flickity添加标签？

Question

我想知道是否有人知道在闪光图像滑块中添加标签的方法？这是我的滑块，但它与滑块本身的功能混乱：

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

我有另一个带有一些基本scrollto jQuery代码的JS文件，但是除此之外，我只需要弄清楚如何使图像上的链接工作。有什么想法吗？

Answer 1

我担心你不能同时具有触摸响应和链接。但是您可以添加一个元素以链接您要滑动的元素。

<div class="hero-carousel__cell hero-carousel__cell--2 is-selected" style="position: absolute; left: 100%;">
      <div class="hero-carousel__cell__content">
        <p class="slogan slogan--easy">Easy to use.</p>
        <p class="slogan slogan--fun">Fun to flick.</p>
        <a href="http://stackoverflow.com/"><p class="slogan slogan--tagline">Flickity makes carousels, galleries, &amp; sliders that feel lively and effortless.</p></a>
      </div>
    </div>

这是Flickity Web的一个示例，您可以看到我添加了一个链接到

元素。如果您需要有图像，则可以将它们设置为包装div中的背景图像，并在不覆盖整个Div的内部放置一个可点击的链接。