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.

written by

WordPress wizard, coding ninja and all round cool guy. Loves Sci-Fi, geeky stuff, and of course Firefly. Currently a self confessed addict of Korean & Japanese Pop.

Advertisement

73 Comments

Author’s gravatar

Do you have wordpress plugin of this slider? I love it

Reply
Author’s gravatar

Hi,

Sadly not, although I will check out the license for jQuery Cycle & see if I can cobble one together in the next few weeks once I’ve gotten my current work load taken care of. ;)

Author’s gravatar

How can you change the speed of the slide?

Reply
Author’s gravatar

You would alter the number (500) in each animate method used in the code. Using the jQuery Cycle’s speed option will have no effect due to the fact I didn’t link it in to the custom transition.

Author’s gravatar

Hi. Seems like a great plugin. How do i add pagination to it?

Cheers / Jeppe

Reply
Author’s gravatar

Hi Jeppe,

jQuery cycle has a pagination/navigation built in. You just need to add the pager option. Check out the example page over at the official jQuery cycle page for more.

Author’s gravatar

hi
great work!

but i’ve a problem with prev/next button…
it seems that the right color order for “next” is 2345671
but the right one for “prev” is 7123456.

tnx

Reply
Author’s gravatar

Hi Paul Robinson,

Instead of background color can we using the images?

Thanks.

Reply
Author’s gravatar

Hi,

You could, but you would be unable to use the color fading. You could instead replace it with a double fade (foreground fades then background) to give a sort of Parallax effect.

Author’s gravatar

Would be cool if this was responsive as well. Good job on it. Any ideas on making this work on a responsive site?

Reply
Author’s gravatar

Hi Nick,

It is responsive to the extent that the colored band will stay the browser’s width regardless of the size, the images being responsive is difficult. You’d have to combine the silder effect with a plugin such as supersize that allows you to resize an image based on the element’s size.

Author’s gravatar

Hi, thanks for the script! Maybe i´m just to new to this, but i cant seem to add the js to the html?
I have downloaded the files, and the uploaded them to my server. but shouldn´t i link the js files to the html somehow? thanks!

Reply
Author’s gravatar

Hi Joachim,

You do indeed need to link them together. Some things I don’t cover as the are classes as basic knowledge. Covering them each time I write a tutorial would make them too large.

On the very top of the demo page (if you view the source code in your browser) you can see:

This is how jQuery is attached. The same principle works for all other scripts too. Just remember it must be placed in-between the opening and closing <head> tags.

Author’s gravatar

Hi,
Great demo, it will work for me a lot in future projects…

My consult now is about making a simple full width banner, with a cycle background, the thing is, I already did it, but I don’t know how to do it with a background-position: center and a cover size (proportional), because all i can do, is the background filling the full width but the image loses dimensions…

hope you can be little specific, because Im little new with this…

Thanks a lot!!!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">