Disable/Hide navigation arrows if all screens fully visible (contained)

[mtx-z]

Hey there !
First, thanks for the awesome work. This is really the best slider out here :)

I'm trying to do something: if all screens are contained in slider container, disable or hide both navigation arrows.
This pen from #289 is a start, but look at this changes: with all slides contained, arrows are still displayed, but not really usefull in my case as all slides are fully visible (it's more a design issue than a technical one).

I know i could, after initialization, dynamicaly (and on resize) calculate the width of all slides, and the width of the slider container to see if all slides are fully contained ( == nothing to scroll on right, as my slide is left-aligned), and disable/hide arrows depending. I could then do like in #431 or #233 to dynamicaly change Flickity option after initialization and on resize to disable/enable arrows.

But i'm wandering if there's a better way to achieve that.

Thanks a lot !

[desandro]

One solution is to use groupCell so that, if there's not enough cells to fill the container, the previous & next buttons are already disabled. See http://codepen.io/desandro/pen/d17ed397a1dbb97bd52b9b9dfe1ac9dc/

[mtx-z]

Hey,
using groupCell option is perfectly fixing the arrow problem. Arrows are disabled when all screen are contained, even on resize, pretty cool thanks !
But, using groupCell, user cannot navigate slide 1 by 1. Using drag-drop or naviguation arrows make the slide move as a "group", not slide by slide.

Any way to make both ?

Thanks a lot for you help.

[desandro]

Sorry, there is no easy way to do both. I'm okay with leaving it at that. I'm closing the discussion here, but it may continue at #289

[mtx-z]

Thanks @desandro !

[asif4483]

It is possible to hide arrow open this link http://codepen.io/desandro/pen/d17ed397a1dbb97bd52b9b9dfe1ac9dc/

And make changes in css

/* position outside */
.flickity-prev-next-button.previous {
visibility: hidden;
}
.flickity-prev-next-button.next {
visibility: hidden;
}

Thats it..

[matthias]

a better solution for hiding disabled buttons would be:

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

Use groupCells: false to disable arrows if all items are visible.

[jimmyadaro]

@matthias approach worked for me, I've done something similar using JS/jQuery since I'm creating my custom next-prev handlers.

if ( $(".flickity-prev-next-button.previous").is(":disabled") && $(".flickity-prev-next-button.next").is(":disabled") ) {
    $(".my-custom-handlers").addClass("hidden");
    $(".flickity-page-dots").addClass("hidden");
 }

Please keep in mind prevNextButtons: true and pageDots: true config in your Flickity slider setup is required.

[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);`