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