With MetaSlider you can use thumbnails for navigation on your slideshow.
Using thumbnail images for navigation can be a stylish alternative to using numbers or arrows for visitors to browse your slideshow.
This screenshot below shows a preview of thumbnail navigation. Users can click on any of the four lower images and they will see the larger version of the photos.
Follow these steps to see how to build thumbnail navigation on a slideshow:
- Install both MetaSlider Free and MetaSlider Pro. This guide shows how to install both plugins.
- Go to “MetaSlider” in your WordPress admin menu.
- Click “New” in the top toolbar and create a new slider.
- Click “Add Slide” and add “Image Slides” to your slider. This screenshot below shows how Image Slides appear in the WordPress admin area.
- To have enough images for thumbnail navigation, I’d recommend adding at least four Image Slides.
- In the right sidebar of the MetaSlider screen, choose “Thumbnails” for the “Navigation” option.
Place your slideshow on the front of your site. You can use the shortcode, the widget, the Gutenberg block, or several other options. This screenshot below shows a slider placed into a post using a shortcode.
When you place the slider on your site, you may notice that the thumbnails don’t quite match the width of the main image. If you want these to match exactly, go back to the MetaSlider admin area and experiment with some width changes. In this screenshot below, I’m using four thumbnails so I’ve set the overall “Width” to 800px and the “Thumb Width” to 200px. Checking the “Responsive Thumbnails” box will help your images adapt to the space they are placed in.
This next screenshot below shows the final result with “Width” set to 800px and “Thumb Width” set to 200px.
It’s also worth noting that the “Filmstrip” option is very similar to “Thumbnails”. The difference is that the navigation thumbnails won’t all appear at once but will move as the user navigates through the slideshow.
