Slider which auto resizes to width of image being displayed.

jing0

Junior Member
Joined
Apr 15, 2012
Messages
100
Reaction score
12
Hey guys,

The "featured product" sliders on my website are very wide (1400x430px) and, due to the nature of the products, the images are often different widths (though I have fixed the height). I can't stretch the images to fit the width otherwise they end up completely out of proportion and ruin the product image.

As a result there is often a lot of whitespace either side of some images which looks a bit stange. I was thus wondering if anyone had come across a (responsive) slider that automatically changes its width to fit the size of the current image it's displaying. Does such a thing exist? I tried adding a simple grey background behind the images but it looks even worse than the whitespace!

Thanks!
 
It's should be pretty simple to make, but my design expericence tell me that, a lot of white space is better, than a slider there "jump" in size betwheen all the images.
 
I second Simon's comment. Sliders with responsive content usually end up making the other content on the page move around every time a new slide shows. It's infuriating when the text I'm reading keeps jumping around.

I'd either go with...
* a transparent background;
* a slider that shows the image to the left and text next to it. e.g. http://cdn.tripwiremagazine.com/wp-...06/royal-wordpress-slideshow-plugin_thumb.jpg; or...
* have a related background image to fill in the whitespace.

PS. I presume it is, but I hope the slider itself is responsive, as 1400px is going to cause problems for ~50% of visitors... http://www.w3schools.com/browsers/browsers_display.asp
 
Thanks for the replies guys. I think you're right. I'll try and get some background design knocked up - cheers!
 
Back
Top