Create an Image Carousel With a Large Hero Image

We had an interesting question from a MetaSlider customer this week. They wanted a standard image carousel, but with a large hero image. Normally a carousel will show multiple images. This customer wanted smaller images on the left and right, with a larger central image.

In a previous tutorial, we showed how to use partial images on either side of the central image. This customer wanted partial images that were also smaller.

This image below isn’t exactly what the customer wanted, but it does give you an idea of how the hero image stands out. This type of slideshow is possible with MetaSlider and in this guide we’ll show you how it’s done.

How to Create a Hero Image Slideshow in MetaSlider

For the best results in this display, make sure that all the images for your slideshow are the same height and width. So if your first image is 1000px high and 400px wide, edit all your other images to the same dimensions.

• Install the MetaSlider plugin.
• Go to “MetaSlider”, then “Quick Start” in your WordPress admin menu.
• Choose “Carousel Slideshow” from the dropdown menu.
• Click “Create a Slideshow”.

• Click the “Delete Slide” option to remove the sample slides.
• Click “Add Slide” and add your own images to the slideshow.
• In the right sidebar, set the “Width” to “0”.
• You may also want to enable the “Arrows” option if you want to allow users to navigate through the slideshow themselves.

Next, you should add some CSS to your site’s theme. You can update the CSS on your website using one of these recommended methods.

Now you can go to view your MetaSlider slideshow on the frontend of your site. Click here for MetaSlider frontend options. You’ll see a display like the one in the screenshot below. As the users watch the slideshow, the image on the right will move into the hero position. The current main image will move to the left.

You can use the CSS to update this display. Change max-width and width values to get the final design that you need. For example, if you change those two values to “500”, you’ll decrease the size of the hero image.

If you go in the opposite direction and change those two values to “700”, you’ll increase the size of the hero image.

More about MetaSlider Carousels

This “hero” display is just one of many possible carousel options with MetaSlider. You can add text captions to your carousel. You can also use YouTube videos in your carousel, or locally hosted videos.

You can also use thumbnail navigation, which is a another way to allow users to see the previous and next images in your slideshow.