How to create a jQuery Slider

15
How to create a jQuery slider in Likno Web Scroller Builder

description

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

Transcript of How to create a jQuery Slider

Page 1: How to create a jQuery Slider

How to create a jQuery sliderin Likno Web Scroller Builder

Page 2: How to create a jQuery Slider

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.

Page 3: How to create a jQuery Slider

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.

Page 4: How to create a jQuery Slider

Select the folder in which you want to save your scroller project, give it a name and then click “Save”.

Page 5: How to create a jQuery Slider

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.

Page 6: How to create a jQuery Slider

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.

Page 7: How to create a jQuery Slider

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.

Page 8: How to create a jQuery Slider

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.

Page 9: How to create a jQuery Slider

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.

Page 10: How to create a jQuery Slider

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.

Page 11: How to create a jQuery Slider

Click on Edit and select your Publish Folder (where you want the compiled files to be placed).

Page 12: How to create a jQuery Slider

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.

Page 13: How to create a jQuery Slider

The Sample Page has been created so you can see the scroller in action.

Page 14: How to create a jQuery Slider

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)

Page 15: How to create a jQuery Slider

Visit www.likno.com for more information