Slider Maker

Set thumbnail navigator - Jssor Slider Tutorial


1. Create 'tutorial08.slider'.

Open tutorial06.slider, click File -> Save As menu to save it as tutorial08.slider to your workspace.


2. Set layout options.

Click Layout menu to open layout window.
Set Outer Container -> Width property to 960 and set Slides Container -> X property to 240.
In this way, we reserved 240 x 480 space at the left side for thumbnails.



3. Set left arrow position.

Switch to Arrows tab.
Set Position (Left Arrow) -> Left property to 248 to move it from 0 to 248 along the x-axis.



4. Choose thumbnail navigator skin.

Switch to Thumbnails tab.
Choose 'thumbnail skin 07'.
Set options to place the thumbnail navigator at the left side.



5. Confirm and close layout window.

In the layout window, click OK button.



6. Set thumbnail image for every slide.

Select a slide and set thumbnail image for it.
Repeat to set thumbnail image for every slide.



7. Save your slider.

Click File -> Save menu to save your slider.



8. View your slider.

Click View menu to view your slider.
View example tutorial08.slider.