Do not show navigation/paging ui when there is only one cell

[shadysamir]

When I apply flickity on a container with only one cell it shows one paging dot and one cell that, apparently, does not function as a carousel since it's the only item. Would be great if flickity does not show navigation UI (previous next arrows and/or page dots) when there is only one cell.

[shadysamir]

Or possibly, do not show navigation UI (previous next arrows and/or page dots) when there is only one cell

[yaodingyd]

You can easily have this logic in your side: check cell children length, if cell children is no more than 1, do not init flickity

[desandro]

Here's how you can do it in JavaScript:

// jQuery
var $carousel = $('.carousel');
var hasMultipleCells = $carousel.find('.carousel-cell').length > 1;
// init Flickity if mulitple cells
if ( hasMultipleCells ) {
  $carousel.flickity({
    // options...
  });
}

// vanilla JS
var carousel = document.querySelector('.carousel');
var cells = carousel.querySelectorAll('.carousel-cell');
var hasMultipleCells = cells & cells.length > 1;
// init Flickity if mulitple cells
if ( hasMultipleCells ) {
  new Flickity( carousel, {
    // options...
  });
}

[shadysamir]

Definitely I can always check the children of a container (potential cells) and decide not to activate flickity if there is only one child. But the behavior I am referring to is about hiding the navigation UI while flickity is activated with one cell. If, for example, I added a new cell with API then navigation would appear. If I remove cells with API and only one remains, navigation disappears.

I guess that's a feature request.

[desandro]

Sorry, Flickity does not support that feature. It will always show page dots and previous/next buttons, even if there is only one cell. This makes for consistent behavior and simple code to manage.

[terryupton]

It would be nice to be able to hide dots and arrows if possible. In the instance I am currently using the group feature, so on smaller devices I want the UI to show so only one item appears on screen, allowing to scroll the next 2. On a desktop all 3 fit on the screen so i'd like to remove the UI if there is no scrollling.

[pr1ntr]

I know this is closed but I wonder if there is a simpler solution where the flickity container just adds a class called "contained" if all the cells are in view?

[desandro]

@pr1ntr That would require a related feature see #638

[krstivoja]

With CSS only child you can hide dots.

.flickity-page-dots li:only-child{
display: none;
}

[Sennik]

Here's how you can do it in JavaScript:

// jQuery
var $carousel = $('.carousel');
var hasMultipleCells = $carousel.find('.carousel-cell').length > 1;
// init Flickity if mulitple cells
if ( hasMultipleCells ) {
  $carousel.flickity({
    // options...
  });
}

// vanilla JS
var carousel = document.querySelector('.carousel');
var cells = carousel.querySelectorAll('.carousel-cell');
var hasMultipleCells = cells & cells.length > 1;
// init Flickity if mulitple cells
if ( hasMultipleCells ) {
  new Flickity( carousel, {
    // options...
  });
}

Great example! But how about multiple flickity carousels in one page?