I'm using jCarousel with approximately 10 images in it. 10 images can't be displayed at once in a div with a given div. On some pages though, only 3 images are being displayed, so scrolling is impossible.

Still the scroll arrows (next/prev) are being displayed. Is there a way to hide them autimatically if there's no overflow?

CommentFileSizeAuthor
#9 jcarousel_disabled_buttons.patch5.01 KBquicksketch
#5 Block: style options104.8 KBknalstaaf
#3 10 images, 5 shown, enough to scroll167.04 KBknalstaaf
#3 4 images, 5 shown, no need to scroll (and to show arrows either)123.56 KBknalstaaf

Comments

knalstaaf’s picture

knalstaaf commented

"a div with a given width", ofcourse.

quicksketch’s picture

quicksketch
he/him
commented
Category: feature » support
Status: Active » Fixed

The default skin does not show arrows if there is no scrolling. You can do the same in your CSS with the following:

.jcarousel-prev-disabled,
.jcarousel-next-disabled {
  display: none;
}
knalstaaf’s picture

knalstaaf commented
Status: Fixed » Active
StatusFileSize
new 4 images, 5 shown, no need to scroll (and to show arrows either)123.56 KB
new 10 images, 5 shown, enough to scroll167.04 KB

I'm sorry, I wasn't specific enough. It's indeed so that if scrolling-function disabled in the options altogether, then it won't show the arrows.

But what I actually mean is: if scrolling-function ìs enabled, but on a certain page there are too little images to scroll through, could it hide the arrows automatically?

I've copy pasted the code you provided in my stylesheet just to make sure that it wouldn't solve the problem, but it didn't. So I guess there was a small misunderstanding of the question.

I've attached some screenshots to illustrate where I'm going to.

quicksketch’s picture

quicksketch
he/him
commented

I'm not following what you mean by the "scrolling function". Do you have this carousel's "Wrap" setting to be "Circular"?

knalstaaf’s picture

knalstaaf commented
StatusFileSize
new Block: style options104.8 KB

No, it's actually set to "Both"; and "Number of visible items" is set to 5.

So in pages with let's say 10 images, it should show the arrows (as it already does correctly). But on a page with only 3 images, there's no need for the arrows, since one can't browse through them (all the images are already visible).

quicksketch’s picture

quicksketch
he/him
commented
Category: support » feature

jCarousel already does this if there is only one item, but it could possibly be expanded to do this behavior based on any number of items. I think we just wanted to avoid the complexity of trying to calculate if the arrows should need to be present or not. With responsive design being all the rage these days, I'm not sure making such assumptions is safe or a good idea.

quicksketch’s picture

quicksketch
he/him
commented

Carousel already does this if there is only one item, but it could possibly be expanded to do this behavior based on any number of items.

Well I thought we had added this, but upon further research it doesn't appear that this is the case. I'm not sure if we should add this sort of functionality to the jCarousel module, it seems like something the jCarousel library itself should do automatically.

knalstaaf’s picture

knalstaaf commented

(...) it seems like something the jCarousel library itself should do automatically.

Yes, maybe so.

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Fixed
StatusFileSize
new jcarousel_disabled_buttons.patch5.01 KB

I've implemented this functionality with the attached patch. To make life easier I've also "undone" the hardcoded "display: block" that jCarousel puts on the navigation buttons. This simplifies our CSS quite a bit both for our jcarousel-default.css and for anyone wanting to make their own CSS. The changes should be compatible with existing CSS.

Committed to both 2.x branches.

knalstaaf’s picture

knalstaaf commented

Brilliant, thanks!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

slayne40’s picture

slayne40 commented

Hy,

Little trouble when the carousel is in automatic scrolling.
The buttons are not displayed, but the image keeps scrolling.

I changed this part of the patch :

// Disable the previous/next arrows if there is only one page.
if (carousel.pageCount == 1) {
  carousel.buttonNext.addClass('jcarousel-next-disabled').attr('disabled', true);
  carousel.buttonPrev.addClass('jcarousel-prev-disabled').attr('disabled', true);
}

By :

// Disable the previous/next arrows if there is only one page.
if (carousel.pageCount == 1) {
  carousel.buttonNext.addClass('jcarousel-next-disabled').attr('disabled', true);
  carousel.buttonPrev.addClass('jcarousel-prev-disabled').attr('disabled', true);
  carousel.lock();
}

Thanks.