How to select cell via URL

[desandro]

Following up on https://github.com/metafizzy/flickity/issues/148#issuecomment-174656859 ... With the selectCell method in Flickity v2, you can now select a cell via a selector string

// jQuery
$carousel.flickity( 'selectCell', '#cell3' )
// vanilla JS
flkty.selectCell('#cell3')

You should be able to use in page links like href="#cell3" to select cell. I'll have to create a demo to show how.

• Opening a page with #slide2 in the URL hash should init the gallery with the matching cell
• Clicking on a link with href="#slide2" should select the matching cell

Add a 👍 reaction if you'd like to see this feature documented or added to Flickity.

[amdad]

hash it please.

[richgcook]

I've been using something like the following... hope this helps.

var hash = window.location.hash.substr(1);
$slider.flickity('selectCell', '[data-id="' + hash + '"]', null, true);
var count = $(flkty.selectedElement).attr('data-id');
window.location.hash = count;
$slider.on('select.flickity', function() {
    count = $(flkty.selectedElement).attr('data-id');
    window.location.hash = count;
});

[amdad]

@desandro how you like @richgcook example?

[liamail]

Hey @desandro. I have an issue when selecting the cell I want to link to from an external html document. Everything works perfectly when using a link such as href="page.html#slide2"- I land on the carousel and the matching cell, however I now cannot flick backwards through the carousel. Only forwards (flicking cells to the left).

Hoping you can help me out. Thanks in advance!

[liamail]

@desandro hello?

[desandro]

@liamail If you can provide a reduced test case, please open a new issue. See Submitting Issues in the contributing guidelines.

[desandro]

🎉 Flickity v2.1.0 has been released with support for all new hash option. See docs! 🎉

Enables hash navigation to select slides with links and URLs. Changes page URL to selected cell id.

hash: true

---

I'm now closing this issue for the feature request. Please open a new issue if you into trouble with using hash. Thanks for all the +1's and 👍 over the years. 🌈🐻

[PietM]

The hash option is excellent. I'm wondering if there is a way to number the carousel-cell via php and link from a separate template. Would it look something like (?):

<ul>
<?php
$i = 1;
while(get_sub_field('images')):
echo '<li><a href="' . get_permalink() . '/carousel-cell' . $i . '">' . get_sub_field('images') . '</a></li>' ;
$i++;
endwhile; ?>
</ul>

[desandro]

@PietM You would set href to match the element's IDs. So if you have

<div class="carousel">
  <div class="carousel-cell" id="carousel-cell1"></div>
  <div class="carousel-cell" id="carousel-cell2"></div>
  <div class="carousel-cell" id="carousel-cell3"></div>
</div>

Then your links external page links would look like:

<a href="page-name#carousel-cell1">View cell 1</a>