JS/CSS library to create touch, responsive, flickable galleries.
JS/CSS library to create touch, responsive, flickable galleries.
Written by Metafizzy.
Official website.
On Github.
Questions tagged [flickity]
226 questions
1
vote
1 answer
flickity react asNavFor for two navs not working
i am using react-flickity-component and want to connect two carousels, i am using asNavFor in options but its not working. here's code sandbox for what i tried. i have also included a package named flickity-as-nav-for (you can see in sandbox)
my…
Asad Ullah Shaheen
- 11
- 2
1
vote
1 answer
Flickity won't initialising when switching Tab
I installed flickity in multiple vanilla js tabs and it is correctly initialized in the first tab. while the content of the first tab is loaded, the content of the second isn't correct initialized.
- 33
- 1
- 10
Bunny
1
vote
4 answers
Trying to add code to Wordpress website as a plugin, but only have css/js code not a zip folder
I'm trying to add a slider to Wordpress (Flickity's slider: https://flickity.metafizzy.co) but am unable to figure out how to add it as it doesn't follow the typical external plugin format where I can add a zip folder.
Tried adding code into the…
J. Martello
- 11
- 2
1
vote
0 answers
Load Flickity corousel with html5 videos "dynamically"
I'm building a flickity carousell with several html5 videos. When the carousel item turns in autoPlay or manual mode the next video should be loaded dynamically.
I would like to hear if there are already existing methods to create such a carousell…
Luke
- 127
- 2
- 11
1
vote
1 answer
How to make the height of a Flickity carousel conditionned by the content?
I'm trying the componant named Flickity, super-cool but the problem is that the carousel height is hard defined in CSS, and does not take the height of the content in carousel-cell. I tried to use the option setGallerySize: false but it's not…
Gdebrig
- 193
- 1
- 9
1
vote
2 answers
Flickity - Problem with multiple carousels
I have a problem with multiple Flickity obj on the page. I can easly generate Flickity with slides, but there is a problem with the next ones.
Here's is the code:
I'm trying to put flickity in a bootstrap tabpanel (4 panel, each has his own…
gularxjs
- 79
- 9
1
vote
1 answer
Disable/Prevent PhotoSwipe Launch on Anchor Click
It's a Flickity carousel which contains images that open in PhotoSwipe.
There are a tags within the Flickity Slides which "work", but the PhotoSwipe modal flashes prior to the window.location changing (default HTML click).
I need some kind of test…
MikeiLL
- 6,282
- 5
- 37
- 68
1
vote
0 answers
flickity add class to previous slide
How can I add a class for previous flickity slide?
I need them to fade out. I'm using Vue.js with npm installed flickity.
Current slide has .is-selected class, so maybe I can add somehow .is-prev, .is-next classes dynamically?
Yura Kolesnikov
- 11
- 2
1
vote
1 answer
Add and remove grayscale effect to Image using flickity slider
I added grayscale to .gallery-cell img via flickity V2, and How to remove that when .is-selected Slider? same as this: (https://codepen.io/irvingarmenta/pen/pyLJvv)
// for an individual element
var flky = new Flickity('.gallery', {
…
Saeed Heidarizarei
- 8,406
- 21
- 60
- 103
1
vote
2 answers
Flickity How to make the carousel resize based on image size?
I'm trying to achieve something similar to the graphic below.
Blue = Carousel Slides (As Images)
Green = Carousel Frame/Viewport/Container
Red = Visible Page (1440)
I have 5 images, all with the same resolution of (1024x576), and I want them to…
user5113508
1
vote
1 answer
Expanding the height of a Flickity slide when height of content changes
I have a div within a flickity slider, inside of which will contain a list comprising of some images, I initially want it to be hidden and to only be revealed when the user chooses to click on a button to see them.
Currently, this pushes any content…
Fazy
- 166
- 2
- 10
1
vote
0 answers
Multiple galleries with flickity lightbox
I'm currently using flickity and added a lightbox extension to it, here's where I got it from (vanilla JS): https://codepen.io/jimahyland/pen/GZGrEa
var lightbox = {
config : {
gallery : '.gallery', // class of…
Olivier
- 11
- 2
1
vote
1 answer
Flickity WrapAround GroupCells, Has extra padding
I'm having an issue where Flickity seem to behave poorly when there is a limited number of items and using the settings Wrap around and GroupCells
Here is a code pen: https://codepen.io/JaieParker/pen/rdPMrB
I would like all the cells to be spaced…
Jaie
- 89
- 1
- 9
1
vote
1 answer
Flickity Slider remove cell by child class
Trying to remove carousel cells if they contain a child element with a specific class, but can't figure out how to do it with the Remove API from flickity.
Using jquery mehtods, I can remove from the DOM just fine, but the navigation of flickity…
Alyssa Butler
- 13
- 3
1
vote
0 answers
Carousel images are not displayed correctly
I am using flickity library to display a lot of carousells on one page: https://spielraum-maybaum.ch/produkte/
But the first time I am loading a page the carousell images are not displayed completely, there is only one little stripe.
I think this…
Luke
- 127
- 2
- 11