Disable dragging if single cell or no cells to drag to

[howells]

If you look here, you can see that when a carousel has only one item, there's a funny little bounce when it comes into view: http://www.new.the-katamama.com/en/rooms/island-suites

Wondered what the most simple way of avoiding that would be; if there's an option I can conditionally set depending on number of cells - appreciate I could just not init flickity if there isn't more than one cell, but would rather retain the styling.

[howells]

Actually just noticed it isn't just one cell - it's any number: here's one with more cells http://www.new.the-katamama.com/en/rooms/the-katamama-suite

[desandro]

Thanks for this feature request. Add a 👍 reaction this issue if you would like to see this feature added to Flickity. Do not add +1 comments. They will be deleted.

[danielvonmitschke]

+1 :)

[m-e-h]

+1 This would be a cool way to scroll a row of feature blocks horizontally on mobile rather than stacking them. Might even work for a "priority plus" style navigation.

[coreyworrell]

+1

[aaronstezycki]

I think single cell disable isn't enough in some cases, if you have 2 or three cells shown at a single time, disabling a single cell won't cover this use case. So should it be disable on X amount of cells, or even start working at X amount of cells?

[mrmartineau]

+1

[damcalder]

+1

[Jito]

+1

[coreyworrell]

Here's a quick fix, you must know the number of slides that you want it disabled under though.

flkty = new Flickity(element, config)

if (flkty.cells.length < 2) {
    flkty.unbindDrag()
}

[desandro]

@coreyworrell Great suggestion!

[timkirtley]

+1

I have a content managed carousel so I don't know the number of cells, and the width of the cells varies at different breakpoints, so it would be great if Flickity could work out whether the amount of cells it contained meant it needed to slide or not.

[randomgs]

+1

[GlassGruber]

+1!
Wild guess, can't be done a sum of the width of items in the carousel and if less than viewport then disable?

[svsdesign]

+1 :)

[rgfx]

One should disable more then just drag when there is only one image, and use lazyload.

Here is my solution.

var count = $('.product-gallery .image-cell').length;
  if (count < 2) {
    $('.product-gallery').flickity({
      draggable: false,
      cellSelector: '.image-cell',
      pageDots: false,
      prevNextButtons: false,
      lazyLoad: true,
      adaptiveHeight: true
    });
 }

$('.product-gallery').flickity({
  cellSelector: '.image-cell',
  lazyLoad: true,
  adaptiveHeight: true
});

[dioguzeda]

In addition, I tried to explore the "watchCss" option by adding a CSS class if the length is less or equal to x. This way you won't have to reload the page for it to resize. Here:

// counts if a flickity carousel has more than x cells
// then adds a class to use with watchCss option
$('.carousel-container').each( function() {
  var count = $(this).children('.carousel-cell').length;
  if (count <= 7) {
    $(this).addClass('no-scroll-lg');
    console.log( "blocked because it counts", count );
  } else {
    $(this).removeClass('no-scroll-lg');
    console.log( "not blocked because it counts", count );
  }
});

Example here: http://codepen.io/dioguzeda/pen/aBjBpN

[desandro]

🎉 Flickity v2.1.0 has been released with new draggable: '>1' default option. See docs! 🎉

Enables dragging and flicking. Enabled by default when carousel has 2 or more slides draggable: '>1'.

// Enable dragging with at least 2 slides
// set by default
// draggable: '>1'

---

I'm now closing this issue. Please open a new issue if you into trouble with using draggable. Thanks for all the 👍 over the years. 🌈🐻