Stay connected to the latest UpdraftPlus news.

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 MetaSlider.


Update 10 Dec 2013 – in MetaSlider 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 MetaSlider sizes images and slideshows.

How does the ‘size’ setting in MetaSlider work?

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

When it comes to outputting the HTML for the slideshow, MetaSlider 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 ..

<div class="metaslider .." style="max-width: 500px;">

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, MetaSlider will change the max-width setting from a pixel based value to a percentage value:

.. outputs ..

<div class="metaslider .." style="max-width: 100%;">

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 MetaSlider. Comments, questions? Let us know below!