I'm trying to load multiple flickity galleries on one page but I'm finding the gallery is only loading on the first set of images. 

I'm using the below code to initialise Flickity:

``` js
jQuery(function($) {
    var flky = new Flickity( 'div.product-image-archive', {
      cellSelector: 'div.product-image-archive img',
      accessibility: true,
      autoPlay: false,
      cellAlign: 'left',
      contain: true,
      draggable: true,
      freeScroll: false,
      friction: 0.2,
      initialIndex: 0,
      percentPosition: false,
      prevNextButtons: false,
      pageDots: true,
      resize: true,
      rightToLeft: false,
      setGallerySize: true,
      watchCSS: false,
      imagesLoaded: true,
      wrapAround: true,
      lazyLoad: 2
    });
});
```

Any help would be appreciated.

Thanks


How do I?

Multiple Flickity galleries on one page

![image](https://cloud.githubusercontent.com/assets/1037048/5904779/5a42f8c6-a58b-11e4-85fb-be018988cae8.png)

I think the outline visible in Chrome once you clicked the slider buttons, is not very aesthetically pleasing.


Document changing focus state on previous/next buttons

All slides are set to `aria-hidden="true"` after destroying carousel. This is not necessarily the state I want. In my particular use cases I'm only using the carousel on small screens. I want all my slides visible at once on large screens, so if I destroy on a resize event, the aria-hidden attribute is incorrect.

**Test case:** https://codepen.io/davejtoews/pen/PooMLqM


Flickity.destroy() sets all slides to `aria-hidden="true"`

when Accessibility/Voice over is ON- carousel swipe is not working in all ios devices. but it is working fine in Android 

**Test case:** https://zgks3izigkl5gnth-27173519412.shopifypreview.com/ (this link may expire in a week or two so let me know if it works or not)

Hi,

On our Shopify site, we use the unpkg CDN for Flickity. It looks like as of 2.3 the mobile touch/drag scrolling doesn't work, on any mobile OS+browser combination. Specifying it to version 2.2 DOES work again, although touch and drag feels a bit iffy on Safari/iOS.

You can test whats going on here by going to the link above and scrolling down to the New Arrivals or Our Best Sellers section (or any product page) **on mobile.**

For some reason on Windows desktop on Chrome/Firefox and using their basic built in mobile view tool, touch and drag works perfectly, so at first I didn't see the issue until I opened it up on my android phone in firefox.

If you have any quick fixes please let me know 😀
Thanks

v2.3 issues: Mobile/touch/drag in general seems to be broken on both Android/iOS

Hello! I don't _believe_ this particular ~~issue~~ question warrants a reduced test case, but correct me if I'm wrong and I'll set one up quickly.

Simply: when my pre-Flickity'ed markup starts its life as an unordered list, the Flickity-generated markup is then invalid: the `<li>`s are plopped into `<div>`s. Here's an example, borrowed from my [company's website](http://fromtheoutfit.com):

``` html
<ul class="testimonials-list custom-underlines--light-bg flickity-enabled is-draggable" tabindex="0">
  <div class="flickity-viewport" style="height: 390px;">
    <div class="flickity-slider" style="left: 0px; transform: translateX(0%);">
      <li class="testimonial is-selected" style="position: absolute; left: 0%;">
        ...stuff...
      </li>
      <li class="testimonial" style="position: absolute; left: 101.2%;">
        ...stuff...
      </li>
      <li class="testimonial" style="position: absolute; left: 202.4%;">
        ...stuff...
      </li>
      <li class="testimonial" style="position: absolute; left: 303.6%;">
        ...stuff...
      </li>
      <li class="testimonial" style="position: absolute; left: 404.8%;">
        ...stuff...
      </li>
      <li class="testimonial" style="position: absolute; left: 506%;">
        ...stuff...
      </li>
    </div>
  </div>
  <button class="flickity-prev-next-button previous" type="button">
    <svg viewBox="0 0 100 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(15,0)"></path></svg>
  </button>
  <button class="flickity-prev-next-button next" type="button">
    <svg viewBox="0 0 100 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path></svg>
  </button>
</ul>
```

I imagine that an acceptable solution might be: don't use an unordered list, but instead a series of `<div>`s … but then I'd lose some nice semantics.

Any thoughts? This is hardly a big issue, I'm just wondering if you've thought about it and if your proposed solution would be what I wrote above.

Thanks for your hard work!


wontfix

Validity of generated code

**Test case:** https://codepen.io/desandro/pen/azqbop

duplicate

flickity - accessibility is not working in ios. but it is working fine in Android

Hi, while appreciating a lot this good piece of work, I would like to suggest an improvement:

it would be nice to have new **options** to let you customize the **aria-label**'s that are set on **buttons** and **dots**, so users may provide custom labels and even translation (for non-English speakers).

It seems to me that this might be fairly simple to implement through the use of the `options` variable in  `page-dots.js` and `prev-next-button.js`.







Label customization via options

Hello, I am creating a page builder in vanilla JS. Now the contents are put into an iframe, and well im trying to initialise flickity on content that was dynamically created. Now, whats happened is, the initialising of the slider is successful but it ignores the new elements. Here's an example of how it looks after initialising.

```
<div class="carousel js-flickity flickity-enabled is-draggable" tabindex="0">
    <div class="carousel-cell">
        <a href="#" data-role="image" style="background-repeat: no-repeat; background-position: center top; background-image: url(&quot;http://placehold.it/350x150&quot;);"></a>
    </div>
    <div class="carousel-cell">
        <a href="#" data-role="image" style="background-repeat: no-repeat; background-position: center top; background-image: url(&quot;http://placehold.it/350x150&quot;);"></a>
    </div>
    <div class="carousel-cell">
        <a href="#" data-role="image" style="background-repeat: no-repeat; background-position: center top; background-image: url(&quot;http://placehold.it/350x150&quot;);"></a>
    </div>
    <div class="flickity-viewport" style="height: 0px;">
        <div class="flickity-slider" style="left: 0px;"></div>
    </div>
    <button class="flickity-prev-next-button previous" type="button" disabled="" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button>
    <button class="flickity-prev-next-button next" type="button" disabled="" aria-label="next"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button>
    <ol class="flickity-page-dots"></ol>
</div>
```
Flickity seems to be ignoring the carousel-cells. Even if i use the cellSelector option, it stills appears to ignore the elements as im presuming they are meant to be within the flickity-slider class.

Happy to provide more information on this.

test case required

Slider not initialising correctly on elements created dynamically.

Firstly thanks for building a great plugin.

I wanted to raise an issue that — without building an entirely custom navigation — the page dot text doesn't appear to be customisable, and the default text is not particularly accessible.

Proposal:
- Add config options for `pageDotText` and `pageDotTextSelected`
- Default these to something more descriptive, I would like to suggest something like:
  - `pageDotText: "Move carousel to page ${pageIndex}`
  - `pageDotTextSelected: "Carousel page ${pageIndex}: currently active"`

Additionally, [I agree with this issue about the use of li's](https://github.com/metafizzy/flickity/issues/777), and would like to suggest that these would be most appropriately changed to `button` elements since they do not navigate you away from the page or anchor you to a region on the page (so an `a` element is not quite appropriate either).

Page dot text is not descriptive (arguably not accessible)

Hi, I need to show 5 cells in the initial state, then to scroll them one by one. Here is:
http://codepen.io/anon/pen/ZKLMKY

But the last 4 scroll are useless. Infact you can see 4 more dot that are not needed. There's a way to solve this or is it a bug?

Thanks

Scrolling cells one by one

# Problem

Safari version: Version 14.0 (15610.1.28.1.9, 15610)
Flickity version: 2.2.1

Use Flickity slider and have an anchor element that has a div wrapped around it that has a click event listener.

Only in Safari, what was observed is the pointerdown event would fire, but never the pointerup, and therefore not the staticClick either, as described here: https://flickity.metafizzy.co/events.html#staticclick.

**Test case:** https://codepen.io/josephdpurcell/pen/pobVMbg

Unfortunately, I've been unable to reproduce the issue in the above test case.

# Proposed Resolution

As best I can tell, what was happening is the logic that runs to focus the flickity slider would trigger on pointerdown, the position of the mouse would move, at this point the pointerup event would fire, the distance between the pointerdown and pointerup would be greater than zero which would cause the static click to not fire.

To work around this, I was able to put a high z-index on the div element that had my custom click handler, so that I could use that click handler instead of the staticClick handler which wasn't firing.

I did attempt to use the `accessibility: false` technique as described here https://github.com/metafizzy/flickity/issues/194 just to see if that would allow staticClick to fire, and it did not work.

I attempted to use the https://github.com/metafizzy/flickity/issues/326 solution of `pointer-events: initial` and that did not work either.

All that said, this ticket is simply to document that I ran into this Safari-specific issue and share the workaround, which was to have a high z-index on the clickable element.

Static click not firing in Safari

I am using flickity with only draggable option enabled on desktop (no dots no arrows) and find it bit frustrating when once I focus on an image and drag id browser scrolls to top of that image, I am looking for a way to disable this behaviour if possible.


Scroll jump on click in scrollable container

I'm getting an accessibility error for an empty button state on the prev/next buttons since they contain to content except for the svg. Can you add a title tag or aria-label to the prev/next buttons?


title tags or aria-label on prev/next buttons

While testing navigability from the keyboard using tab and shift-tab, I had a mysterious blank slot when visual focus indicators went missing, and traced it back to the Flickity container. This seems weird, especially because space-bar-ing and enter-ing while focused on the container don't have any default effect on the slideshow. It seems to me that the default behavior should be no `tabindex`.

Accessibility folks generally seem to agree that if you're using `tabindex` at all, it's typically a sign that something's wrong your your markup. All's good with the Flickity `<button>` markup, so what's does adding `tabindex` on init do for the container? Could there be a declarative option to turn this off?

P.S. Thanks for another epic layout plugin. Huge props.


Why does flickity set tabindex="0" on the container?

This is a follow-up to #111.

![b297716c-3084-11e5-9f31-ad044ab136d6](https://cloud.githubusercontent.com/assets/980835/8856970/e63acdbe-3176-11e5-8740-743d18b59b4c.gif)

Focusing may be the right thing to do by all standards, but I think most people will agree that the behaviour depicted in the GIF is counterintuitive and confusing.

Please add an option to disable it.


Add an option to disable focus on click

Hi, this is more of a help question (possible feature request) but I've got various galleries setup with Flickity that have a wide container, but some of them only have 2-3 cells (items) in them (aligned left) so at that point I don't require the PrevNext arrows to show up since the cells are all displayed with plenty of room width to spare, but in this case the Next arrow shows up anyway and does nothing since the container is much wider than the cells, once I click the Next arrow, the Prev arrow shows up as well and also does nothing.

Any thoughts, advice or help would be appreciated! Thanks!


feature request

previous & next arrows do not move slider when multiple cells visible

I'm using flickity where it displays like 10 elements and there're 50 elements in the slider. The thing is when I arrive at element the 40th, the right arrow is still displayed even if there's nothing to slide anymore.

How could I easily display: none the right arrow? How can I know how many elements are displayed (because this slider is responsive, and the elements displayed could change)?

I need to count how many elements are displayed and where I am in the slider to disable the right arrow.


Disable navigation on end of scrolling when multiple slides on screen

With Flickity 1.1, there seems to be odd behavior if you attempt to click with `draggable` set to true. As the following youtube video demonstrates by former uses of Flickity that didn't have these issues prior to 1.1:
https://www.youtube.com/watch?v=FImIbHwN9mA&feature=youtu.be (Mobile Context)

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zngvEoJwv1I" frameborder="0" allowfullscreen></iframe>

https://www.youtube.com/watch?v=zngvEoJwv1I&feature=youtu.be (Random Size Context)

<iframe width="560" height="315" src="https://www.youtube.com/embed/zngvEoJwv1I" frameborder="0" allowfullscreen></iframe>

The erratic behavior is associated with items at the every ends of the visible portion of cells; essentially when the cells aren't  completely visible in the viewport ( a quarter or half of each cell isn't visible).

Even in a single column cell arrangement (see mobile-context vid), if the cell isn't completely visible in the viewport & has clickable items within the cells, click behavior similar to `#` links or `return false` happens.

These regressions cease to exist when `draggable` is set to false. All functions were turned off associated with events & also audited to ensure they weren't returning false or explicitly manipulating the propagation of events or the default action of events. 

Various events were investigated without any of them reproducing the odd click behavior until `draggable` was set to false

``` js
  // TODO: Scroller fascade pending
  /* Initialize Scroller for Days. Sets up the configuration object for
   * scrollerjs while also initializing if necessary specific objects to extend
   * the config object that scrollerjs expectes
   * @param {string} scrollerSelector The intended DOM string associated with the intended container for a successful initialization of a scroller
   */
  initializeScroller( scrollerSelector ){

    console.log( `initializeScroller called` );

    console.info( this.picker.querySelector( scrollerSelector ) );

    const FlickityOptions = {
      cellSelector: `${this.dayDOMSelectors.item}`,
      accessiblity: true,
      cellAlign: `left`,
      draggable: false,
      contain: true,
      freeScroll: false,
      wrapAround: false,
      prevNextButtons: false,
      pageDots: false,
    };

    window.addEventListener( `load`, ()=> {

      // Colleciton Wrapper should be merged in.
      this.scroller = new Flickity( `${scrollerSelector}-collection-wrapper`, FlickityOptions );
      this.scroller.reloadCells();
      console.log( `This should've been created` );

      // ES6 Arrow function use within this function regarding events ensures that any scroller that attempts to change this
      // to be something else other than the object is ignored; most scroller
      // attempt to use `apply` to change this for events they perhaps thought
      // users would only user behavior  within a scroller's properties & methods.
      // Most common w/ scrollers that accomodate jQuery or are only for jQuery.

      // Use optimized resize to handle resizing; will have to probably make it
      // a global since the Paralla home page component can also benefit from
      // this.

      // Optimized resize event handler using RAF: https://developer.mozilla.org/en-US/docs/Web/Events/resize
      ( function() {

        const throttle = function( type, name, obj=window ) {

          let running = false;

          const func = function() {

            if ( running ) {

              return;

            }

            running = true;
            requestAnimationFrame( function() {

              obj.dispatchEvent( new CustomEvent( name ) );
              running = false;

            } );

          };

          obj.addEventListener( type, func );

        };

        /* init - you can init any event */
        throttle( `resize`, `optimizedResize` );

      } )();

      window.addEventListener( `optimizedResize`, ()=>{

        this.scroller.reloadCells();

      } );

      this.scroller.on( `settle`, () => {

        // this.verifyVisibilityOfDays();
        // this.verifyStateOfNavButtons();

      } );

      this.scroller.on( `pointerUp`, (e) => {

       // this.verifyVisibilityOfDays();
       // this.verifyStateOfNavButtons();

      } );

      this.scroller.on( `staticClick`, (e) => {

        // this.verifyVisibilityOfDay();
       //  this.verifyStateOfNavButtons();

        });


        // this.verifyVisibilityOfDays();
        // this.verifyStateOfNavButtons();

      } );
      this.scroller.on( `cellSelect`, () => {

        // this.verifyVisibilityOfDays();
        // this.verifyStateOfNavButtons();
        //
      } );
      // Make the UI more responsive by changing state of things like buttions  as dragging & pointer moves occur; Also useful if designers want to add transitions to things that aren't visible or are as user drags or moves with a pointer
      this.scroller.on( `dragMove`, () => {

        //this.verifyVisibilityOfDays();
        //this.verifyStateOfNavButtons();

      } );

      this.scroller.on( `pointerMove`, () => {

        //this.verifyVisibilityOfDays();
        //this.verifyStateOfNavButtons();

      } );

  },

```

The erratic behavior seems isolated to `draggable` being true since none of the associated funcs desired to be invoked leave possibility of returning or invoking values that change the event lifecycle; for example:

``` js
  verifyVisibilityOfDays() {
    // days was a ES6 Set or Map; loops reverted to a for...of instead of a Rx.Observable or forEach for the sake of simplicity
    for( const day of this.days.values() ) {

      this.verifyVisibilityOfDay( day );

    }

  },

  verifyVisibilityOfDay( day ) {

    if ( this.isElementCompletelyVisible( day ) ) {

      if ( day.classList.contains( `not-visible` ) ) {

        day.classList.remove( `not-visible` );

      }

      day.classList.add( `visible` );

    } else {

      if ( day.classList.contains( `visible` ) ) {

        day.classList.remove( `visible` );

      }

      day.classList.add( `not-visible` );

    }

  },

```

In conclusion, it seems something seems have gone wrong with the behavior of `draggable` being true from the recent update 15 days ago;  I would love to be enlightened of a quirk 


Clickhandlers acting erratically with 1.1 if `draggable` is true

Hi,

Giving Flickity a try for my upcoming project, and it's looking pretty good!

However i'm seeing one thing that's kind of odd, when my page is loaded and my Flickity Carousel is initiated - when i click either the left/right nav or a dot the page sometimes jumps aligning the top of my Flickity container to the top of the screen. When it does, i have to click again for the next gallery-cell.

It only does this once (after page load).

Any ideas on how to fix this?


Jump on click

I got a request to resume `autoPlay` after the user have hovered off the element, regardless if the user selected a cell while hovered on.

I'll need to provide code and an example.


Resume autoPlay after hover off

Does anyone have experience using flickity as a full width, full height page slider. 
I'm trying the following

```
.gallery-cell {
    width: 100%;
    height: 100%;
}
```

And this is my JS

```
    $('#gallery').flickity({
    cellSelector: '.gallery-cell',
    accessibility: false,
    percentPosition: true
});
```

But with no result! Thank you


Height 100%

I've only been able to recreate this behavior in WebKit browsers:

After a flickity instance has been initialized, scroll the page so it's only half visible. Click on a cell and the window will jump to make the whole flickity instance visible. 

http://codepen.io/jasonwbullok/pen/PwBrzG

(I'm also seeing this behavior on the flickity homepage instances)


Window scrolls to show full gallery on initial click

Flickity could improve its accessibility by adding ARIA standards. We could use help here. Happy to consider your suggestions for adding ARIA attributes and roles.

http://www.w3.org/TR/wai-aria/

http://www.w3.org/WAI/tutorials/carousels/

http://accessibility.athena-ict.com/aria/examples/carousel.shtml

---

From what I gather, best route would be to recommend adding ARIA attributes into user's markup, rather than relying on Flickity to do it.

`aria-hidden` might be useful to highlight which cells are outside the carousel, but this would require adding logic to detect when cells are and are not visible.


help wanted

Improve accessibility with ARIA

How it should be:
` <div class="flickity-viewport" style="height: 426px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(38.76%);"><div class="carousel-cell cell-1 is-selected" aria-selected="true" style="position: absolute; left: 0%;">`

As it is displaying:

`<div class="flickity-viewport" style="height: 440px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="carousel-cell cell-1 is-selected" aria-selected="true" style="position: absolute; left: 0%;">`

On low 3G connections, the css is not configuring slide positioning. How to solve this?

Hi all,
Currently if you attempt to interact with the prev/next buttons while the slider is not in a favorable viewport position, the page jumps you down to the slider, but doesn't actually plumb-through the action you clicked on. For example, if I click the next arrow while it is not "in-view", then I am jumped to the slider, but it does not pass through the next click event as I expect, so I have to click the next button again.

I'm having trouble finding where this is done in the source, but don't want to have to turn off `accessibility` (which resolves the issue) because that also negates keyboard nav. Thanks!


accessibility focus issue

I have a site where I have a sticky header using [Headroom.js](http://wicky.nillia.ms/headroom.js/). When changing the slide of a flickity gallery on for the first time and the gallery is not completely in the viewport, flickity scrolls up to have the gallery completely in the viewport. In my case this activates Headroom.js to display the header and covers the gallery again. The same bug also exists if the header was positioned: fixed. This is only the case on non-touch devices.

It would be nice to completely disable this behavior since in my case this feature is quite annoying.

Also nice would be a callback where I could alter the position flickity is going to scroll to and add the height of the header.

I created a reduced test case scroll until the gallery is almost not visible anymore an the click on a dot in the pager: http://codepen.io/luksak/full/bVrrRr


Option to disable or modify behavior of scrolling galleries into the viewport

The overflow:auto declaration prevents flicking on Android, with some odd behaviour after using the navigation buttons:
https://codepen.io/srangara/pen/bZrxYg

I unfortunately have a need for fixed height and width cells (to tile a background) so overflow is important to address variable content... without abandoning the whole background scheme, of course.

Use case: https://bwmc.reposterous.com

overflow:auto prevents flicking/dragging on mobile (Android)

Click functions attached to the next/previous buttons don't fire when scrolling to the first and last slide.

https://codepen.io/anon/pen/VRyBaj?editors=1111

Click events on the prev/next buttons

When opening the modal, `.flickity-viewport` has a `height` of `0`:

![screen shot 2016-02-03 at 7 25 24 pm](https://cloud.githubusercontent.com/assets/378165/12801626/fa49ffc2-caab-11e5-852d-a59a8fca4921.png)

Resizing the window seems to fix the height.

[Reduced test case](http://codepen.io/dustinhorton/pen/QyVvXM)


Flickity in modal has no height until resize

Hi,

it will be nice to have a tsd file to use with Typescript. it's working fine with typescript now, but it's showing a compilation error.


Type script definition for flickity

when set slider  "autoPlay:true"  and open page including slider in another browser tab , if I click on slider tab, slider playing crazy fast and it seems that autoplay is working when we tab is not active too; I record video for this issue if you want i can email it;


autoPlay advances while tab is in background

@desandro 

What does the carousel landscape look like these days?

Flickity still at the top of the list or has recent technology made flickity obsolete? (Btw,  I like flickity a lot)

Would love to hear your observations and thoughts!

Carousel landscape 

**Test case:** https://codepen.io/desandro/pen/azqbop

Hi
Would it be possible for the classname 'is-selected' to be customizable in the object instance, as one more option?

for example:

```
new Flickity (elem, {
    isSelectedClassname: 'my-is-selected-classname'
});
```

Thanks in advance!

Custom 'is-selected' classname

I've found that I'm unable to focus on child elements of the slider on click. Please refer to the reduced test case: https://codepen.io/anon/pen/YVMmzp

Before initialization, I can focus with no problem. After init, it seems like the elements inside the slider are not focusable.

Is this behaviour intended?

Unable to focus on slide items

Hi all,
i have a problem with slider and height.
If i initialize the slider in the document.ready, the slider will have height 0px the first time i load the page.
If i initialize the slider in window.load, it works but for an instance i will see all the slide in a column.

What is the best practice for that?

Thank you


Problem with slider height

**Test case:** https://cliniqueduval-17c9a.firebaseapp.com/
1 - when you click on "Accueil" menu --> the slider renders well
2 - you click on other menu and return to the " accueil" menu --> the slider doesn't work

I created a component slider : 

```
<div class="carousel" data-flickity='{ "cellAlign": "center","accessibility": true,"wrapAround": true,"initialIndex": 1,"freeScroll": false, "prevNextButtons": true, "pageDots": false }'>
    <div class="carousel-cell">
        <img class="carousel-cell-image" src="../../../assets/1.jpg" alt="tulip" />
    </div>
    <div class="carousel-cell">
        <img class="carousel-cell-image" src="../../../assets/2.jpg" alt="tulip" />
    </div>
    <div class="carousel-cell">
        <img class="carousel-cell-image" src="../../../assets/3.jpg" alt="tulip" />
    </div>
</div>
```

in the component class i use a constructor : 

```
  constructor() { 
    var Flickity = require('flickity');
  }
```
i added the js dependecy of course.

PS : when the slider is called from the root component it works fine and without the require.

Slider dosn't render with angular 2 lazy router

Please examine the jsfiddle.

**Test case:** https://jsfiddle.net/ezqvh900/1/

In my example, i have a blue outline that indicates the selected cell. If you press the next button, you can see the blue outline move right, however the carousel doesn't move, until the blue outline has reached the right side, (due to the "cellAlign: 'right'" option)

In my application, i do not have this blue outline. This would be the bottom carousel in my example.
When the user clicks the next button, he has to click it several times until the carousel begins to move, so it gives off the illusion that page buttons are somehow buggy. The easiest fix is to just add this outline, however i was wondering if there was a way within flickity to just move the carousel left/right, regardless of the selected cell or cellAlign.

Broken pagination buttons illusion, due to a combination of options.

Can be seen in the official Codepen :
https://codepen.io/desandro/pen/dPdoRO

Is it linked to accessibility or the new staticClick event triggered event on non draggable sliders ?


"draggable: false" with "prevNextButtons: true" triggers "next()" two times 

Sorry, hopefully a quick answer to a quick question. Does the new "draggable" option support more than `>1` expression? i.e: can I put in `>2` or `>3` to only enable dragging when there 3 or more slides.

I have tried this, and currently it seems that only `>1` is currently accepted as a value ?
If this is the case (and that's fine) could we update the documentation just to make users aware that the number value is not changeable?


Draggable '>2'

See codepen below. Open the console in devtools. Scroll down so both sliders are visible. Click in one slider, then in the other. Each time, a window scroll event is logged.

**Test case:** https://codepen.io/anon/pen/XegKLG


Multiple instances on a page trigger window scroll events when clicking between them

I'm trying to set the height of my header slider to 400px, however the class 'flickity-viewport' persists on 300px. Example can be found here https://www.uisge-beatha.eu/test-2

The html / smartyy code looks as follows:

``` html
<div class="main-carousel" data-flickity='{"imagesLoaded": true, "contain" : true, "percentPosition" : true, "initialIndex" : 2, "wrapAround" : true, "autoPlay": 2500, "setGallerySize": true, "adaptiveHeight": true}'>
{foreach from=$images item=image}
    <div class="carousel-cell"> 
        <div class="carousel-content">
            <div style="background: url({CGSmartImage src="{$image->file|escape:'url'|replace:'%2F':'/'}" noresponsive=1 alt="{$site_name} - {$image->title}" notag=1} ); no-repeat center center; height:400px; width:100%; background-size:cover;">
            </div>
        </div>
        <div class="carousel-meta">
             <h3>From Wetlands To Canals And Dams Amsterdam Is Alive</h3>
        <span><i class="fa fa-clock-o" aria-hidden="true"></i> January 7, 2013 </span>
   </div>
{/foreach}
</div>
```
According to the manual I tried chaning "setGallerySize" to false, but then the slider disappears.  

The CSS looks as follows:
``` css
.main-carousel .flickity-viewport {
  height: 400px;
}
.main-carousel {
  background: #AAA;
  padding: 1px;
  height: 100%;
}
 
.carousel-cell {
  position: relative;
  height: 100%;
  width: 100%;
  margin-right: 2px;
  background: #ddd;
}

.carousel-cell .carousel-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 400px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  color: white;
}
.carousel-cell .carousel-content .carousel-meta {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
  padding: 120px 20px 40px 20px;
}
.carousel-cell .carousel-content h3 {
  color: white;
}
.flickity-viewport {
  height: 400px;
}
```

Been experimenting with chaning the "flickity-viewport", but no luck.

The images have a height of 400px., so the bottom 100px are not shown.

Is there a way to get the viewport to 400px?

One other thing I noticed is the "carousel-meta" is shown behind the photo's instead of in front. Is there a way to change this?

Viewport height persists

I have multiple flickity carousel's on one page which have full screen enabled. What I'm trying to do is detect when the div` .gallery__slides` has the class `is-fullscreen` and add a class to the parent div `.gallery-container` of `is-fullscreen`.

Here is a[ jsFiddle](https://jsfiddle.net/probablybest/ors836uk/) of my code.

You can see where I have tried to add a simple hasClass but this doesn't seem to be working.

```
//is fullscreen detection
    if ($(".gallery__slides").hasClass("is-fullscreen")) {
      $(this).parent().addClass('is-fullscreen');
    }
```
Here is all my JS:

```
$(document).ready(function(){

  $('.gallery-container').each(function(i, container) {
  
  var options = {
    cellSelector: '.gallery__slide',
    cellAlign : 'center',
    pageDots : false,
    prevNextButtons : false,
    accessibility : false,
    wrapAround : true,
    imagesLoaded : true,
    pauseAutoPlayOnHover: false,
    fullscreen: true,
    lazyLoad: 1,
    autoPlay: 7000
  };
  var time = 2;
  var $bar,
      $slider,
      isPause,
      tick,
      percentTime;

  $('.gallery__slides').flickity(options);
  
    var $container = $(container);
    var $slider = $container.find('.gallery__slides');
    var flkty = $slider.data('flickity');
    var selectedIndex = flkty.selectedIndex;

    var slideCount = flkty.slides.length;
    var $pagers = $container.find('.gallery__page-dots');

    for (i = 0; i < slideCount; i++) {
      $pagers.append('<li class="gallery__page-dot-item"></li>');
    }

    var $pager = $pagers.find('li');

    var $caption = $container.find('.gallery__caption .image-caption');

    $slider.on( 'select.flickity', function() {
      // set image caption using img's alt
      $caption.text( flkty.selectedElement.children[0].alt );
      $pager.filter('.is-selected').removeClass('is-selected');
      $pager.eq(flkty.selectedIndex).addClass('is-selected');
    });

    $pagers.on( 'click', 'li', function() {
      var index = $(this).index();
      $slider.flickity( 'select', index );
    });

    // previous
    var $prev = $container.find('.prev');
    $prev.on( 'click', function() {
      $slider.flickity('previous');
    });
    // next
    var $next = $container.find('.next');
    $next.on( 'click', function() {
      $slider.flickity('next');

    });

		//is fullscreen detection
    if ($(".gallery__slides").hasClass("is-fullscreen")) {
      $(this).parent().addClass('is-fullscreen');
    }
  });
});
```

Detect if flickity carousel is full screen and add class to parent wrapper

Currently Flickity's new lazy load feature works by specifying how many images before and after the current cell is being lazy loaded. Is it possible to load every cell that's visible instead of specifying the number of cells. Maybe `lazyLoad: 'auto'`, or is this a feature already available right now? 

Thank you !


LazyLoad all Visible Items

flickity

I'm experiencing a little problem with one of my sliders.

``` javascript
// Defined in seperate JS file
function scrollEnd(flickelem) {
    // FLICKITY DragEnd

    if ( flickelem.options.freeScroll ) {
        flickelem.isFreeScrolling = true;
    }
    // set selectedIndex based on where flick will end up
    var index = flickelem.dragEndRestingSelect();

    if ( flickelem.options.freeScroll && !flickelem.options.wrapAround ) {
    // if free-scroll & not wrap around
    // do not free-scroll if going outside of bounding cells
    // so bounding cells can attract slider, and keep it in bounds
    var restingX = flickelem.getRestingPosition();
    flickelem.isFreeScrolling = -restingX > flickelem.cells[0].target &&
    -restingX < flickelem.getLastCell().target;
    } else if ( !flickelem.options.freeScroll && index == flickelem.selectedIndex ) {
    // boost selection if selected index has not changed
    index += flickelem.dragEndBoostSelect();
    }
    // apply selection
    // TODO refactor this, selecting here feels weird
    flickelem.select( index );
}

// Inside a <script> tag inside the document
$(function(){
    $(document).ready(function(e) {
        var cellCount = $('.gallery-cell').length;
        var canWrapAround = false;
        if(cellCount > 1) canWrapAround = true;
        $('.text-slider').flickity({
            accessibility: true,
            autoPlay: false,
            cellAlign: 'center',
            cellSelector: undefined,
            contain: true,
            draggable: true,
            freeScroll: true,
            friction: 0.2,
            imagesLoaded: true,
            initialIndex: 0,
            percentPosition: true,
            prevNextButtons: false,
            pageDots: false,
            resize: true,
            rightToLeft: false,
            watchCSS: false,
            wrapAround: canWrapAround
        }).mousewheel(function(e) {
            e.preventDefault();
            var flickelem = Flickity.data(this);

            if (e.deltaX) {
                flickelem.x += e.deltaX * e.deltaFactor;
            }
            else if (e.deltaY) {
                flickelem.x += e.deltaY * e.deltaFactor;
            }
            scrollEnd(flickelem);
        });
        $(window).load(function(e) {
            $('.text-slider').flickity('resize');
        });
    });
});
```

I am using the jQuery `mousewheel`plugin to support scrolling inside flickity. But somehow on mobile devices occasionally I can't reach the last cell. It always flicks back to the previous one. Could it be a bug or could it be a fault of me?


Enable scrolling via mousewheel

Looks awesome and quite perfect to me. The only thing i’m missing so far is some kind of ‘autoScroll’ when using the ‘freeScroll’ Option. ‘autoPlay’ is not working as expected.

( copy of comment made here: https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/#comment-1592976 )


Continuous autoPlay scrolling - autoScroll

I'm wondering if you have any suggestions for determining if you've arrived at the boundary of the carousel when the contain option is specified. (So that one could say for instance disable the next or previous buttons).

When not using the indicator dots for position feedback this kind of behavior _appears_ confusing, though I understand the logic here.

Example:

![contain-carousel](https://cloud.githubusercontent.com/assets/112297/11218816/21524e86-8d25-11e5-8342-447aa2d5be7b.gif)


Disable prev/next buttons for contain

Hello David, I've tried to use flickity as a content slider (e.g. where slides have actual content, links, etc.) and seems to be not accessible at all. 

First of all, I understand there is not your fault because there are no stable conventions on that. But within current setup you can focus the slides that are not in the viewport which seems to be very confusing. I also created a question on StackExchange: 
https://ux.stackexchange.com/questions/118607/content-slider-carousel-accessibility-best-practices

# Slide out of the view
**Test case:** https://codepen.io/runnick/pen/MXKqLY
E.g. try moving slide 1 off the screen and then focus: it will focus on the link but since slide is invisible there is no cue it's focused. One workaround is to only allow focus slides that are currently on the screen. 

# asNavFor
**Test case:** https://codepen.io/runnick/pen/QxyZwL

This one also doesn't work because even if you add tabindex=0 to the navigation slide to make it focusable, Enter does nothing, and to get back to the active slide you need to tab back through all previous nav item (but that seems to be a behavior for all sliders with the navigation). 

# Carousel (groupCells) 
I'm still researching here, but if someone has suggestions on how it should work, please do so. 

Do you think you're interested in working on the solution? If not, I understand, but maybe you could provide some suggestion on what will be the best way to make it better. Thanks!






Not accessible when used as a content slider

The page dots are not accessible for three reasons:

1. They are not tabable. They are list items. You can fix this in several ways. Either give them a `tabindex="0"` or make them links or (and this is what I would recommend) make them real buttons.

2. If you are able to tab to a dot (because let’s say you applied a `tabindex="0"` to it), a screen reader will still recognise it as a list item and not as a button and read it out accordingly, which may confuse the user. Again you can fix this in several ways. Either you give the dot a role='button' or (and this is what I would recommend) make it a real button.

3. Let’s pretend you can tab to a dot and the screen reader recognises it as a button (because you went with the `tabindex="0"` + `role="button"` solution). Now you still cannot activate the dot by pressing enter on the keyboard. And again you can fix this in a few ways: Either you add a keyup event handler and check for the enter key code or (surprise surprise) you make the dot a real button (which will out of the box trigger the click event handler on a keyup enter).

To sum up: If you want to avoid styling issues and maybe need to account for backwards compatibility, give the dot a `tabindex="0"`, a `role="button"` and apply another keyup event handler for the enter key. Other than that use real buttons.

And also please do not forget to apply the same or similar focus styles to the dots as to the previous and next page buttons.

To reproduce the issue simply visit the default pen below and try to use the dots via keyboard. Additionally (as a bonus, kind of) you can switch on a screen reader of your choosing.

**Test case:** https://codepen.io/desandro/pen/azqbop

Page dots are not accessible

When more than one cell is visible, only the currently selected cell is exempt from having an `aria-hidden: true` attribute affixed. This is non-compliant in instances where _more than one cell_ is in view.

The carousel would have to know which cells are inside/outside the viewport to correctly apply the attribute. @desandro called this out explicitly in this thread: https://github.com/metafizzy/flickity/pull/774#issuecomment-400517559
(which refs issue [638](https://github.com/metafizzy/flickity/issues/638))

**Test case:** https://codepen.io/jasonwbullok/pen/bGNOrpa
(e.g. inspect cell number two to see the `aria-hidden: true` attribute)

Aria-hidden attribute incorrectly applied when more than one cell in view

I ran an accessibility test on the site https://flickity.metafizzy.co/ using VoiceOver on iPhone 8 and Macbook Air.

Mobile -> When you click the back button or the next button, screen reader is lost and does not read any more.
Desktop -> As with the cell phone, it does not direct you to read the content of the new slide and continues the navigation leaving the carousel.

Expected behavior:
When clicking back or next in the carrousel, the screen reader is directed to read the content of the new slide.

Accessibility bug - Screen reader crashes after clicking back or next

In order for a carousel to be fully accessible, it needs controls to start/stop the rotation. Is this an option you have available to implement. Here is an example of a fully accessible slideshow: https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html
We are hoping to keep using Flickity but have to be accessible. Are there plans to make the carousel accessible with the functionality in the example? I'd love to have an accessible slideshow I can recommend to other clients also!!

Thanks so much!


Carousel accessibility

Heya!
According to this tool ([https://wave.webaim.org/]), both the next and previous buttons are, even though there's an SVG generated and labelled with ARIA nomenclature, considered empty and a possible problem for people relying on screen readers.

Would it be a possible solution to add a title tag to the SVG itself so it may be considered well-formed and readable again?? I.e. for the "previous" button:

```
<button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous">
<svg class="flickity-button-icon" role="img" aria-describedby="prevCont" viewBox="0 0 100 100">
<title id="prevCont">Previous Content</title>
<path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path>
</svg>
</button>
```

Regards,
Tom


Flickity previous and next buttons not fully accessible (according to WAVE tool)

Hey there! I'm just writing to ask about accessibility. Folks who use keyboard navigation do not have an easy way to navigate between the arrows and the slides in a way that makes sense. The arrows come in the DOM after the slide content, when really it should read "Prev arrow, slide content, next arrow" for every instance. Is there a way that we could at least move the previous arrow to be in front of the slide content? Even just that small change would make more sense.

**This generic test case showcases the issue:** https://codepen.io/desandro/pen/azqbop


v3.0.1

Prev/Next arrows are not accessible.

I have a photo carousel, I want it to be purely decorative so I set `draggable: false` however when i try to drag it, the autoplay stops.

```js
  var flky2 = new Flickity( '.photos', {
    accessibility: false,
    adaptiveHeight: false,
    imagesLoaded: true,
    autoPlay: 3000,
    cellAlign: 'center',
    cellSelector:'.photo',
    draggable: false,
    freeScroll: false,
    groupCells: false,
    initialIndex: 0,
    pauseAutoPlayOnHover: false,
    percentPosition: true,
    prevNextButtons: false,
    pageDots: false,
    resize: true,
    wrapAround: true,
    lazyLoad: true
  });
```

draggable: false yet attempting to drag stops autoPlay

Hello,

We have discovered an accessibility issue on the Flickity slider utilized in the Impulse theme by Archetype on our Shopify store. This appears in the <button> element for image zoom on product images in the shop (e.g. https://www.soapcauldron.com/products/essential-oil-lavender) and is flagged by Google Lighthouse and Axe Dev Tools. This button does not have an accessible name; the zoom functionality is not announced by screen readers. I believe all that is required is to add an aria-label or title to the button element.

I was unable to find an existing issue, or a suitable codepen to include a reduced test case here—please let me know if I missed that, or if this issue is better addressed elsewhere. Thank you!


Image zoom buttons do not have an accessible name - Shopify Product Slider

**Test case:** https://codepen.io/dholbert/pen/XWwbrRK
(This is just the default testcase, which I forked & didn't modify at all)

Steps to Reproduce:
1. Use Firefox to view [that testcase](https://codepen.io/dholbert/pen/XWwbrRK). Click the left/right arrows, and notice how long the animation takes to complete.
2. Now, visit `about:config` and set preference `layout.frame_rate` to `2` (to limit the browser repaint cycle to 2-per-second).
3. Look at the testcase again and try clicking the arrows.

Actual Results:
The animation still plays every single frame of animation, but in extremely slow motion.  So it takes ~20 seconds to complete the animation.

Expected Results:
Animation should still take the same amount of time (1 second or so), and each frame should simply make a huge amount of progress.

Notes:
* It seems that Flickity isn't tracking how much time passes between requestAnimationFrame calls, to ensure a consistent animation duration and animation speed.
* This particular configuration option (`layout.frame_rate`) is something that Firefox users do actually use for accessibility purposes, to reduce motion sickness from smooth animation. (See also https://github.com/metafizzy/flickity/issues/951 for a related-but-distinct flickity issue that's affecting this same group of users.)
* If you happen to test this on Linux with Wayland, note that you may also need to run Firefox with `MOZ_ENABLE_WAYLAND=0` environmental variable in order for the `layout.frame_rate` config option to have an effect.

Flickity animations take forever if your browser is configured to throttle frame rate (and hence requestAnimationFrame callbacks)

The wrapAround property in Flickity is not functioning as expected. When enabled, the carousel should seamlessly loop back to the beginning when reaching the end of the slides. However, in my implementation, the slides do not wrap around correctly, and the carousel stops at the last slide.

**Steps to Reproduce**
1. Initialize a Flickity carousel with the **wrapAround** option set to `true`.
2. Add multiple slides to the carousel.
3. Attempt to navigate through the slides to observe the wrap-around behavior.

**Expected Behavior**
The carousel should loop back to the first slide after reaching the last slide, creating a seamless wrap-around effect.

**Actual Behavior**
When on first slide the last adjacent slide flickers and similarly when on last slide the adjacent first slides flickers.

```
const carouselElement = el.querySelector(`.${CAROUSEL_CLASS_NAME}`);
const flickity = new Flickity(carouselElement, {
          wrapAround: true,
          imagesLoaded: true,
          accessibility: true,
          adaptiveHeight: true,
          autoPlay: Number(el.dataset.speed) || false,
          pageDots: el.dataset.slideDots === 'true',
          prevNextButtons: el.dataset.prevNextButtons === 'true',
          lazyLoad: true,
        });

```

- Flickity version: ^2.3.0
Using this with apostrophe, version 4.8.1.

Please let me know if you need any further information or if there are any workarounds for this issue.



WrapAround is not working as expected, When on first slide the last adjacent slide flickers and similarly happens on the last slide.

Hey team, 

Was having a bit of issues with Flickity for ada compliance. Specifically " ARIA hidden element must not be focusable or contain focusable elements
Ensure aria-hidden elements are not focusable nor contain focusable elements"

This is on (packaged) v2.2.1 so this might have been fixed on a more recent version but situation required to resolve at "as is" so this might be edge case functionality. 

As a fix I built out a js listener and modifier to catch and modify these status/declares to meet wcag needs. 

The addon I made is located here: https://github.com/luckyth13teen/Flickity_ada_assist  

Since this was built for specific resolution there is likely some code that is unhelpful/unnecessary, but would rather your team be the judge of its value (or not).

flickity

59 GitHub issues

Open issues

Links