The Goal I want to cycle through list items in an unordered list. I want the list items to take up the full width of the browser, even when the browser is resized.
The Problem Once the first slide transition takes place and the browser is resized smaller horizontal scroll bars are introduced. Then when the browser is resized larger than the original size, the list item width is only as wide as it was when the page was first loaded. The Assumption The cycle plugin needs to calculate the width of the item it is transitioning and then sets it to that width. The Question Is it possible to keep all widths as percentages maintaining the fluid width of the list item? The HTML <ul class="slideshow"> <li class="la"><h3>Label Applicators</h3></li> <li class="pa"><h3>Print and Apply</h3></li> <li class="tt"><h3>Table-Top Printers</h3></li> <li class="hs"><h3>High Speed</h3></li> <li class="cs"><h3>Custom Systems</h3></li> </ul> <div class="ssnavwrap"> <ul id="ssnav"> <li class="la"><a href="#">LA</a></li> <li class="pa"><a href="#">PA</a></li> <li class="tt"><a href="#">TT</a></li> <li class="hs"><a href="#">HS</a></li> <li class="cs"><a href="#">CS</a></li> </ul> </div> The CSS .slideshow { margin: 43px 0 0; height: 340px; } .slideshow li { height: 340px; width: 100%; overflow: hidden; } The Javascript $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade', height: 'auto', width: 'auto', fit: 0, containerResize: 0, speed: 1400, timeout: 6000, pager: '#ssnav', manualTrump: false, pagerAnchorBuilder: function(idx, slide) { return '#ssnav li:eq(' + idx + ') a'; } }); $('#ssnav li a').click(function() { $('.slideshow').cycle('pause'); }); }); The Attempts I've tried things like overflow: hidden in the CSS. I've tried options in Cycle like width, fit, contatinerResize. Thanks for any help on this.