How to add an <a> tag to Flickity?

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

I fear that you can't have both touch response and link. But you can add an element to link inside of the element that you are sliding.

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

This is a piece of the example of Flickity web, you can see I added a link to a

element. If you need to have images you can set them as background-image in the wrapper div, and put a clickable link inside not covering the whole div.