Manual Slider tutorial

Most people want to make their custom sliders, where every slide looks differently. The best way to do it is with Manual Slider. It contains everything, so basically this is the slider, what our whole documentation is about, the quick and dynamic sliders were made from this too. Here is a step-by-step example, how to make a Manual Slider.

Step 1

Click on START at the Manual Slider.

Step 2

  • Name it so later you could find it more easily, and give him a size.
  • If you want it to be responsive, then turn on the Down scale and the Up scale.
  • The Global font size seems okey.
  • Usually there is no need for margin, so that can stay like that.
  • Pick a type, I will choose Showcase and click on Configure

Step 3

At the Showcase type here are some predefined animations, which are pretty cool, so I will choose one of them, and hit Apply. In other types you should turn on the background animations, which will give a lot more to your slider, but remember to put background images to every slide.

Step 4

  • Fade-in option can stay like this.
  • I will turn on the Play animation on first load, because I want it to be showed when the user visits the site.
  • Play out animations, Play layer in after main animation finished can stay.
  • I will turn on the Horizontal touch for phones, and the Keyboard option too, so the user can change the slides with the arrows of his keyboard.
  • There isn’t really a reason to turn on Block right click, so it can stay.
  • I want Lazy load on the images, but I will use Showcase slider, which shows 3 slides at once, and I don’t want to show the loading animation, so I will choose 2 slides for the neighbor, this way 5 slides will load fully at the start.

Step 5

At the Resize slide backgrounds I will choose Cover mode, so the whole slide would be covered by my background image, no matter the size.

Step 6

I will turn on the Autoplay with 5000ms Interval, and turn on the mouse enter for the stop, and the mouse leave for the resume, and I don’t want the autoplay to stop, so I will leave it like this.

Step 7

  • I don’t really want arrows, because it’s a showcase slider, and it can be changed by clicking on the next on the previous slides, but I want bullets, so the user could go to the end more quickly.
  • Transition bullets will do it, and I turn on the Display for every device.
  • The position should be in the middle, and the bottom, so from the left the position is width/2-bulletwidth/2, and from the bottom bulletheight+30
  • The width 100% is good, this way the positioning will be good.

Step 8

  • Orientation can stay Horizontal, and the Align in the Center.
  • I choose the fifth bullet, and change the colors for the hover, which is also the active bullet’s color.
  • I will leave the other settings, as they were, I don’t want shadow, a bar around it, or thumbnails for them.

Step 9

  • Since the autoplay is turned on, I would like to show how much time is left before the next slide comes, so I will use the Indicator too.
  • The stripe will be good in the bottom, so I choose that, and turn on the Display for every view.
  • The width is 100%, so it doesn’t matter, if it will 0 from on the left or right, and the bottom can be 0 too, it will be on the slider, but it’s not that high, so it won’t cover anything important.
  • I will change the color here too.

Step 10

I’m done with the slider configuration, so I will save on it, and now the slides can come. Click on Create slide.

Step 11

  • The name can stay, and I don’t want a description, because I don’t use any widget, that could show that.
  • Published is on, and the publish up and down dates can stay empty, because I just want to show it from right now. (After the saving there will be a date from now +10 years)
  • I don’t use any widget with thumbnails either, so that can stay.
  • I want a background for my slide, so I will put one there.
  • The link can stay empty too.

Step 12

Now the layers and items can come. Click on Add new layer, and position it with the position tab, or with your mouse cursor.

Step 13

I will put a heading item into the layer, and put my text into it. The h1 tag won’t matter, I will use my own fonts, and I don’t want any link on it.

Step 14

  • I like the Subheading dark, but it’s too small, and black, which I don’t want here and I don’t want to change the font size at the Global Settings, so I will give a values to them in here, and turn on the Font color.
  • The black caption style will be good, so I would have a background color with some opacity around my text.
  • I don’t want to add extra css, or javascript code to this item, so those options can stay empty.

Step 15

Now I would like to mark a path on the mountain, so I will put down a layer, and put a pin special item in it.

Step 16

But that ain’t much of a path, so I will duplicate this layer three times, so I will have 4 layers with pin special item in them.

Step 17

And position them.

Step 18

  • We can start the animations of the layers, because now we can see the items, and what they will do.
  • By clicking on the layer around the heading item I will choose Flip X for the Animation In, and Bounce for the Animation Out.

Step 19

I want the special items animations to happen after the heading’s animation, so I will give 200ms delay to the first one.

Step 20

Then I will give 400ms delay to the second, 600ms to the 3rd, and 800ms to the 4th. And save on the slide, because it is done.

Step 21

Now I will check the view for tablets and mobile phones, because the text probably doesn’t have enough space in the layer, so I will readjust it and I will hide the special items on the phone layout, because there is too much items in there, and on a small screen it’s better to only show the important things.

Step 22

I like the layout of the heading item, maybe it will be good for the other views too, but don’t really want to make it all over again, so I will delete the layers of the special items, remove and save this as a new layout.

Step 23

Then I will create an other slide.

Step 24

And load the saved layout.

Step 25

Now I will add a background image, and change the text in the heading. My text is shorter, so I will change the width of the layer too.

Step 26

I put an image item there, which will be the same as the image on my 4th slide. Under that I want a button, which will lead to the fourth slide, so I will write our javascript code to the Even on mouseclick. I will need the id of my slider to make it work, so I will check out the url of the page where I am, which is this:
The end of the link is sliderid=191, so 191 is my slider’s id, and the code will be this:

njQuery('#nextend-smart-slider-191').smartslider('goto', 3);

Step 27

Then I will put some layer animations on them.

Step 28

And adjust the tablet and mobile view.

Step 29

It is done, I will save it, and create some more slides. I don’t want it to start with the first slide, so I will set the 3rd as first, because on Showcase type of sliders I think it’s better not to start with the first.

Step 30

The slider is ready to be published, so I will grab the shortcode, and put it into my Homepage.