How to create thumbnail slider in wordpress
- WordPress Tutorials

How to Add a Thumbnail Slider to WordPress (Step by Step)

A thumbnail slider is a specific kind of image slider: instead of just arrows or dots to navigate, you get a strip of small preview images (thumbnails) underneath or beside the main slide — click any thumbnail and the main image jumps straight to it. It’s a common pattern for product galleries, portfolios, and photography sites, where showing visitors what’s coming up matters more than a simple next/previous flow.

Thumbnail slider vs. a regular slider — what’s the difference?

A regular slider just moves forward and backward through slides one at a time. A thumbnail slider adds a second row of small preview images that act as both a navigation menu and a visual index — visitors can see everything available at a glance and jump directly to what interests them, instead of clicking “next” repeatedly to find it.

What to look for in a WordPress thumbnail slider plugin

  1. Independent control over thumbnail size and layout — thumbnails below the main image, beside it, or in a separate row entirely, depending on your page layout
  2. Smooth, real easing animations — a slider that just snaps between images instead of transitioning smoothly feels dated
  3. Lightbox support — being able to click the main image (not just thumbnails) to see a full-size popup view
  4. Native Gutenberg block — for placing the slider without shortcodes or page-builder workarounds
  5. Touch/swipe support on mobile — thumbnail strips especially need to scroll smoothly with a finger swipe, not just resize down from desktop

A few options to consider

(Add 2–3 genuine competitor plugins here before publishing, same approach as the other posts.)

Responsive Thumbnail Slider — built around exactly this pattern, with a lightweight modern engine, real easing animation controls (not just CSS approximations), an optional lightbox, and a native Gutenberg block. The free version covers a single slider with the core thumbnail-navigation experience; the Pro version adds unlimited sliders, analytics on which slides get the most engagement, and deeper style customization. See the plugin →

How to add a thumbnail slider to WordPress

  1. Install a thumbnail slider plugin from Plugins → Add New
  2. Activate it, then look for its dedicated settings menu in your WordPress admin sidebar
  3. Upload your images through the plugin’s own admin screen (not just the media library directly, since most thumbnail sliders need images added through their specific interface to generate the thumbnail strip correctly)
  4. Adjust the thumbnail size, position (below or beside the main image), and transition speed
  5. Add the slider to a page using its Gutenberg block, or the shortcode/widget it provides
  6. Preview on mobile specifically — confirm the thumbnail strip scrolls smoothly with touch, not just that it resizes

Where thumbnail sliders work best

  • Product pages — showing multiple angles of a product, with thumbnails letting customers jump straight to the angle they want
  • Photography portfolios — a client can scan the thumbnail strip and jump to a specific shot instead of clicking through sequentially
  • Real estate listings — room-by-room photos where buyers often want to jump straight to “kitchen” or “backyard” rather than scroll through everything

Frequently asked questions

What’s the difference between a thumbnail slider and a regular carousel? A regular carousel only moves forward/backward one slide at a time. A thumbnail slider adds a strip of small preview images that act as a visual index — click any thumbnail and the main image jumps directly to it, instead of clicking “next” repeatedly to find it.

Do I need coding knowledge to add one? No — with a Gutenberg block-based plugin, you add it the same way you’d add an image or paragraph block: search for it in the block inserter, configure the settings in the sidebar, and upload your images through the plugin’s admin screen.

Will a thumbnail slider slow down my page? It can, if the plugin loads every full-size image upfront. Look for one with lazy loading, so images only load as they’re actually needed rather than all at once on page load.

Can I use a thumbnail slider for a single product with multiple photos? Yes — this is one of the most common use cases. Each thumbnail represents a different angle or variant of the same product, and clicking one swaps the main image instantly.

Does it work on mobile? A well-built thumbnail slider should let visitors swipe through the thumbnail strip with touch, not just resize down from desktop. Worth testing on an actual phone before publishing, since this is where many lower-quality slider plugins fall short.

Next >> How to create Post Sliders/ Post Grids

About Nikunj Gandhi

Read All Posts By Nikunj Gandhi