Simplicity, Quality & Perspicuity.
Build Sliders & Blocks Visually
Build Sliders & Blocks Visually
Stunning Photos
Take one photo a day for 365 days. You will create unique, beautiful, unforgettable memories. For free.
Average temperatures in the Arctic are rising twice as fast
My latest post
Never. Stop. Exploring.
A Perfect Morning
One Dream, One World, One Incredible Trip
in Hungary
Is the new Macbook Air the perfect minimal development machine?
February 27,2015
comfort zone.
at the end of your
Life begins
Smart Slider 3
Fully Responsive
Total control over the design
Top-notch customer support
User-friendly Editor
in the world.
The most epic
What’s new?
Don’t stress, just get the dress
Life is short. Do stuff that matters.
With Smart Slider 3 everyone can build amazing sliders easily.
Art Director & Travel Photographer
Michael Patterson
Art Director
Stunning Photos
ArrowArrow
Slider

Horizontal thumbnail control

Creating a slider that has many slides in it can be a real challenge, especially when it comes to figuring out the best way for your users to view all of them. Having arrows for the navigation is quite wonderful, even if repeatedly clicking on them can be tiring, and the amount of slides you put on your slider remain unknown to your visitors. Bullets will show how many slides you have exactly, which is great. However, sometimes even the bullets aren’t perfect for the job of showing all slides for the visitors (even if the thumbnails are turned on for them), and times like that, you should take a look at what the thumbnails are offering.

Horizontal Thumbnail

Description: Simple and smart solution to showcase more slides. Better navigation and extra information!

Tags: , , , , ,

Thumbnail navigation in Smart Slider 3
Thumbnail navigation in Smart Slider 3

Thumbnails are great and not just because they let the user know how many slides (images) the slider has, and realize there are more content for them to see. 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. Additionally, it is a fantastic way of navigation for mobile users, as large thumbnails are great target for them.

Horizontal Thumbnail

Description: Simple and smart solution to showcase more slides. Better navigation and extra information!

Tags: , , , , ,

Yes, so far nothing extraordinary, since bullets can show thumbnails, too, when hovered. What is the difference then? At the slider above, you can see that the thumbnails are visible even when you don’t hover over them, and you can see all of them in a special thumbnail container (in the case of the slider above, it’s a bar below the slider). The thing is, thumbnails can be so much more than just images displayed in a horizontal (or vertical) bar. You can show texts (slide titles and descriptions) before, after or on them. Now that is something the bullets can’t do, can they?

Thumbnail groups

Thumbnails can be displayed in rows (look for “Group” at the thumbnail settings at Smart Slider 3), you can specify how many rows (groups) should be displayed. However, the slider will decide the amount of slides that will be placed within each groups. The upper left thumbnail will always be the first slide, and if the number set in the groups option is greater than one, the second slide will be placed right below it.

Let’s say you have seven slides and you set the group to three. This means the first slide will be placed to the upper left corner, and the second slide will be placed below it. Now the number of groups is two, but the setting is three, so the third slide will be placed to the bottom of the first row. Since placing slide number four would start a fourth group, that will be placed to the top of the second column, right beside slide 1. Slide five will be slide 2’s neighbor, and slide 6 is placed beside slide 3. Since placing slide 7 below would start a fourth column, it will be placed to the very first row, beside slide 1 and slide 4.

Why is it good for you? Well, let’s say you have a great amount of slides, and you want them to be shown immediately. Let’s be honest, no matter how much is 1920px, even if the thumbnail width is 100px, it can’t show more than 19 thumbnails at a time. But if you use rows (let’s say, five rows), you are able to show 95 thumbnails on one page. Which is (calculating with 60px which is the default thumbnail height), approximately 336px, and that isn’t so much.

Caption & description

Giving more than just an image to your users to guide them through your slides is not an impossible thing to ask, especially if you are using Smart Slider 3. Our software allows you to show the title and description (only one or both) of your slides, giving extra information to your users and make them want to check out the other slides, too. Both the title and description can be fully customized using our font and style manager to match your site’s layout. You can place them before, after or on the thumbnails.

Width and position

The thumbnail bar’s size can be either a px or a percent value, and it can be styled to match your site’s layout. Thumbnails can be placed to 12 different positions by default, and if you have the pro version, you can use the control variables to have more options to perfectly place the thumbnails.

You can even change the orientation of your thumbnails from horizontal to vertical if you prefer to use it that way. (If you are using the simple positioning mode, the orientation might be overwritten by our default settings, as placing a vertical thumbnail bar to the bottom middle part of the slider would look awful, and it would take up a lot of space unnecessarily.)

Related pages