Scroll bar issue in carousel

I've not yet found the time to test it with the latest version of Panels 2. So I guess it's just not yet compatible. I hope to do a quick update (without the polishing I gave panels_tabs when I updated) this weekend.

Width can't be set via the UI yet, you'll have to set it in the CSS manually.

I'd recommend waiting for displaying a view in a carousel.

Wim,

Can you give me a hint as to how to set the width for items using css? I am having a hard time telling where Panels is looking for the jcarousel 'skin'. I don't mind doing the CSS manually, but I need a little direction. If I set an ID/Class, and then simply put the CSS in my theme style.css, will that work? If that works, I assume I can take the CSS from any of the jcarousel skins and simply put it in my css with the appropriate ID?

Many thanks,
Maria

I have the problem in carousel, I have placed scroll bar in carousel using css ,when the content is more the scroll bar will appear, Its working fine in IE but not in mozilla firefox, Even i tried separately using html page , but its working in IE but not in Mozilla firefox I am facing the problem , when i click next or previous button the outside of the carousel , the Left & right content of the page is getting dragged . the whole page is disturbed. Please find the code below and help me in this Issue as soon as possible.

______________________________________________________________

Carousel Component Example - Slide Show

.carousel-component .carousel-list li { width:506px; /*500 + 2 + 2 + 1 + 1 */ overflow:scroll; margin-left:50px; z-index:-1px; } .carousel-component .carousel-list li a { display:block; border:2px solid #e2edfa; outline:none; -moz-outline:none; } .carousel-component .carousel-list li a:hover { border: 2px solid #87bf4e; } .carousel-component .carousel-list li.active a { border:2px solid #708fc7; } .carousel-component .carousel-list li img { border:1px solid #999; display:block; } .carousel-component .carousel-prev { position:absolute; top:30px; z-index:3; cursor:pointer; left:5px; } .carousel-component .carousel-next { position:absolute; top:30px; z-index:3; cursor:pointer; right:5px; } /** * Image src URLs **/ var imageList = [ "http://static.flickr.com/49/154253308_f9fe62f5bc.jpg", "http://static.flickr.com/48/154252979_e14b8adf6a.jpg", "http://static.flickr.com/58/154252383_d59833136c.jpg", "http://static.flickr.com/70/154251973_f58009862a.jpg", "http://static.flickr.com/48/154251863_c2747e4fa5.jpg", "http://static.flickr.com/73/154251425_07c48d786a.jpg", "http://static.flickr.com/54/154251208_ec14c7295e.jpg", "http://static.flickr.com/49/154250868_9ed96d9fdf.jpg", "http://static.flickr.com/51/154250687_c241e9b5a2.jpg", "http://static.flickr.com/75/154250731_ce18000d85.jpg", "http://static.flickr.com/52/154250543_633506d4cf.jpg", "http://static.flickr.com/44/154250315_fcc6200d4b.jpg", "http://static.flickr.com/72/154249918_2ccc135309.jpg", "http://static.flickr.com/58/154249509_6f5331fa30.jpg", "http://static.flickr.com/57/154249373_be8530cc12.jpg", "http://static.flickr.com/72/154249186_27ed99db61.jpg", "http://static.flickr.com/46/161892486_b4f8b93917.jpg", "http://static.flickr.com/52/161893596_fc5055fe5a.jpg", "http://static.flickr.com/53/161893993_2000af9417.jpg" ]; /** * Custom inital load handler. Called when the carousel loads the initial * set of data items. Specified to the carousel as the configuration * parameter: loadInitHandler **/ var loadInitialItems = function(type, args) { var start = args[0]; var last = args[1]; load(this, start, last); var status = "Showing " + start + " of " + this.getProperty("size"); YAHOO.util.Dom.get("indicator").innerHTML = status; }; var animComplete = function(type, args) { var direction = args[0]; // string either: 'next' or 'prev' var status = "Showing " + this.getFirstVisible() + " of " + this.getProperty("size"); YAHOO.util.Dom.get("indicator").innerHTML = status + " (done)"; }; /** * Custom load next handler. Called when the carousel loads the next * set of data items. Specified to the carousel as the configuration * parameter: loadNextHandler **/ var loadNextItems = function(type, args) { var start = args[0]; var last = args[1]; var alreadyCached = args[2]; if(!alreadyCached) { load(this, start, last); } }; /** * Custom load previous handler. Called when the carousel loads the previous * set of data items. Specified to the carousel as the configuration * parameter: loadPrevHandler **/ var loadPrevItems = function(type, args) { var start = args[0]; var last = args[1]; var alreadyCached = args[2]; if(!alreadyCached) { load(this, start, last); } }; var load = function(carousel, start, last) { for(var i=start; i<= last+1; i++) { carousel.addItem(i, fmtItem(imageList[i-1])); } } /** * Custom button state handler for enabling/disabling button state. * Called when the carousel has determined that the previous button * state should be changed. * Specified to the carousel as the configuration * parameter: prevButtonStateHandler **/ var handlePrevButtonState = function(type, args) { var enabling = args[0]; var leftImage = args[1]; if(enabling) { leftImage.src = "images/left-enabled.gif"; } else { leftImage.src = "images/left-disabled.gif"; } }; /** * Custom button state handler for enabling/disabling button state. * Called when the carousel has determined that the next button * state should be changed. * Specified to the carousel as the configuration * parameter: nextButtonStateHandler **/ var handleNextButtonState = function(type, args) { var enabling = args[0]; var rightImage = args[1]; if(enabling) { rightImage.src = "images/right-enabled.gif"; } else { rightImage.src = "images/right-disabled.gif"; } }; /** * You must create the carousel after the page is loaded since it is * dependent on an HTML element (in this case 'dhtml-carousel'.) See the * HTML code below. **/ var carousel; // for ease of debugging; globals generally not a good idea var pageLoad = function() { carousel = new YAHOO.extension.Carousel("dhtml-carousel", { numVisible: 1, animationSpeed: 0.35, scrollInc: 1, //animationMethod: YAHOO.util.Easing.backOut, navMargin: 40, size: 18, prevElement: "left-arrow", nextElement: "right-arrow", loadInitHandler: loadInitialItems, loadNextHandler: loadNextItems, loadPrevHandler: loadPrevItems, animationCompleteHandler: animComplete, prevButtonStateHandler: handlePrevButtonState, nextButtonStateHandler: handleNextButtonState } ); }; /** * Since carousel.addItem uses an HTML string to create the interface * for each carousel item, this method formats the HTML for an LI. **/ var fmtItem = function(imgUrl) { var innerHTML = '<\/a>'; return innerHTML; }; YAHOO.util.Event.addListener(window, 'load', pageLoad);

___________________________________________________________________________