What is Auto-Height?
Auto-Height is a very handy feature provided by Cycle2 which manages a slideshow container's height. In order to achieve a slideshow effect, slides must be positioned absolutely within their parent so they can be stacked on top each other. However, this causes the parent element to collapse into a zero-height element because absolutely postioned elements do not participate in the normal flow of the document.
This behavior is not a problem is you assign a specific height to your slideshow container via CSS, and typically this is what is done. However, if you wish to have a fluid-width slideshow then assigning a fixed height in problematic. Enter Cycle2's auto-height feature. Cycle2 provides two ways of managing the container's height in a way that facilitates simple, fluid-width designs.
By leveraging Cycle2's auto-height feature you can create fluid-width slideshows with simply style rules like this:
.cycle-slideshow { width: 50% }
.cycle-slideshow img { width: 100%; height: auto }
If you want your slideshow to be fluid-width do not assign the container or the slides a specific height.
The auto-height feature does not control the height of the slides, just the container.
If your slides are images which have fixed dimensions declared in the markup,
such as <img width="200" height="150" ...>, then you will need to either remove
those dimension attributes or override them in CSS if wish to use this feature.
Sentinel
The default auto-height behavior is to use a sentinel slide. A sentinel slide
is a clone of one of the slideshow's actual slides which is prepended into the slideshow
container and given styles of { position: static; visibility: hidden }. This prevents
the clone from being visible but also causes the container element to expand in fit the sentinel's size,
which is what is desired.
By default, the slideshow's first slide is cloned as a sentinel. You can choose a different
slide by setting the data-cycle-auto-height attribute to the zero-based index
of the slide to use. Alternatively, you can set the attribute value to the string "calc" and
Cycle2 will calculate the tallest slide and use it as the sentinel.
The example below, and most of the demos on this site, shows the default auto-height behavior in action. If you view the DOM using a developer tool you'll see the sentinel slide (it's the first slide in the container); however it is never visible and does not participate in the slide rotation. It's sole purpose is to manage the container height.
Ratio
An alternative to using a sentinel slide for height management is to provide a width:height ratio.
This is done by setting the data-cycle-auto-height attribute to a ratio string. For
example, if your slideshow contains images that are 600 pixels wide and 400 pixels tall, you can
enforce this ratio like this: data-cycle-auto-height="600:400". Since this is just
a ratio it's not necessary to provide cycle with the actual slide dimensions, so the
declaration could be simplified to data-cycle-auto-height="3:2". If your images are
square then a simple data-cycle-auto-height="1:1" will get the job done.
The example below sets the following attribute: data-cycle-auto-height="4:3".
If you view the DOM using a developer tool you'll see there is no sentinel slide, yet this
slideshow maintains it's height as you resize the page, just as the previous example.
Disable Auto-Height
If you do not wish to have Cycle2 provide any auto-height capabilities, simply set the
data-cycle-auto-height attribute value to false and give your
slideshow container an explicit height via CSS. The example
below shows a slideshow with data-cycle-auto-height=false.
Since there is no style rule on this page
that provides a height for the slideshow container you can see that its height collapses
to zero and the text below moves up.
This text should be below the slideshow, but it's not. This is what Cycle2's auto-height feature fixes. Have a nice day.
Dynamic Container Sizing
There have been numerous requests for a way to resize the container based on the height of the current slide. See the Container Resizing page for instructions on how to achieve this functionality.