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.

Reply via email to