jQuery Cycle (github.com/malsup/cycle) is an extremely popular plugin used for image slide shows and cycling of HTML elements.

However, today as more people are using full width imagery and scaling, jQuery Cycle’s default method of sizing elements has fallen down. When jquery.cycle is booted up on a page it automatically sets the width of each slide based on the browser’s current width. If the window size is then increased the width of the slideshow will not increase with it.

What we the people need is the ability to have a full-width jquery cycle instance. Luckily this functionality exists in the plugin, it’s just buried in a github issue.

Here’s the fix to the problem, in your cycle call add the slideResize property:

Then, in your CSS add the following to the slide styling, in this instance I’m targeting a div that has a background being added via inline styling, it works at 100% because of the following:

There you have it, a quick fix for a frustrating problem!