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
3
votes
2 answers

Set selected class on navigation buttons/links on JavaScript/Flickity timeline carousel

I am using Flickity to build a history timeline carousel for my client's website. I have built a simplified demo on CodePen showing how it currently works and what needs adjustment. CodePen demo The demo was adapted from this CodePen The areas that…
Mike Hermary
  • 346
  • 7
  • 22
3
votes
0 answers

How to display the slider inside the container and end till viewport

I am using flickity slider and it's working. What I am doing is, I have to start my slider from my heading like below image and when it's slide then it will go to the left side till viewport. I tried below code. $('.main-carousel').flickity({ …
user9437856
  • 2,360
  • 2
  • 33
  • 92
3
votes
1 answer

How do I initialize Flickity with HTML in Turbolinks

I am using the Flickity library. This is my HTML:
It works well on the first load, which creates this HTML:
marcamillion
  • 32,933
  • 55
  • 189
  • 380
3
votes
1 answer

Flickity via webpack returning different result

I am installing Flickity using npm: npm i flickity. Flickity version is 2.2.0 Then I call and use like this: import Flickity from 'flickity' const flickity = new Flickity(el, options) console.log(flickity) I have checked the function Flickity and…
Tyler Bean
  • 417
  • 1
  • 4
  • 14
3
votes
2 answers

Flickity images won't resize, they get cut off

I'm trying to set up Flickity carousel. It's working, but my images don't re-size with smaller screen. The just get cut off. I tried making images 100% width. Both in HTML and CSS. That made the images disappear altogether. I tried inserting the…
Newsong80
  • 109
  • 1
  • 11
3
votes
3 answers

VanillaJS to VueJS Error: bad element for Flickity: carousel

I'm trying to get this Flickity example (CodePen) to work in a VueJS component. HTML
Tom
  • 5,588
  • 20
  • 77
  • 129
3
votes
0 answers

Horizontal scroll in carousel (Flickity)

I am trying to add horizontal scroll with mouse wheel into the Flickity image slider. The browser console shows these errors: "Cannot set property 'x' of undefined" "Cannot read property 'x' of undefined" And those the behavior is pretty poor as…
Adrian
  • 273
  • 2
  • 13
2
votes
1 answer

Flickity-fade slider not working after following the installation docs from github; flickity just run like the regular slider

I'm following this flickity slide fade docs FlickityFade Installation Here is the css cdn package
billy ponto
  • 41
  • 5
2
votes
1 answer

Add class only on first carousel-cell (flickity)

i would have the class "opacity" inserted only at the first "carousel-cell". For the rest in the loop, they should not be there.
@foreach($projects as $p) @if($p->getMedia('teaser')->first() ??…
marlxnw
  • 41
  • 4
2
votes
0 answers

Flickity transform issue

Before the holidays my client's site was working fine with the Flickity carousel. But after returning it has completely crashed, but it starts working when I resize the window. I had a look at the console and I noticed that what is changing is that…
ryan.
  • 97
  • 2
  • 7
2
votes
0 answers

Flickity on change event not firing in Vue component

I'm using Flickity for a carousel component in a Nuxt / Vue project. I have created a custom page dots / navigation for the carousel and it works fine except when I drag / swipe the carousel the current slide index is not updating to also update the…
hendy0817
  • 979
  • 2
  • 20
  • 47
2
votes
2 answers

Nuxt app throwing "Cannot read properties of undefined" when child component renders with a carousel by Flickity

I am trying to link my own custom buttons to a flickity carousel in a nuxt application. My parent component set the default value for the prop direction to left. …
Maxime
  • 337
  • 2
  • 17
2
votes
1 answer

Custom buttons throwing "Flickity is not defined" in Nuxt application using carousel

I am trying to wire my own custom buttons to a flickity carousel in a nuxt application. In my carousel component I have this code