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

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