-
Notifications
You must be signed in to change notification settings - Fork 603
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disable dragging if single cell or no cells to drag to #278
Comments
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 |
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. |
+1 :) |
+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. |
+1 |
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? |
+1 |
+1 |
1 similar comment
+1 |
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()
} |
@coreyworrell Great suggestion! |
+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. |
+1 |
+1! |
+1 :) |
One should disable more then just drag when there is only one image, and use lazyload. Here is my solution.
|
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 |
🔔 add draggable: >1, on drag when slides > 1. #278 + remove font file
🎉 Flickity v2.1.0 has been released with new
// 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 |
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.
The text was updated successfully, but these errors were encountered: