How to hide prev/next arrows if not needed

[robarwebservices]

Is there any setting or easy way to hide the prev/next only if there aren't enough items to need them?

e.g. dynamic width container (width=100%), where each item is a thumb. if the parent container > width of the thumbs in total, there is no scrolling needed. Is it possible to handle this case?

[desandro]

Sorry there is no setting or easy way. But there may be hacks. See discussion in #289

[webDeveloper67]

simply just add display:none to .flickity-button in your stylesheet. it worked for me.

.flickity-button {
display: none;
}

or you can use

prevNextButtons: false,
pageDots: false

[robarwebservices]

I'm looking for an automatic thing. Something that understand viewport size, number of items in the carousel, etc. It is not known whether there will be enough items in every single instantiation to warrant scrolling buttons, and in such cases, I don't want to show an arrow.

[desandro]

@robarwebservices Try groupCells

[theedgy]

@robarwebservices If you don't mind with just CSS hiding I made last time solution for that:

checkSliderAlone = () => {
        if (this.carousel && this.carousel.slides) {
            this.carousel.slides.length < 2
                ? this.carousel.element.classList.add('slider-is-single')
                : this.carousel.element.classList.remove('slider-is-single')
        }
    }
this.carousel.on('ready', checkSliderAlone);
window.addEventListener('resize', checkSliderAlone)

With this you can hide your controllers by class 'slider-is-single'.

[JagadishSivakumar]

freeScroll: true,
contain: true,
// disable previous & next buttons and dots
prevNextButtons: false,
pageDots: false

refer: https://flickity.metafizzy.co/options.html

[jalieb]

This was working for me:

.flickity-prev-next-button:disabled { display: none; }

[RodrigoPauletti]

Try this:

$('.carousel').each(function() {
  if ($(this).find('div.carousel-cell').length === 1) {
    $(this).find('button.flickity-prev-next-button.previous, button.flickity-prev-next-button.next, ol.flickity-page-dots').hide();
  }
});

[d-farrell]

I got around it with this

` var elem = document.querySelector('#{{ section.id }} .main-carousel');
var flkty = new Flickity( elem, {
// options
cellAlign: 'left',
contain: true,
lazyLoad: true,
watchCSS: true,
groupCells: true,
prevNextButtons: true,
pageDots: true
});

function handleResize() {
var dots = document.querySelectorAll('#{{ section.id }} .main-carousel .flickity-page-dots .dot');
if (dots.length == 1) {
document.querySelector('.flickity-page-dots').style.display = 'none';
document.querySelector('.flickity-prev-next-button.next').style.display = 'none';
document.querySelector('.flickity-prev-next-button.previous').style.display = 'none';
} else {
document.querySelector('.flickity-page-dots').style.display = 'block';
document.querySelector('.flickity-prev-next-button.next').style.display = 'block';
document.querySelector('.flickity-prev-next-button.previous').style.display = 'block';
}
}
window.addEventListener('load', handleResize);
window.addEventListener('resize', handleResize);`