Responsive jQuery Cycle Slideshows: A Height Fix

August 19, 2014

Goals: Figure out how to keep cycle slideshows from collapsing when switching from fixed width to responsive.

Tools Used: jquery cycle plugin

Inspired by a whole bunch of articles and blog posts...

HTML Structure

Notice the dummy slide inserted alongside the other children slides. This transparent dummy child is not given the slide class. Replace the WIDTH attribute with the width of your other images.

<div id="slideshow">
        <img src="images/dummy-image.gif" width="WIDTH">
        <img src="images/slide1.jpg" class="slide">
        <img src="images/slide1.jpg" class="slide">
        <img src="images/slide1.jpg" class="slide">
</div>

CSS

Slideshow images set to be max width of container.

.slide {
        width: 100%;
        height: auto;
    }

jQuery

Use Cycle's built in options slideResize and slideExpr.

$(function() {
        $("#slideshow").cycle(function() {
            slideExpr: '.slide', //tells cycle to ignore our dummy gif
            slideResize: 0
        });
    });