Since sliders are, in most cases, in a featured place, it’s important to let the visitors go to other slides easily. Usually, there are arrows and bullets which, in some cases, are not so noticeable.

One of the best in-slider navigation elements is the thumbnail. Thumbnails are small images, showing the content of each slide. The most popular way to create a slider is to show horizontal thumbnails below the slider. They have many benefits, they’re user friendly and they look great on any website.

Create nice looking, responsive thumbnail sliders

Smart Slider 3 has many great features to create a nice looking free thumbnail slider and it’s easy to create a slider with thumbnail navigation. When you have some images to show, all you need to do is to enable the thumbnail control. It allows you to place the thumbnails anywhere you want inside or around the slider. Also it’s possible to show them only when the mouse is above the slider.

Thumbnails are great and not just because they let the user know how many slides the slider has, and realize there are more content for them to see, but it is also an awesome way of navigation as they don’t have to go through many slides one by one if they would like to check a slide in the middle of the slider.

Customize your Thumbnail slider

There are many customization options for a thumbnail slider in Smart Slider 3. You can change the color of the thumbnail bar, add borders, box shadow or extra CSS codes. This allows you to place the thumbnail images wherever you would prefer to have them. You can set the size of the thumbnail images, and choose whether the slider switches on click or on hover.

Usually you can imagine a thumbnail as a preview of your slide but in Smart Slider 3 you don’t need to use the same image as your background, you can upload your own thumbnail image. By doing so, you can make a good navigation, and cheer up your slider.

What is even more, you can group the thumbnails. For example, you can make them show up in 3 rows, which is handy when there are many slides to see.

Thumbnails with title and description

Most of the thumbnail sliders let you show only the actual thumbnail image. However a picture is worth a thousand words, sometimes words are needed to complete the story. Smart Slider 3 took a step forward and lets you display the slide title and description. This helps the visitor get a better idea of the slides’ content. Reading the title helps the visitor decide whether they want to check out the slide or not.

Video slider with horizontal thumbnail

Smart Slider 3 is not just a simple thumbnail slider plugin, but you can create video slider as well. You can display videos from YouTube, Vimeo or from your own server. But it’s not easy to tell by seeing a still image that the slide has a video. This is why we made an option to change the thumbnail type to video. Video thumbnails have a small play icon on them which lets the visitor know about the video on the slide.

Optimize your images in the slider

If you create a thumbnail slider, you probably have countless images you want to show. These images are often large which causes page loading. Not only the image dimensions are huge, but the actual file sizes as well. A large image takes a lot of time to load, and you don’t want to keep your visitors waiting too much.

Smart Slider 3 has many options for you to get back the page speed when you use a thumbnail slider. One of the most useful features in this list is the image optimization. It resizes the background images to the sliders or to a given size. It also resizes the thumbnails which gives you extra speed. You can lazy load the background images you use. This way instead of loading every image, the slider loads only a given amount of them.

The new way to build a Slider

Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.

Get Started

Nice thumbnail slider effects

People love to see nice effects on websites they visit. Smart Slider 3 has many favored design effects which you can use to please your visitors’ needs. You can select the Ken Burns effect for the slide images in your thumbnail slider. This effect slowly zooms on the images and it’s a popular design choice by modern web designers.

Also popular feature is the Parallax effect in Smart Slider 3. You can choose from 3 different parallax modes, the best known is the slide background parallax. This time the slide background will be in a fixed position and while the visitor scrolls on the page, the images move and create the illusion of depth. But the slide changing parallax and layer parallax are very useful features too.

Sliders usually occupy a limited area on a page. This is especially true for a thumbnail slider, which is rarely used as a full width slider, but Smart Slider 3 has a lightbox feature which you can use to enlarge the currently viewed image. In a lightbox slider you can go through every image inside the slider, switching the slides as well. What is even more, you can create a mini-gallery via lightbox at every slide.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

Conclusion

Using a thumbnail slider can be useful if you would like to navigate between the slides, or show a little preview of your slides. Visitors can see how many slides are there to be seen and the images are easy targets for mobile users. A slider with thumbnail navigation increases the user experience of the site, and they are nice bonuses to a slider.

Just enable the thumbnail control, upload your own thumbnail image or use the default from the slide background. Also you can display your slide title and the description, and you can customize them. It is good looking and responsive, and what is even more, you can use it in the free version of Smart Slider 3.

The post Create A Responsive Thumbnail Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]>