metafizzy / flickity-hash Goto Github PK

Thank you for this feature!! One issue: the urls start looking kinda messy if the Alt text has any spaces in it. (I am loading the alt text from user generated image title in CMS) Underscores or hyphens would be preferable to "%20"

i wonder how to achieve to jump to a certain slide while having multiple slider on a page, i think there must be a way like exploding the the hash-tagname while beginning with the name of the slide first so the side can scroll to that slider AND also jump to the slide with the second part of the hash' tagname...

The hash option for Flickity 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>

I have the issue now, that the slider is placed somewhere at the bottom of a long page. When I link to the slider with the hash, the site jumps to that anchor. But I want the user to stay at the top but still select the correct slide of course.

Is it possible to use a different selector, like a custom data attribute additionally to the ID? For example:

<div class="carousel-cell" data-hash="carousel-cell1">...</div>

Or is there another way of preventing the user to jump to the bottom of the anchor when coming from another page?

Hi,

Thanks for creating and sharing flickity hash.

I noticed when using flickity in a website with subfolders (e.g. https://www.site.com/subfolder/). The browser address is replaced with only the domain and the hash (https://www.site.com/#slide-1). If a user manually refreshes the pages after this change. the browser redirects back to root, which is our case is not desirable.

I changed the onChangeHash function to bypass this issue:
var url = window.location.pathname + '#' + id;

Maybe this could be a nice addition to your library?

I noticed that on page load with a hash on it (e.g. #slide1), flickity perfectly loads the correct cell on load. But I'm not getting a select or settle event fired for it. This is only an issue because I'm using a custom navigation UI. Is an event supposed to fire? Looking through the code, it looks like it should but I don't know. Otherwise my select and settle listeners fire just fine.

Using the latest version of flickity and flickity-hash and vanilla js.

I created an image gallery using hash in conjunction with flickity-fade. As soon as I add more than 9 slides, for some reason there is a delay when switching between slides 1 & 6 via the hash links. When images are places in the slides, when switching between 1 & 6, the carousel window switches from 1 -> 6 -> 1 (when switching from 6) and 6 -> 1 -> 6 in quick succession (when switching from 1).

Using the following:
https://unpkg.com/flickity@2/dist/flickity.css
https://unpkg.com/flickity-fade@2/flickity-fade.css
https://unpkg.com/flickity@2/dist/flickity.pkgd.js
https://unpkg.com/flickity-hash@1/hash.js
https://unpkg.com/flickity-fade@1/flickity-fade.js

I noticed that the hash stopped working when I added the fade option to my slider. Is there a workaround?

Looks like a great plugin for flickity.

Does anyone know how I can use this with flickity-imagesloaded?

Currently, I am importing Flickity this way:

import Flickity from "flickity-imagesloaded";

If I change to:

import Flickity from "flickity-hash";

I will lose the images loaded functionality.

Thanks!

It also doesn't update any of the slider state, so the first slide still contains "is-selected" class, and the left arrow is greyed out, even if the hash/Id is the last slide. I can see the slide, but I have to click the right arrow as many times as there are slides for it to work with the full screen module.

Any thoughts?