1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Slider which auto resizes to width of image being displayed.

Discussion in 'White Hat SEO' started by jing0, May 19, 2014.

  1. jing0

    jing0 Junior Member

    Joined:
    Apr 15, 2012
    Messages:
    100
    Likes Received:
    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!
     
  2. SimonRohde

    SimonRohde Regular Member

    Joined:
    Mar 28, 2013
    Messages:
    208
    Likes Received:
    30
    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.
     
    • Thanks Thanks x 1
  3. bluehatface

    bluehatface Regular Member

    Joined:
    Oct 19, 2013
    Messages:
    232
    Likes Received:
    98
    Location:
    Here
    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 Thanks x 1
  4. jing0

    jing0 Junior Member

    Joined:
    Apr 15, 2012
    Messages:
    100
    Likes Received:
    12
    Thanks for the replies guys. I think you're right. I'll try and get some background design knocked up - cheers!