Creating Full Width Slideshows with Meta Slider

A 100% wide homepage slideshow is a common feature of WordPress themes. As of version 2.5 it’s possible to create 100% wide slideshows using Meta Slider.

 

Update 10 Dec 2013 – in Meta Slider v2.6+ there is a ‘Full width’ setting which, when checked, will output a 100% wide slideshow. The information below is still relevant.

Before we go too far into it, it’s worth understanding how Meta Slider sizes images and slideshows.

How does the ‘size’ setting in Meta Slider work?

Setting your slideshow size to 500px wide and 300px tall will tell Meta Slider to crop your images down to 500px wide and 300px tall (no surprises there!)

When it comes to outputting the HTML for the slideshow, Meta Slider will set a ‘max-width’ CSS rule on the slideshow container to fix the output size at a maximum width of 500px. The max-width rule will let the slideshow responsively scale down, but not up.

.. outputs ..

To summarise, the ‘size’ setting affects the slideshow in two ways; it defines the crop size for the images, and it defines the maximum width of your slideshow when you place it on a page.

What if I want a 100% wide slideshow?

In 2.5, we’ve added a new shortcode parameter: percentwidth. When this parameter is set, Meta Slider will change the max-width setting from a pixel based value to a percentage value:

.. outputs ..

Note, you slide images will still be cropped to the size you’ve specified in the slideshow settings. We’d recommend setting a size of around 1280 x 350 for full width slideshows.

So there you have it, 100% wide responsive slideshows in Meta Slider. Comments, questions? Let us know below!

  • Usman Khan

    Thanks for wonderful slider and support. Can you please provide the full code and detailed steps how to make the slider full width in Child Responsive theme please? Atleast teach me please, where to paste or edit the above code

  • tue

    Is it possible to get the slider to adjust to the browser size?

  • Steffen

    Like Tue, I would love the option to make the slider actually be a 100% width slider and not a div width slider. Is this possible? 100% is the entire browser, not just an entire div.

  • WebGuru

    Is this the same things as the “Stretch – 100% wide output” advanced setting?

    Is there a way to set this up so that the slider does not scale the height for larger screens? I need a full width slider where the image is centered and the edges beyond the content width are cut off at the edge of the window. This would be used with ultra-wide images (for instance I’m using 4096×400 images, but only the middle 800×400 has foreground content).

    Right now I’m using a CSS hack to make this work. The slider is set to be 4096×400 wide, but with the Stretch setting checked.

    .metaslider .flexslider {
    /* css hack to center images = no statically positioned elements = block height required */
    height: 400px;
    }

    .metaslider .slides img {
    /* force images to be 400px high, disables scaling */
    height: 400px;
    /* don’t distort the image, using auto instead of 4096 so you can use any image width */
    width: auto !important;
    /* CSS hack to center images */
    position: absolute !important;
    left: -9999px !important;
    right: -9999px !important;
    margin: 0 auto !important;
    }

    Is there a better way of accomplishing this?

    @Steffen and @tue:
    It’s my understanding that this is a limit of the theme. You would need a theme that supports 100% wide content areas (not the same as “full width” templates). If the theme does not support it (and most don’t), the only way to do 100% browser width slider would be to customize the theme. If your theme comes with a 100% wide slider and you want to replace it with Meta Slider, it probably wouldn’t be too difficult to replace the theme slider code with a do_shortcode function and not require as much customization.

  • Perfil Fo

    Hi! i´m using Meta Slider pluging and i think it´s great but i’m having a little problem and that i can´t fix. I have the stretch box checked and i’ve set it to 1200 x 350 px. When i use the “save and preview” button i see how the slider will look and it´s fine but in my homepage the slider looks narrow. I want it full width but i don´t know what to do. My homepage is http://www.tiendafo.com.ar, you can see the problem there. I’d appreciate if you could please help me to get it done. Thank you!

    • Chad

      how did you fix your issue here?

      • Mai K.

        i had some problems with sizes that drove me crazy, the soultion ws in Advanced Settings inside meta slider, cropping: OFF

    • Tess Bayar

      hi. I just checked out your site. Great work. One question here.. How did you get the FULL width slider? not the div 100% slider?

  • Andrei Luca

    How to keep constant height, or crop somehow using widthpercent parameter?