How to create a jQuery Slider


Published on

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:
Likno Web Scroller Builder examples:
Likno Web Scroller Builder download:

Published in: Internet, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to create a jQuery Slider

  1. 1. How to create a jQuery slider in Likno Web Scroller Builder
  2. 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. 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. 4. Select the folder in which you want to save your scroller project, give it a name and then click “Save”.
  5. 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. 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. 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. 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. 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. 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. 11. Click on Edit and select your Publish Folder (where you want the compiled files to be placed).
  12. 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. 13. The Sample Page has been created so you can see the scroller in action.
  14. 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)
  15. 15. Visit for more information