Stack Overflow
Stack Overflow

Questions tagged [flickity]

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.

226 questions
1
vote
1 answer

Flickity & Swup - destroying flickity

I am trying to destroy and re-load my Flickity slideshow while using Swup for page transitions, and I am not having much luck. This is my js file: import Swup from 'swup'; var Flickity = require('flickity'); function init() { if…
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42
1
vote
0 answers

How to update the mouse position during the "dragMove" event using Flickity and GSAP?

I'd like the custom cursor to move with the mouse during the drag event of the carousel without the awkward "jump" back to its starting position, at the end of the drag. I'm using GSAP's quickSetter for the cursor and Flickity for the carousel. Here…
Nish
  • 81
  • 6
1
vote
0 answers

Horizontal history timeline carousel with grouped dates using Flickity and Vanilla JS

I am trying to use the Flickity library to create a horizontal history timeline carousel. I have the basics working with data attributes, but am stuck on implementing data-nav and data-nav-title functionality. This functionality would be used to…
Mike Hermary
  • 346
  • 7
  • 22
1
vote
1 answer

Gatsby Image inside Flickity carousel

I am creating a gatsby website that uses the flickity-react-component to display a slider with product images. I believe that I should use the gatsby image to make it load faster, but when I try it, the Image does not display (it is 0x0…
user8496595
  • 19
  • 6
1
vote
0 answers

Use Flickity to group years on history timeline

I am new to Flickity and have been trying to emulate the following timeline setup history timeline slider. This site is using Flickity to display the history timeline. I have the basic code working, but have been unable to figure out how to connect…
Mike Hermary
  • 346
  • 7
  • 22
1
vote
0 answers

Flickity - Increase sensitivity for drag/swipe trigger to next/prev slide

I'm looking for a way to adjust the sensitivity (or threshold) for swiping to the next/prev slide - for example, I'd like to be able to only swipe 2px left or right and release to move to the next/prev slide. Note that I'm not asking for the…
Ivan Durst
  • 1,163
  • 2
  • 12
  • 24
1
vote
1 answer

Link click issue with a static click function. How to fix this?

Info I have a flickity slideshow, that on a 'static click' is going to the next pictures.In addition I have on top of the pictures inside my flickity slideshow a button with some caption and a a href linked to an external website (e.g.…
Marlene Rodrigues
  • 131
  • 1
  • 8
1
vote
1 answer

FlickityCall - prev/next event programmatically

To properly handle my carousel I use flickity. It works fine, but I'm currently trying to navigate with custom buttons. Docs say to call carousel.flickity("next") - which I tried, but I doesn't seem to work. import * as Flickity from…
Tom
  • 3,672
  • 6
  • 20
  • 52
1
vote
0 answers

Re initialize flickity after replace html

I need to replace entire html with new html. I want re-initialize flickity plugin after replace html and thus don't apply to replaced. I tried this: jsfiddle (in jsfiddle click on button Initialize flickity and see result)
g.dlta
  • 53
  • 4
1
vote
1 answer

nuxtjs and ssr with flickity slider and more plugins

I transform my current website to a nuxtjs and vuejs page. With nuxt, i want to do server-side-rendering. So in the end a static html page. There were problems with the import statements in my vue components. So now i will optimize my imports for…
PM-Designs
  • 189
  • 2
  • 7
1
vote
1 answer

Why are flickity css not being loaded in Angular?

So I am trying to incorporate flickity carousel in my Angular app. I think technically it should working fine, the issue that stops it from making it work the way it should is that none of the css from flickity.css seems to be loading. I was hoping…
felixo
  • 1,453
  • 6
  • 33
  • 60
1
vote
1 answer

flickity only shows first image

I've seen a couple of topics around this issue but adding imagesLoaded:true doesn't help. my code is very simple: var $carousel = $('.carousel').flickity({ imagesLoaded: true, freeScroll: true }); any advise would be appreciated. see…
Pico
  • 331
  • 1
  • 2
  • 14
1
vote
1 answer

How to set image count per page using flicikity slider

I am using flicikity slider for homepage. My problem is, I can't set more than 4 images per page. I read the document fully. I can't find the perfect answers. I used siema package there is an option called "perPage: 1", this option solved my…
PrakashT
  • 883
  • 1
  • 7
  • 17
1
vote
1 answer

Flickity carousel cards overlapping amongst themselves

I have two carousel on the same page. Reading multiple issues(https://github.com/metafizzy/flickity/issues/206) and the doc(https://flickity.metafizzy.co/options.html#carousel-cell2) I was able to make one of the carousel run perfectly. The…
Bhanu
  • 351
  • 2
  • 15
1
vote
1 answer

Multiple Flickity Carousels with custom navigations, page dots & progress bar

I have a carousel that when I first built it only need one per page. However I now need multiple carousels on one page. I've been updating the code to allow multiple carousels, including updating the custom navigation's & dots. However I've run into…
probablybest
  • 1,403
  • 2
  • 24
  • 47
1 2 3
…
15 16