The Ultimate Toolbox for creating
amazing web sites!
Using the jQuery Slider
In this tutorial we will give you an example how to use the jQuery Slider object.
This article assumes you are familiar with JavaScript, so it's probably only useful for advanced users.
A demo project is available for download at the end of this article.
Step 1
We will used a layer as a content holder, so first insert a layer and add one or more objects to it. During design time the layer will be fully expanded, so all objects will be visible. We later change the width of the layer to hide the content we do not want to be displayed initially. For this tutorial we've used shapes to simulate a row of photos, but basically it can be anything you want.
In this tutorial we will give you an example how to use the jQuery Slider object.
This article assumes you are familiar with JavaScript, so it's probably only useful for advanced users.
A demo project is available for download at the end of this article.
Step 1
We will used a layer as a content holder, so first insert a layer and add one or more objects to it. During design time the layer will be fully expanded, so all objects will be visible. We later change the width of the layer to hide the content we do not want to be displayed initially. For this tutorial we've used shapes to simulate a row of photos, but basically it can be anything you want.
Step 2
Insert a jQuery Slider object. Leave all properties to their default values.
Step 3
Now we will need a few lines of JavaScript to intialize the slider and set the width of the layer.
Insert a HTML object and set the Type property to 'Between <head></head> tags'.
Copy/paste the following code. Make note of the object IDs (jQuerySlider1 and Layer1).
If you've used different IDs then you will need to update the code!
Insert a jQuery Slider object. Leave all properties to their default values.
Step 3
Now we will need a few lines of JavaScript to intialize the slider and set the width of the layer.
Insert a HTML object and set the Type property to 'Between <head></head> tags'.
Copy/paste the following code. Make note of the object IDs (jQuerySlider1 and Layer1).
If you've used different IDs then you will need to update the code!
Step 4
And finally we implement an event handler for the slider.
Open the Event tab in the Slider's properties and add an event:
Event: Slide
Action: Custom code
JavaScript: $('.layer-content').css("left", "-" + ui.value + "px");
In the demo project there is also an example for a vertical slider and a layer background color changer. Check it out!
Download examples:
http://www.wysiwygwebbuilder.com/support/slider_examples.zip
And finally we implement an event handler for the slider.
Open the Event tab in the Slider's properties and add an event:
Event: Slide
Action: Custom code
JavaScript: $('.layer-content').css("left", "-" + ui.value + "px");
In the demo project there is also an example for a vertical slider and a layer background color changer. Check it out!
Download examples:
http://www.wysiwygwebbuilder.com/support/slider_examples.zip
Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Photo 7