A WordPress slider with thumbnails in a second, smaller carousel. Pick it over bullets when visitors choose a photo, such as six angles of one product.
What a thumbnail strip adds to a carousel
Display Thumbnails puts a second, smaller carousel under the main one. Each image gets a thumbnail, a click moves the large slide to it, and the strip tracks the carousel. A new block has the toggle off. The slider above runs a 0.6 second transition with Loop on, thumbnails 140 px tall and Thumbnails Per View left on Auto.
The alternative is bullets. Dynamic Bullets, as used on the plain slider demo, tell a visitor how far along they are and nothing else. Thumbnails tell them what is coming, which matters when the visitor is choosing a photo rather than watching them go past. A five image band at the top of a page does not need them. Six angles of one product does.
What you can set on a thumbnail slider
Switching Layout to Slider swaps the column controls for its own panel. Four fields there drive the thumbnail row. Two more belong to the main carousel under it, and the rest of the panel is in the Slider layout reference.
- Display Thumbnails is off by default. Turning it on reveals the three fields under it.
- Thumbnails Height takes Auto, Static from 10 to 400 px, or Dynamic from 10 to 200 percent. It starts on Static at 100, and this page sets 140.
- Thumbnails Per View is Auto or a number from 1 to 14, and starts on Custom at 8. A number steps down as the screen narrows, on the same ladder as Slides Per View: 1200, 992, 768, 576 and 320 px. This page uses Auto, which skips the ladder.
- Thumbnails Gap runs 0 to 150 px and defaults to 15.
- Speed (in Seconds) accepts 0 to 5 in steps of 0.1 and defaults to 0.3. The demo uses 0.6.
- Items Height is Auto, Static from 30 to 800 px, or Dynamic from 10 to 300 percent. It defaults to Dynamic 80 and runs at 50 here.
Adding the thumbnail row in three steps
- Add the Visual Portfolio block and choose Media as the source. Click Add Media, pick the photos, then drag them in the list into the order the carousel should follow.
- Open the Layout panel, set it to Slider and turn Display Thumbnails on. Set Thumbnails Height and Thumbnails Per View, then turn Loop on if the set should run past the last photo back to the first.
- Set Click Action to Popup so the large slide opens full size, and check Title Source and Description Source for the caption there. Add the Filter element with Style set to Dropdown, as on this page.
Free thumbnails, and what Pro adds around them
Nothing on this page needs a license. The Slider layout, Display Thumbnails, all four thumbnail fields and the lightbox ship in the free plugin. Pro is the same plugin with more in it, not an add-on. Around this carousel it changes four things. The free versus Pro table has the whole split, and the pricing page the cost.
- Thumbnails Opened At Startup and Thumbnails Position, Vertical or Horizontal, inside the Fancybox lightbox. PhotoSwipe has none. The strip on the page itself is free.
- Responsive Breakpoints under Settings, General. They move the five widths at which a slide or thumbnail count steps down.
- Custom Popup Image, set per photo in Media Settings, so the lightbox opens a different file from the one in the carousel.
- Video files from the Media Library as slides, with Playback on Autoplay in Viewport or Play on Hover.
What people ask about slider thumbnails
Why do the thumbnails look blurry?
A gallery serves the Extra Large (VP) size, 1920 px, for most layouts, and the browser picks a smaller file on a narrow screen. Nothing is enlarged, so a photo uploaded at 800 px stays soft when it is stretched. If the sizes changed after upload, or the photos predate the plugin, run Regenerate Thumbnails. The blurry images answer covers the rest.
How do I make a slide open full size?
Block settings, Click Action, Popup, as opening items in a lightbox sets out. A media item opens its own image. An image with a custom URL in its Media Settings is the exception, and always links out instead. The lightbox script and its buttons are chosen under Settings, Popup and Lightbox, for every block at once.
Can I turn lazy loading off for this gallery?
Not for one block. It is one site-wide switch at Settings, Images, Lazy Loading, Disabled. To skip one picture only, give it the class no-lazy or list it in Lazy Loading Excludes. The plugin also stands down when EWWW, Lazy Loader, SiteGround Optimizer, Avada or Enfold lazy loading is running, which the lazy loading answer explains.
