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.

Adding content to your jQuery PowerSlider

Select the slider from the page and the Extend Inspector bellow will appear in your Dreamweaver.

selecting menu from Dreamweaver

On the General tab you can see a list with all the slides from your jQuery PowerSlider.

To vizualise each slide in Design view, you can browse between slides. You can switch between slides by pressing using the next/previous slide buttons on top of the slider.

Change slide button

Adding images on slides

To add an image on a slide press the folder button corresponding to it.

add an image button

A window will appear where you can browse for the image and select it. The path to the image will appear in the list once it's selected.

If you want to add a new slide to your slider and add an image on it automatically press on the button with an image and a green plus (second on the left).

add new image slide

Adding HTML content

To add a new HTML content box you can press the button with the blue image (second button from the right). A new DIV will be added inside the current slide.

add html content box

You can add a new HTML content slide by pressing the button with the HTML sign (first button from the left). A new slide with default content will be added in your jQuery PowerSlider.

add html slide

Content boxes can be moved around in Dreamweaver Design View by drag and drop. Once you select a box an Extend Inspector interface will appear so you can modify the properties of that box.

content box inspector

Removing default content

You can remove all default content from the current slide by pressing the red sign button bellow the list (first button from the right).

remove default content

Available content and image dimensions

To make content adding simpler we added an additional feature in the General tab.

On the right of the interface you can see a "content dimensions info" box. This box is used by our extensions to display the exact space available for content.

Slider dimensions

When you insert images its best that their dimensions match the content dimensions shown in that box.


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