Disable prev/next buttons for contain

[dzucconi]

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:

[desandro]

Yes, this is a tricky issue. I'll repeat my thoughts on why page dots and the prev/next buttons work with contain #177 (comment) and #135 (comment)

When multiple cells are visible or with 'contain': true, there can be areas when clicking the previous/next arrows won't move the slider.

While the slider does not change, the selected cell does. This may be useful for accessibility, as it allows users to select a cell with buttons, rather than with mouse.

You can detect when the slider is at the end with contain with this code. See demo http://codepen.io/desandro/pen/KdEPJo?editors=001

flkty.on( 'cellSelect', function() {
  var target = flkty.selectedCell.target;
  if ( target == flkty.cells[0].target ) {
    console.log('is at contained start')
  } else if ( target == flkty.getLastCell().target ) {
    console.log('is at contained end')
  }
});

---

If you're looking to disable prev/next buttons, you could do it by hacking Flickity.PrevNextButton. See demo http://codepen.io/desandro/pen/LpaPya?editors=001

var PrevNextButton = Flickity.PrevNextButton;
PrevNextButton.prototype.update = function() {
  // index of first or last cell, if previous or next
  var cells = this.parent.cells;
  // enable is wrapAround and at least 2 cells
  if ( this.parent.options.wrapAround && cells.length > 1 ) {
    this.enable();
    return;
  }
  var lastIndex = cells.length ? cells.length - 1 : 0;
  var boundIndex = this.isPrevious ? 0 : lastIndex;
  var isEnabling;
  if ( this.parent.options.contain ) {
    var boundCell = cells[ boundIndex ];
    var selectedCell = cells[ this.parent.selectedIndex ];
    isEnabling = selectedCell.target != boundCell.target;
  } else {
    isEnabling = this.parent.selectedIndex == boundIndex
  }
  var method = isEnabling ? 'enable' : 'disable';
  this[ method ]();
};

I do not recommend disabling buttons like this as selecting cells is useful for accessibility.

[dzucconi]

Ah, I see that makes sense. This issue is indeed trickier than I thought. The examples are a great help, thank you!

[desandro]

Re-opening for other's visibility

[peduarte]

Having the same issues, thanks for the demos @desandro, really really helpful man.

However, I am still able to replicate the error by using a combination of dragging and clicking on prev/next. You can see it in both of the demos above. Start by dragging the slide to the very end (dragging left) until the last cell is highlighted in yellow.
Now, click on the previous button, you'll notice you need to click twice until the slider starts moving again. Not so much of an issue in this demo, as the highlighted cell changes, but in my current use case, it feels like a bug.

Wonder if would be worth having that as an option though, for example:
detectContainedEnd, setting to true would disable the next button when the last item is in view.

Thanks a lot

[dinealbrecht]

+1

I'm also still having issues with this when using a carousel as navigation for another carousel.

The fact is that in this case an item in the carousel can be selected by the user. Therefore that item then has a class 'is-selected' and if this selected item is the last item in the carousel, and the carousel is cell-aligned to the center or to the left, a click on the left button doesn't move the carousel anymore.

Even if the fix from above has been applied.

[musdy]

Any update on this one @desandro?

[desandro]

One solution is to use groupCells, so that cells are grouped together. When you are in the last group, multiple cells are still visible, but the next button will be disabled.

Also trying to solve this for a project with cell align left.

Got this maybe working;
Maybe it is a idea to add var boundLastSlide or something like that.
When a slide has the endBound on his target, then is know it is the last slide that is going to move.
slide.target = Math.min( slide.target, endBound );
And set that one as last slide.
[Example: When you have 6 slides, and number 4 is the last one that slides. Number 4 is the "fake last slide"]

Then u can bound the next button to a end.
example test code:

in the flickity create add this.boundLastSlide = null;

in function:
proto._containSlides = function() {
add after:
slide.target = Math.max( slide.target, beginBound ); slide.target = Math.min( slide.target, endBound );

This:
if ( slide.target == endBound) { var slideIndex = this.slides.indexOf(slide); if (this.boundLastSlide == null ) { this.boundLastSlide = slideIndex; } else if ( this.boundLastSlide > slideIndex ) { this.boundLastSlide = slideIndex; } }

Then this.boundLastSlide has the last slider.

On PrevNextButton.prototype.updatereplace:
var lastIndex = slides.length ? slides.length - 1 : 0; var boundIndex = this.isPrevious ? 0 : lastIndex; var method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable';
with:
if ( this.parent.options.contain || !this.parent.options.wrapAround || this.parent.cells.length || this.parent.boundLastSlide != null ) { var lastIndex = this.parent.boundLastSlide; if ( this.isPrevious ) { var method = this.parent.selectedIndex == 0 ? 'disable' : 'enable'; } else { var method = this.parent.selectedIndex >= lastIndex ? 'disable' : 'enable'; } } else { var lastIndex = slides.length ? slides.length - 1 : 0; var boundIndex = this.isPrevious ? 0 : lastIndex; var method = this.parent.selectedIndex == boundIndex ? 'disable' : 'enable'; }

// Not all edits given.

Only this doesn't solve the page dots, but can be a step to work with contain and the bounds.
Sorry if the post is not so clear. But hope the code tells something.

Maybe it can done better only in the post u made in nov 2015. #289 (comment)

Demo Video https://www.youtube.com/watch?v=5Oy_nYpB4No