Meteor Slides users often ask how to create multiple slideshows with different sizes. Here is a tutorial which will show you how to do this using multiple slideshows and metadata.

Let’s say you need two slideshows on your site. The larger slideshow, Jupiter, is 500×200 and the smaller slideshow, Mercury, is 300×150.

The height and width options on the slides settings page determine two things, the dimensions of the slideshow itself, and the maximum dimensions of the individual slides. Smaller slides can be used, but any slides that are larger than these dimensions will be cropped, so the height and width in the slides settings should match the largest slideshow on your site.

Start with the largest slideshow

Start by setting up the largest slideshow in the standard way. In the slides settings, set the Slide Height to “200” and the Slide Width to “500”. Then create a slideshow called “Jupiter”, make your slides with images that are 500×200, and add them to the Jupiter slideshow.

Here is an example shortcode to load the largest slideshow with the name Jupiter:

[meteor_slideshow slideshow="jupiter"]

Note that you don’t need to use metadata to set the dimensions of the largest slideshow because it should match the dimensions on the settings page.

Then setup the smaller slideshow

Now for the smaller slideshow, create a slideshow called “Mercury”. Make the slides for this slideshow with images that are 300×150 and add them to the Mercury slideshow.

Because you have used smaller slide images which were prepped to fit 300×150, all you need to do is override the default slideshow height and width using metadata to shrink this specific slideshow to the proper dimensions.

Here is an example shortcode to load the smaller slideshow with the name Mercury:

[meteor_slideshow slideshow="mercury" metadata="height: 150, width: 300"]

When using metadata, only values which are strings should use single quotes, other types, such as the integers in the above example, should be used without single quotes.

Styling specific slideshows with CSS

By default the slideshows will be full width block level elements. Maybe you would like to wrap some text around the smaller slideshow though.

When you specify a slideshow, a unique ID is created for it based on the slideshow’s slug. So the Mercury slideshow ID would be “meteor-slideshowmercury”. With this ID you can target just that slideshow with certain CSS rules:

#meteor-slideshowmercury {
	float: left;
	margin: 0 20px 20px 0;

Keep it simple

But don't forget, less is more! A slideshow is a great way to get a visitor's attention, but when you add multiple slideshows or other animated elements to the same page you are dividing the user's attention and diluting that page's potential.

So try to keep it simple by spreading these elements out to different pages to reduce the clutter and increase the quality of your website.

Meteor Slides, Tutorials

Join the conversation! 340 Comments

  1. Hi, how to add slidehow on the single post. I’ve make 3 slides and have added this code: [meteor_slideshow] to my HTML section on my test post. But, there’s no slides I see when I publish the post. Is there any additional code should I insert to the standard one?

    • Hi Henkz, all you should need to do is add the shortcode. You did add this to the post’s content in the post editor? Could you post a link to the page you are trying to add a slideshow to?

  2. Hi Josh, please tnxs for you meteor slide its great! i want to ask you something, i set the slideshow in 600*400 but and my pics are that dimension but the slide crop my pics to another dimension, what can i do?

    thanks man for all

    • Hi Charly, did you upload the images after setting the slideshow dimensions? Could you post a link to the slideshow you’re working on?

  3. of course,

    well I read something about my problem. the same you answer. im gonna try reloading all the images with the plug setted rigth to the pics dimensions. and I tell you.

  4. Hi Josh,

    Thanks for such a great plugin. Just wondering how to use the CSS code for wrapping text around a slideshow? I’m a newbie when it comes to code of any kind. I’m able to easily get the slideshow up and running and I’ve found your CSS code RE: wrapping text:

    #meteor-slideshowmercury {
    float: left;
    margin: 0 20px 20px 0;

    I simply don’t know where to insert that code (obviously with the slideshow name changed to my slideshow’s name). I’m using the Weaver II Pro theme which has a lot of CSS capability so I’m thinking this should be easy but nothing I’ve tried seems to work.

    I’ll definitely be buying you some coffee. Not today, but very soon.



  5. Hey Josh,

    I just figured it out. I needed to assign that specific slideshow name when inserting it into the post. Excellent.

    I’m definitely going to buy you a cup of coffee in the next few days!



  6. Hi Josh,

    Is there a way to have multiple slideshows with varying number of slides?

    I initially set the quantity to 25 in the settings page and created a slideshow of 25. I then changed the quantity to 50 and created another slideshow with 50 pictures. These 2 pages displayed the slide quantities properly in the slide navigation bar. At this point I thought the qty is actually “max qty” and that any slideshow under qty of 50 would display correctly. But the third slideshow consisting of 17 pictures, shows the 17 plus the 33 of the previous slideshow.

  7. Hello Josh!

    I have been happily using your slideshow on this page, which has small diameters (100×560) [meteor_slideshow slideshow="quotes" metadata="height: 100, width: 560"].

    Now I want to add a larger slideshow (250×940) to the homepage ( and it does not show up. I used [meteor_slideshow slideshow="homepage"] even added metadata, but still it does not show. The image shows up if I just use: [meteor_slideshow] but then I also get all the other smaller images from the other slideshow.

    I realise that you said to start with the larger slideshow first. Well, I did not have the larger one in my mind when I created the small one first.

    I hope I do not have to remove every image and the two slide shows, just to get the larger one first. Please help.


  8. Excellent slideshow and thank you for making it available to us. If you ever want to use any of my image thumbnails to showcase your work let me know. Here are few suggestions for short code options:

    Adding Captions (Turning them On-Off)
    Adding Slide Navigation: (Turning them On-Off)
    Skins/Custom CSS (being able to select the custom CSS) – Ideally this would not be overwritten when you upgrade to newer version.

  9. Josh, thank you. I have no clue how come it works now, but I am happy. Thanks!

  10. Hey josh, look having an issue getting my slides to show at all on my main/home page, used the short code to add it, a box seems to appear, but, no pictures, i foloowed the instructions to a tea till late last night no results at all to get anything, got up this mornin re did it, got the box which seems to be the right hight/ width, but no images will appear. I have been trying other slideshow scripts, maybe theres conflict, maybe its cause its 1.5, and im using the latest WP, but came across yours and liked it so much I thaught id try it, anyhows got any brainy ideas to whaT i might be doin wrong

  11. Hi Josh,

    I’m having trouble getting the appearance size to change. I have the settings adjusted to the desired size and have tried some of the possible solutions to similar issues in this comment section but having no luck.

    What am I missing? Thanks in advance for your help!

    The link to the page I’m using this is

  12. Hi Josh,

    I want to have different amount of slides in two different sliders, How can I do it? Ok I got an slider on the header which show 5 slides but I want to have another slide that show all my Images not sure if this can be done but if is possible can you help me to get it going?
    Thanks in advance.
    Best regards,

    • Hi Olexis, set the slideshow quantity to match the slideshow with the most slides. If you have a header one with 5 and an about one with 10, set it to 10. Then for the header, specify that slideshow and only add the 5 slides to that slideshow. Then for the about slideshow specify the about slidewshow and add the 10 slides to that one.

  13. Hey Man, Dope Plugin! Been using it for a year.

    One Problem though. i changed to a mobile template for mobile devices, and the slides show up too big on the mobile device. (they are fine on my PC). link:

    i tried this: [meteor_slideshow slideshow="my slide name" metadata="height: auto, width: auto"]

    but my jquery dropdown menu stops working for that page when i do use that tag. (even though the images begin to show up correctly on the mobile device.) may be a conflict?

    i also read that your version 1.5 supports fluid sizing, but its not resizing when i browse my site from a mobile device. link again:

    Thanks for any help.

    • Thanks Ano! It won’t work with the height and width set to auto, it has to be a specific number value, so it is breaking the slideshow’s JavaScript on that page.

      You shouldn’t have to change the dimensions though, it will scale to fit the browser if the theme is also scaling. If it isn’t scaling properly the most likely problem is that the theme isn’t fully scaling, like the container that it is in is larger and the slideshow is scaling to fill it.

      I can’t test the mobile version, it isn’t showing up on my Android mobile, how are you handling the mobile version, with a plugin?

      • thank you for the info on the “auto” setting. im using the “any mobile theme switcher” plugin atm.

        as far as why my slides arent scaling, i guess i can try a different “mobile-ready” wp theme. im not so much worried about the theme i use, just if it works. i can edit the css later. the current theme does scale itself because other photos are showing up correctly. just not the slideshow. i looked at it on 2 androids, an iphone, and an itouch.

        i appreciate the help

      • whadup!
        hey man you were right about the container, thanks! i figured out that the slides are resizing but it depends on the device’s portrait screen size.

        my android:
        when i have it positioned in portrait it doesnt shrink far enough because of the container (like you said). BUT when i position it to landscape everything is fine. MIL GRACIAS.

        the world needs you

  14. oh, and this is an example of the blank slideshow on a page, along with my dropdown menu not working:


  15. Hi Josh,
    Thanx for your great work. Meteor Slides is a great enhancement for site I am working on. There is however one issue I cannot resolve. it has to do with horizontal alignment of the slider…
    When I make a slider with only one image. The slider is aligned in the centre of my post. When I add an image to the slideshow the slider is aligned on the left of my post.
    Do you have an idea how to solve this behavior. In my case, the slider with 2 or more images has to be aligned in the centre of the post. I would appreciate some help on this…. thx

    • You need to center the slideshow in your theme’s stylesheet just like you would any div or other container:

      div.meteor-slides { margin: 0 auto !important; }

  16. Hi Josh! I was wondering if there’s a chance not only to have different sizes but also different navigation formats. Cause I need one slideshow to have Prev/Next Navigation AND pagination, but then on another one, just Pagination will do. Is that possible?

    • Hi Milagros, there isn’t an option for this, but you can set it up like that with a little custom CSS.

      Each slideshow has a unique ID, like the slideshow on my homepage is “meteor-slideshowhome”. You can use that to target a specific slideshow and use CSS to hide nav elements you don’t want:

      #meteor-slideshowhome ul.meteor-nav {
      	display: none !important;
  17. Just wanted to let you know that your plugin is brilliant and just what I needed! I was able to put two different slideshows on our front page, each a different size. I did find out that a slideshow needs more than one slide to show up! I am planning to add more slide to that slideshow later but have just one at the moment. So I just duplicated it. 🙂
    Just bought you a cup of coffee!
    Thanks again!

  18. Thanks for the coffee Deb, I’m glad my plugin came in handy for you!

  19. I’m trying to have a large 552 by 200 at the top of this page and on the same page, right below, I want to have 552 by 36 – is this possible?? Right now I can’t get the second slideshow to show up underneath – it shows up behind the first…

  20. Hi Josh,

    I was wondering if metadata can be used to specific the navigation when using multiple slideshows. ie None, Previous/Next, Paged, Both) Plug in works great… sending you a few cups of Joe!

    • Thanks for the coffee Jim! You can’t set the navigation option with metadata, though that is an interesting idea for a future version! Right now you can do that with a little custom CSS to hide the navigation on specific slideshows :

      #meteor-slideshowhome ul.meteor-nav {
      display: none !important;
  21. The slideshow name is ‘smallSlides’ and the snippet below worked great to hide the paging buttons.

    #meteor-buttonssmallSlides {
    display: none !important;


  22. Is there a maximun size for slideshows? I woudl like to go up to 1200 x 800 pixels but can’t seem to find a way to do so.


    • The slideshows can be any size, if the spot you’re trying to add it to on the site can accommodate that size. Make sure you set the size in the slideshow settings and then upload the slide images.

  23. Thank you for that. I am contemplating moving from an HTML website to WordPress and would like to have a home page which accommodates a 200 x 800 pixel slideshow. Do you have any suggestions for themes which might be of use.

    Many thanks for your swift reply which is very much appreciated.


  24. Hi Josh, thanks for this freeslideshow, I have been setting it up on (test mode).
    Am trying to load 2 shows – header page 940w * 350H – I have settings as width = 940 and height = 400.

    2nd show is to be 534W * 400H – ERRR – when I go to add new slide to 2nd show, the feature image is looking for a default image as 940 * 400 – “Featured Images at least as wide as default header image will be used as a replacement for default image for this page or post. Smaller images used as “thumbnail” at beginning of Page/Post.”

    So it is distorting the image selection from my Media Library (images to be imported are exactly 534 * 400).

    Is this a new problem with WP 3.5?

  25. Hi Josh,

    BINGO!! found the issue, I had re-sized images and although I had ‘affect all’ on save, it appears the thumbnails were incorrect – after regenerating thumbnails MShow works.

    Now just need the code to get it to center!

    Regards, Dennis

  26. Hi,
    Any idea why only my first slideshow is visible on the website? I’ve created new slideshows with new names, but they just don’t appear on the page. If I change the name to the first slideshow again, everything works. But at the moment I’m not able to add multiple slideshows. Adding slides works ok, but only to the first slideshow.

    The first is called on the frontpage with:
    [meteor_slideshow slideshow="duunit"]

    And this works also on the Kuvagalleria/Projektit page, but not if I change the name to:
    [meteor_slideshow slideshow="duunit2"]

    Both slideshows are existing and using same or different images.

    If you check the source code, the images files can be seen, like:ävaunun-sovitus5-460×345.jpg

    Even the “box” is drawn on the page but nothing appears. Any ideas?

  27. Hi Josh

    Love the plugin man.

    Is it possible to have a particular slide be the first slide every time the page is reloaded?


    • Thanks Paul, the slides are sorted chronologically, just like blog posts, so you can change the publish dates of the slide posts if you want a certain slide to be first.

  28. Ah, thanks! Now I got it. It was maybe a bit poorly documented. Shouldn’t there be a text in the slideshow (when only 1 image available) that the user must have at least 2 pictures in order for the slideshow to work. Now there’s no hint of a solution/explanation why it doesn’t work.

  29. This tutorial seems to cover the shortcode usage for multiple mixed slide shows, but what if you’re using the widget too? I have 2 or 3 shows that are about 300 x 200 that I see that I can use as shortcode, but I have one slide show that is 400 x 160 that is a widget. So, how do I set all that up?


  30. Hi Josh! Thank you very much for a very wonderful and easy to use plugin.

    I have a problem though, when using multiple sliders in a page, swiping in mobile rotates all the galleries instead of just one. Do you know what’s wrong? my website is:

    Thanks so much!

  31. Hi Josh,
    I have two slideshows on this site. Large one is 500w x 375h on the home page. Smaller one is 250w X 375h and I want to float it left and wrap text around it to the right. Display size is correct, but the block element on the page takes up the entire 500 width. I have tried adding a CSS style element to the header of the page so it loads first, but it is not working. Page is here: and CSS is
    #meteor-slideshowLanding1 {
    float: left;
    margin: 0 20 20 0;

    Can you help?
    Thanks in advance!

  32. Hi Christine, if you update to Meteor Slides 1.5.1, you can use the new slideshow alignment option to float it to the left.

  33. Hi Josh,
    I am using you slider on my page but somehow metadata put into the widget does not seem to be working. In general settings i have 940×238 set. I followed instructions you posted on April 29, 2012 at 10:22 pm and placed only:
    height: 100, width: 300
    into the widget edit field.

    What do I do wrong?
    How can I get access to all other slider settings for different sliders on my pages?


  34. hello josh, im jhody from indonesia
    currently im working on my website, i just found this plugin quite simple to manage. you have a great work on it.

    thanx alot

  35. Hi Josh
    I have 2 similar sized slideshows – named “slider1” and “slider2”. Both slideshows filled with 3 different slides each (for certain). I inserted both slideshows in the same post (text) together as:
    [meteor_slideshow slideshow="slider1"]
    [meteor_slideshow slideshow="slider2"]
    Now I have 2 similar slideshows with same slides each, and slides are from the end of whole slide’s list. I put this example here:
    Where is a mistake? Thanks

    P.s. Same optioned slide navigation works different on both slideshows.

    • Hi Andrey, it looks like they are both the default slideshow, a slideshow isn’t specified. But there are code tags wrapped around the slideshows, this can cause problems. Switch to the HTML view and remove the extra code tags, make sure the shortcode is on a line by itself, and doublecheck that the slideshow slugs you have added match the slugs in the WordPress admin.

  36. Hi Josh,
    I have two Meteor Sliders. One, with default settings, here:
    Another one here:
    This Meteor Slide widget is located in woosidebar widget so I can locate it at this place on the page. this one I want to change. Metadata typed as follows:
    height: 100, width: 300
    Pictures not adopt to these settings. I supposed they will be cropped.

    Slides settings:
    height: 238, width: 940
    I would appreciate your support.

  37. I think I found the solution.

    Pictures not adopt to these settings. I supposed they will be cropped.

    My assumption about cropping pictures was wrong. The image was resided to the height and width placed in metadata and it seems to be working.

  38. Hi. I am using Weaver 11 Pro and added meteor slides on the home page as a top widget. I am trying to change the size of the slideshow. I am trying to put ithe metadata in the widget to try to change the size of the slide, for example [meteor_slideshow slideshow="pet-home" metadata="height:300 width: 425"]. The default metadata in the widget says [meteor_slideshow slideshow=. When I replace that with my metadata and click Save on the widget, the info I put in there disappears and goes back to [meteor_slideshow slideshow=.
    Can you tell me what I am doing wrong?
    Thanks, Jan

    • Hi Jan, there is probably a syntax error in the shortcode, I noticed in the example you posted, there is a comma missing in the metadata:

      [meteor_slideshow slideshow="pet-home" metadata="height:300, width: 425"]

  39. Hi, my question is: will this plugin resize or cut pictures when i load ex. 1024×768 pictures, i think my theme 2011 is not broad enough, i think 900px, and i dont want to resize all my pictures

    second, smaller sized pics should be zoomed


    • Yes, if the slide images are large than the slideshow size, it will crop them to fit, it will not enlarge images that are too small, as these would be “blown up” and the quality would be bad.

      The cropping is really just to keep the slideshow from looking bad if a very large image is used accidentally. To get the best quality slideshow, I recommend sizing your slide images properly in an image editor first, setting the slideshow dimensions to match those slide images exactly, and then uploading the images.

  40. hi, is there any option for diplay picture text


  41. Hi Josh.
    Thanks for your quick reply.
    In the Meteor Slides Widget I have selected the Slideshow “PetHome” from the dropdown menu. In the Metadata field, I added [meteor_slideshow slideshow="PetHome" metadata="height:350, width: 425"]

    • In the metadata field you just need the metadata that gets entered into the shortcode, not the whole shortcode. Try it like this:

      height:350, width: 425

      Take a look on the using metadata page, it shows how it should be added depending on what you are using to load the slideshow.

      • Unfortunately that didn’t work either with quotes or without. When I chose All Slides in the dropdown instead of the specific slideshow I want, it sized them all to half the size.

        • Hi Jan, I’m not exactly sure what is going on, can you post a link to the page you’re working on?

        • Hi Jan and Josh.
          I have been using Meteor Slides for a month. This plugin is great and I am so grateful for Josh’s amazing work. Thank you very much.

          I have a question to Jan. What was the size of “Setting” when you uploaded the image to Meteor Slides? I am wondering if the set size might have been smaller than the size your target with metadata then. You might be able to solve this problem by eliminating the image already uploaded before from the slide show first and reset the size larger in the “setting” and reupload the image data. (Sorry I am Japanese and not good at explaining things in English)

          I hope your problem will be solved by this. Good luck.

  42. Hi Josh,

    Great plugin and largely very easy to use with your great support website. I have added three shows to my website so far, the main one on the home page and one smaller in the sidebar. Both are fine.

    The final one located in the top sidebar is having a few issues. I set it up like the other sidebar, but the images look enlarged still. Can you have a scan to try and diagnose the problem?




  43. Thanks Giuseppe, I tried to access the site you linked to and wasn’t able to load it, are you still having problems with that last slideshow?

    • sorry, my fault I think and yes still having issues

      • The the slide image size and slideshow size don’t match. The slideshow is set to a larger size, set it to match the size of the first slide in the slideshow and it should fit better.

        • Hi, Thanks for the reply. But I thought adding the metadata would overide the defualt slide size settings. The images are formatted to 300 x 150, just like the other sidebar slidshow below the one in question labelled “Find Us At: Or am I getting confused?

          • Ah, I was mistaken, you’ve got the slides sized correctly, but the slideshow shrinking down to 250px because the column isn’t wide enough for the whole slideshow to fit without scaling. The columns have a fluid width, but it looks like the max width for the slideshows would be 250px.

  44. Hi Josh,

    Brilliant plugin that you built, every easy to use and lot of options. I’ll definitely be voting 5 stars for it.

    I do have a small issue if I place 2 or more slideshows on the same post and wonder if I’m doing something wrong.

    If I’m using the prev/next option it only works for the first slideshow on the page. All subsequent slideshows will scroll through the slides ok but if I click on the prev/next arrows it has no effect.

    Any ideas.


    • Thanks Kevin, ratings are always appreciated!

      Most of the time multiple slideshows conflict because they are loading the same slideshow, or because one if the slideshow slugs that has been specified isn’t quite right. I would double check those slugs. I can take a look if you want to post a link.

      • Spot on Josh. It was my mistake, I had omitted a hyphen and had ‘idea generators’ instead of ‘idea-generators’ as the slideshow value. Thanks for the solution and the quick response.

        You’ve definitely earned a cup of coffee!!

        Chow chow,

  45. Josh,

    You are a legend, keep up the good work!


  46. Josh: my apology for being so dumb, but I can’t seem to get the photos to size properly.

    I added 17 photos in my Media Library. They are each 1024 wide by 574 tall.

    Next I created a slide show I called “Trivia” with a slug “trivia”

    Then I added each of the photos into “Slides” and attached them to the “Trivia” slideshow. I have verified that they are in “Slides” at the dimensions 1024 width and 574 height.

    Next I changed the Slide show settings to height: 574 and width to 1024

    Then I put in the short code in a new page as follows:

    [meteor_slideshow slideshow="trivia" metadata="height: 448, width: 800"]

    I am now stumped. I can’t seem to figure out what I have done wrong. The photos appear to be the correct width but not the correct height. They are all cropped.

    If you would please look at my page i would greatly appreciate it.

  47. Hi Josh,

    The support you provide here is unbelievable!
    super awesome for newbies like me to lurk around and learn!

    I am using 2011 wpress theme and trying to create a site full of sliders.

    some issues i would request you to guide me

    1. On my site One slider is working fine with height 450px and width 300px. but am unable to create another slider with different height nd width. please help.

    2. I already have another mannual slider in the header of every page i would like to replace that on some pages with meteor slides. How can i do that?

    3. How can i add a background image to the meteor -slides?

    here is the link to website

    Thanks in advance !


    • Hi Bunny, I don’t see any Meteor Slides slideshows on that site.

      • Hi Josh,

        the one slider i applied is working fine here

        i was facing issues in
        1. adding another slider, which might be bigger than the above mentioned.
        and wanted to know how could i
        2. replace the header slider with a meteor slider on several pages down the line.
        3. Apply a background image to a meteor slider ?

        Thanks for the plugin and great support!


        • Take another look at this tutorial, you need to set the slideshow dimensions to match the largest slideshow, and then override that using metadata on the smaller slideshows. So for that existing slideshow you need to add metadata with the size and then change it to the larger size in the slideshow settings.

          If you wanted a slideshow on certain pages you’d use a conditional, just like this example, but you’d load the default slider you have now in that conditional as the default element.

          You can use a custom stylesheet to customize the slideshow, but don’t add a background to the existing slideshow container, it needs to be a certain size, instead add a new container around the slideshow function and style that one.

Comments are closed.