Creating a Barber style slider

If you have seen this page: and you would like to have the slider in your page working the same way as it does there, check out this documentation!

How are the Barber sliders working?

The barber sliders are working that way, that there are 4 sliders in the same page, and there are divs with unique IDs before the sliders, which are used for navigation. So to have a page like the Barber, you will need to download all four barber sliders, or you will need to create three other sliders. You won't be able to do it using one slider only.

Why do you need more sliders? Because the menu in the Barber sliders is working that way that it points to a unique id on the page, and our code scrolls down to that id. So our demo page's code looks like this:

[smartslider3 slider=1]
<div id="secondslider"></div>
[smartslider3 slider=2]
<div id="thirdslider"></div>
[smartslider3 slider=3]
<div id="fourthslider"></div>
[smartslider3 slider=4]

The divs before the sliders are used for navigation, but actually, you don't need to put divs with unique ids to your page, you can use the Smart Slider 3 sliders unique ids. They have this format: n2-ss-[sliderid]

The unique div id for the #3 slider is n2-ss-3, the #43 slider's is n2-ss-43. You can find out your slider id like this.

So you should have as many sliders in your page as many menupoints you have in your menu. If you are a WordPress user, you can put the sliders shortcode (or their php code) right below each other. If you are a Joomla user, you can put the sliders into the same module position, or put the article codes below each other. In Mangeto, you can either put the shortcodes or the widgets below each other.

Why isn't the second, third, etc. slides are there in the main slider?

The Barber sliders are block type sliders, so if you would like to have more slides, you'll need to switch to Expert mode and change the slider type to Simple at the General tab.