In this presentation you can see how to create a jQuery slider using Likno Web Scroller Builder.
The basic steps are described so that you can take a first overview of the application and how to create your own jQuery sliders.
Likno Web Scroller Builder is a feature rich WYSIWYG application for creating any type of jQuery sliders, such as Horizontal/Vertical, content sliders, image sliders, video sliders.
Likno Web Scroller Builder info: http://www.likno.com/jquery-scroller/index.php
Likno Web Scroller Builder examples: http://www.likno.com/jquery-builders/examples.php?p=lwsc
Likno Web Scroller Builder download: http://www.likno.com/jquery-scroller/download.php
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
How to create a jQuery Slider
1. How to create a jQuery slider
in Likno Web Scroller Builder
2. Likno Web Scroller Builder is a feature-rich application that lets
you create any type of jQuery Sliders like:
Content Sliders
Image Sliders
Video Sliders
and much more without writing any code.
All the sliders that are produced by Likno Web Scroller Builder
perfectly work in all browsers, platforms and devices.
3. First, open Likno Web Scroller Builder.
On the splash screen that appears, select the Example you want to start with
and click “Create New Project from Example”.
Choose the example that best fits the design you want to create.
4. Select the folder in which you want to save your scroller project, give it a name
and then click “Save”.
5. In Project Items tab you can see the Generic Scroller choice and then the Populate the
scroller settings.
You have 4 population methods as you can see in the screenshot.
You can populate your scroller content through DIV tags, through UL/LI tags, inside the
compiled JavaScript file or through External Feed (RSS, ATOM, XML).
Choose the population method that best fits your needs.
6. In Project Items tab you can set your scroller items.
You can Add/Remove/Edit scroller items.
You can also set the content of your items and some extra settings.
7. In Project Items tab you can also set the Positioning of your scroller.
You can have it as “Embedded” in page or as “Floating” in page.
8. In Style Editor tab you can set the Behavior settings of your scroller, such as the
Transition effect, if it will play automatically on page load, if it will swipe on
touch devices and more.
9. In Style Editor tab you can set the Appearance of your scroller.
Here is where you can define all the styling for your scroller.
You can set styling properties for the scroller Areas, Items, Item Tooltips.
You can enable and stylize the Navigation bar, the Thumbnail bar and the
Navigation Arrows.
10. After you have created your slider the way you wanted it, it’s time to Publish it.
Click on Publish and Publish Project window will appear.
11. Click on Edit and select your Publish Folder (where you want the compiled files
to be placed).
12. Edit the Sample Page name or leave the default. (You can also uncheck it in case you
don’t want a Sample Page to be created.)
Set the Compile Project name or leave the default.
Finally, select for which domain you want to compile that project (or unlimited in case
you own an unlimited domains license).
Then, click on Publish button.
13. The Sample Page has been created so you can see the scroller in action.
14. In order to add the scroller on your page, go to the Sample Code tab, copy the
highlighted code and paste it on your page.
The scroller linking code must be pasted right after the <body> tag of your page.
The scroller content code must be placed where you want it to appear on your
page. (in case of the DIV or UL/LI population)