Support Contact:
Phone: +40 (21) 310.63.42; Forums:

How to Create a Slider in Dreamweaver

With the Extend Studio jQuery Power Slider extension you can create beautiful jQuery sliders. Here is the example that we will use for the following tutorial.

Install and locate the jQuery Power Slider in Dreamweaver

You can download the jQuery Power Slider for Dreamweaver from here:

For Dreamweaver CS5, CS5.5, CS6, CC:
– open the “” file using Adobe Extension Manager;
– restart Dreamweaver.

For Dreamweaver CS4:
– open the “” file using Adobe Extension Manager CS4;
– restart Dreamweaver.

Install extension in Adobe Dreamweaver using the Adobe Extension Manager

The Extend Studio products are available in the “Insert” window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.

If the “Insert” window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

If the “Insert” window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the “Common” drop-down – marked with a down arrow.

The Extend Studio products should appear in the pop-up list.

Install The Design Editor AIR Application

The extension uses an additional AIR application for image editing and resizing. You will find the “PowerSliderEditor.air” installer file inside the extension package. You should install it in order for the extension to function properly.

Insert a jQuery Power Slider into a page

In order to add a jQuery Power Slider, you need to create a html page inside a site. If you don’t know how to define a site in Dreamweaver, check this page for help:

1. Put the mouse cursor into the element where you want the slider to be added.

Add a photo gallery to your page in Dreamweaver

2. Click the “insert slider” button from the Dreamweaver “Insert” window.

Insert Photo Gallery in Dreamweaver

3. The jQuery Power Slider for Dreamweaver Editor will appear.

- change the slider name;

- change the width to 1000 px;

- change the height to 300 px;

- select 3 slides.

When you’re done, click the “Insert” button.

Photo Gallery Editor in Dreamweaver

Change the Slider design settings

After inserting the slider into the page the jQuery Power Slider Property Inspector will appear.
We will make some edits here, to get to a simpler design, that fits properly in this page by keeping the image, the title and text elements, and the 3 bullets for the navigation.

Change Photo Gallery Settings in Dreamweaver

1. From the Property Inspector > General settings align the slider to center.

Align Photo Gallery to Center

2. Move the image to the right. From the Property Inspector change the image settings:
- add 200 x 200 width and height;
- change the offsets to: offset X:720 and offset Y:45.

Align Photo Gallery to Center

3.Change the Slider background color:
- select the slider and from the Property Inspector go to the “Design” tab;
- clear the “Bg. image” input;
- set the “#f2f2f2″ background color to the slider.

Align Photo Gallery to Center

4.Change the slider image:
- select the Dreamweaver Split view, so that you can see both the code and the design;
- select the image.

Align Photo Gallery to Center

- browse for the image on your computer:
- remove the image path and browse for a new image from your computer.

Align Photo Gallery to Center

The new image will be updated in Dreamweaver design view:

Align Photo Gallery to Center

5. Remove the subheader text:
- select the subheader text of the slider;
- after the blue rectangle appears, press the "Delete" button from your keyboard in order to remove it.

Photo Gallery Thumbs Bar

6. Set header style:
- select header text of the slider;
- go to the Property Inspector> Text tab;
- remove the bold style;
- click on the blue text icon to set the text to be uppercase;

Photo Gallery Thumbs Bar

7. Resize the text area:
- select the text of the slider;
- after the blue rectangle appears, drag it to the right to enlarge it.

Photo Gallery Thumbs Bar

8. Style the other 2 slides:
To visualize 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.

Photo Gallery Image Area

Preview the page in browser

Here is how the slider will look like.

Facebook comments:

Leave a Reply