JQuery Power Slider banner

 

jQuery PowerSlider Documentation

Beautiful jQuery based sliders in Dreamweaver

box jQuery PowerSlider

With the jQuery PowerSlider Dreamweaver extension you can create great looking jQuery based sliders that will help improve the user experience on your web pages. To save time, you can start from one of the 20 professional designs that come with the product and use the design editor app to customize it and make it blend perfectly with your website. There is no need to code or know jQuery and CSS as all the settings are done quickly from the Dreamweaver interface.

Configuring your jQuery PowerSlider

Opening the Extend Inspector

After inserting a slider in your HTML page, all slider settings are made from the Extend Inspector. To activate the Extend Inspector, in Design view, click on the blue label just above the slider as in the image below:

Activate inspector

The inspector will float above the page, but you can dock it next to the Properties inspector for easier use.

Setting the slider main features from the inspector

As you can see from the image below there are more tabs in the interface, each one with a set of settings:

Powerslider main interface

In the General tab you can set the width and height of the slider and add images or HTML content elements in the slides. You can read more about adding content here:

From the Design tab, you can set the slider background image and position, the slider border, padding and margin.

powerlider design

From the Text tab you can set the font, font size, color, line height of the text elements that are displayed above the image in the slider

powerslider text

In the Animation tab you can change the animation settings:easing, set the slider on autoplay or loop, set the sliding direction.

powerslider animation
 
 
 
 

Download JQuery Slideshow Trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6
  • Adobe Dreamweaver CS6