Hi,

This is a great module. As I was playing around with this module, I though, having previous and next arrows on a carousel which scrolls automatically is unnecessary. I have created a patch that adds an option to hide navigation arrows if the autoscroll is enabled (i.e. autoscroll value is > 0). I had to modify the uncompressed "jquery.jcarousel.js" file for this feature. I have re-compressed the "jquery.jcarousel.js" file using YUI Compressor.

If you apply this patch, it will add an option to hide/show navigation under Views Carousel settings (right below the autoscroll field).

Chintu

CommentFileSizeAuthor
viewscarousel-6.x-1.x-dev-hide-arrows.patch34.53 KBzd370

Comments

robloach’s picture

robloach
he/him
commented
Status: Needs review » Needs work

You shouldn't change jquery.jcarousel.js at all as next time we update it, it would break this functionality. Wouldn't it be eaiser to just use CSS to hide the arrows?

zd370’s picture

zd370 commented

Rob,

Thanks for looking into this. I did try to create this functionality using CSS first, but the problem was it would still print out the code for navigation arrows and even though I set them to display: none, they were still clickable. But of course, I could give it try a again.

Chintu

gthing’s picture

gthing commented

I'm trying to hide the arrows with css but my css is being overridden by the div call itself. It has div id style="display:block">

I have no idea where that code is to change it.

robloach’s picture

robloach
he/him
commented

You could probably set width and height to 0, or margin-left to -9999999px.

mfer’s picture

mfer commented
Status: Needs work » Fixed

If you want to hide the arrows set the overflow to hidden and the width and height to 0. Or, set them to display: none;

No altering the js which is an external library.

El Bandito’s picture

El Bandito commented

Gthing

I found that you can override the hardcoded style declaration by marking the CSS display:none as important e.g.

div.jcarousel-next {display:none !important;}

Cheers

Dave

Status: Fixed » Closed (fixed)

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

Oleksa-1’s picture

Oleksa-1 commented

Thx, Daves! Exactly what I need to disable inactive arrows:

div.jcarousel-prev-disabled {display:none !important;}
div.jcarousel-next-disabled {display:none !important;}

thushad’s picture

thushad commented

this will not enough for ie 6. Because ie6 doesn't care for "!important" attribute. Using visibility:hidden with the display:none will give you a better cross browser solution.

div.jcarousel-prev-disabled {display:none !important; visibility:hidden;}
div.jcarousel-next-disabled {display:none !important; visibility:hidden;}