metafizzy / flickity-hash Goto Github PK
View Code? Open in Web Editor NEWSelect Flickity slides with links
Select Flickity slides with links
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.