Fluid Full Width Feature Slider Using jQuery Cycle

It’s difficult to create a slider that stretches the full width of the browser because they generally use images and images can’t magically stretch out to match any screen resolution. Here is where our trick comes in. We use a full width container that changes color behind the image. This gives us the illusion of the image stretching the width of the screen.

Before we get onto the not so magical trick let’s take a look at an example of what your slider could look like, and if you like to see a live version you can check out the demo too.

Fluid Feature Slider: HTML

Our trick is to create a slider that uses PNGs images with transparent backgrounds. Then as a little extra we are going to make it so that the background (which extends out to the full width of the browser) behind it changes color using a little bit of jQuery trickery. First though let’s look at our example HTML.

This is all the HTML you need. #container is the full width container. I’ve called it #container but it wouldn’t be your main container. Here is a little illustration to show how you would have multiple containers to make up the site.

As you can see you would normally have three different containers. The top one & bottom one the width of your site (usually 900-960px) although the top one is sometimes also full width. The middle one is the slider container and would be 100% width. Hopefully that explains it a little better.

Fluid Feature Slider: CSS

While there isn’t really much CSS it is quite important to make your slider look right & work correctly.

The CSS is pretty simple. We have the container set to 100%, and the background color we’ll get to a little later however it’s important to note that it must be set or you’ll encounter a small bug in Google Chrome.

The other part just centers our slide images, and sets the width & height. Obviously if your slider need to be a different size you can change that.

Fluid Feature Slider: jQuery

Now we get onto the jQuery. First though you will need to download two plugins and attach them to the page. The two plugins are the jQuery Cycle plugin and the jQuery Color plugin. The jQuery Color plugin you’ll need to press save in your browser and save it without the .txt on the end.

Once you have attached them to your page after jQuery, we can move on to the jQuery code proper.

jQuery Code Updated: 27th January 2012

As of the 27th of January 2012 I have updated the code to a much more efficient version that eliminates a bug with the first slide not fading out correctly. If you are using my old code I would advise upgrading to this code instead.

As usual we have our DOM ready so I’ll skip that and move onto the first section of code.

This line simply defines the background colors. If you are using transparent PNGs you want to pick colors that compliment your images. If you are using JPEGs you’ll want to pick the color that perfectly matches the edges of your background in the image. An extremely important thing to note is that the colors are listed in order 2, 3, 4, 1 due to a quirk with the code. I still don’t know why this occurs, but you must remember to list your first item last or the background color will change out of order.

This is the main code. It defines a new transition for jQuery cycle to use instead of the default fade transition. After setting up the transition using jQuery cycle’s API we start our animation code. We fade out our current slide, animate the background color (both at the same time) using the current slide number to find the correct color. Using the callback, once the color change has finished, we set the current slide’s display setting to none to keep in line with how jQuery cycle likes to function, then we set the opacity of our next slide to 0, make it visible by setting it to block & fade it in. Then we trigger the after() function to keep jQuery cycle working correctly.

This is the final bit of code. All it does is initialize the slider using our new transition as the fx setting.

Fluid Feature Slider: Conclusion

That’s it. The general effect was created for a project a family member was working on. It was refined for a client who liked the idea but wanted to modify it slightly. As always if you have any questions, suggestions, or comments let me know below.

Images used in demo © to Lisa Marie @ Lisa Marie Art & Illustration. Used with permission.

CycleFeatureFluidjQuerySlider