Overview

Got a lot of products or concepts to display? Don't want to sacrifice valuable vertical real estate? Well, that's exactly why we created Info Slider.

Dreamweaver CC comes with Bootstrap widgets. Why should I consider Info Slider?

Because it's better. In fact, it's not even close. Here's why:

Info Slider always fits. That is, it will always react to the available width of your containing element or the device viewport. To match your needs, you can set Info Slider to display from 1-6 panels in wide screens. As the screen narrows, there are 2 media query breakpoints that will reset the number of panels for optimum fit.

Info slider allows you to choose a color for the root container, as well as each individual panel.

Installing Info Slider

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. To install AGM, open your Adobe Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Dreamweaver CC 2015, Dreamweaver 18 (and higher) Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

Accessing Info Slider

There are 3 ways to access the UI. Choose the one most suitable to your workflow. When you open the interface, the system will detect the appropriate mode (Insert or Modify) based on where your cursor is.

When you are Creating a new widget instance, place your cursor on your page where you want to build it. If Modifying an existing instance, place your cursor anywhere inside the existing widget and use one of the 3 methods below to open the UI. The system will always open in the correct mode.

1. Insert Bar

Switch to the PVII category. Info Slider is the last one in the screen capture below

2. Insert panel

Switch to the PVII category. Info Slider is the last one in the screen capture below

3. Insert menu

Choose Insert > Studio VII > Info Slider by PVII

If your cursor is not inside another Info Slider instance, the main UI will open in Create Mode.

If your cursor is inside an existing widget, the UI will open in Modify mode.

Options & Settings

The Info Slider interface makes customizing your panels easy!

Creating a new Info Slider

The UI allows you to easily define and configure a new slider. Once configured, the UI can be used to modify (edit) the Slider as often as you like. Follow the steps below to create a new Info Slider:

Position your cursor where you would like your Slider to be created

Open the UI, as described above.

Note: When creating a new Slider make sure your insertion point is outside of any existing instance. You can create more than one Info Slider on a page, but you cannot nest one inside another.

Options and Settings

Panel List Command Buttons

Add Panel

Adds a new panel below the one that is selected

Delete Panel

Deletes the selected panel.

Move Up

Moves the selected panel up in the listing.

Move Down

Moves the selected panel down in the listing.

Panel Options

Each panel item has several available settings.

Panel User Class

You can assign an optional User Class to the selected panel. You can also add multiple classes . To do so, enter each class name separated by a space. User class is a powerful feature, allowing you full freedom to customize individual panels beyond the options in the UI. Stylistically, there is absolutely nothing you cannot do. Click the All button to assign your User Class to all panels in the Panel List.

Content Align

Set the alignment of the content in your panels. Click the All button to affect all panels in the Panel List.

Vertical Center

Align your panel content to vertical center. Click the All button to affect all panels in the Panel List.

Color Scheme

Select an optional background color for your panel. Click the All button to assign the color to all panels in the Panel List.

Separator

Assign a single-pixel border to the right edge of the selected panel, choosing Light (white), Medium (gray), or Dark (black). Click the All button to assign a Separator to all panels in the Panel List.

Content User Class

You can assign an optional User Class to the content area of the selected panel. Click the All button to assign your User Class to the content areas of all panels in the Panel List.

Global Options

Global options are used to style or configure the overall Info Slider widget, as opposed to the individual panels within.

Default Panel

Set any panel to be the first one when the page loads.

Number of Panels in View

Select from one to six panels to display. This number is further controlled by the included media queries in the Info Slider CSS file. Let's examine those queries.

/*
*******************************
BREAKPOINT 1
*******************************
*/
@media only screen and (max-width: 1440px) {
.ism-panels-10 .ism-panel {min-width: 12.5%;}
.ism-panels-9 .ism-panel {min-width: 12.5%;}
.ism-panels-8 .ism-panel {min-width: 12.5%;}
.ism-panels-7 .ism-panel {min-width: 16.666%;}

.ism-panels-6 .ism-panel {min-width: 16.666%;}
.ism-panels-5 .ism-panel {min-width: 20%;}
.ism-panels-4 .ism-panel {min-width: 25%;}
.ism-panels-3 .ism-panel {min-width: 33.333%;}
.ism-panels-2 .ism-panel {min-width: 50%;}
.ism-panels-1 .ism-panel {min-width: 100%;}
}

The above media query kicks in on screens that are 1440 pixels wide. The only change we are making at this breakpoint are for when you are showing 7 or more panels. For example, if you've set your slider to display 7 panels, this query overrides that setting, changing the view to show 6 panels instead.

/*
*******************************
BREAKPOINT 2
*******************************
*/
@media only screen and (max-width: 1280px) {
.ism-panels-10 .ism-panel {min-width: 20%;}
.ism-panels-9 .ism-panel {min-width: 20%;}
.ism-panels-8 .ism-panel {min-width: 20%;}
.ism-panels-7 .ism-panel {min-width: 20%;}
.ism-panels-6 .ism-panel {min-width: 20%;}

.ism-panels-5 .ism-panel {min-width: 20%;}
.ism-panels-4 .ism-panel {min-width: 25%;}
.ism-panels-3 .ism-panel {min-width: 33.333%;}
.ism-panels-2 .ism-panel {min-width: 50%;}
.ism-panels-1 .ism-panel {min-width: 100%;}
}

Breakpoint 2 kicks in at a screen width of 1280 pixels. All panel display configurations beyond five-panel views are reset to 20%, resulting in 5 panels showing at a time.

/*
*******************************
BREAKPOINT 3
*******************************
*/
@media only screen and (max-width: 1000px) {
.ism-panels-10 .ism-panel {min-width: 33.333%;}
.ism-panels-9 .ism-panel {min-width: 33.333%;}
.ism-panels-8 .ism-panel {min-width: 33.333%;}
.ism-panels-7 .ism-panel {min-width: 33.333%;}
.ism-panels-6 .ism-panel {min-width: 33.333%;}
.ism-panels-5 .ism-panel {min-width: 33.333%;}
.ism-panels-4 .ism-panel {min-width: 33.333%;}

.ism-panels-3 .ism-panel {min-width: 33.333%;}
.ism-panels-2 .ism-panel {min-width: 50%;}
.ism-panels-1 .ism-panel {min-width: 100%;}
}

Breakpoint 3 kicks in at a screen width of 1000 pixels. All panel display configurations beyond three-panel views are reset to 33.333%, resulting in 3 panels showing at a time.

/*
*******************************
BREAKPOINT 4 - Single Panel
*******************************
*/
@media only screen and (max-width: 768px) {
Do not edit the rules in this media query.
}

The breakpoint 4 media query sets one panel to show in your slider for screens or devices whose width is 768 pixels or less. Do not edit the CSS rules inside. You can, however, edit the max-width. For instance, if you wanted to allow plus-size phones to display your slider at breakpoint 2 values, but you still want to go to one panel for conventional phones, change the max-width to 480px.

Let's look at the remaining Global Options:


Auto Play on Load

Set the slider to run automatically when the page loads. If you choose this option, it is recommended (but not required) that you opt to show the Pause/Play Button.

Rotator Mode

Choose Viewport or Panel. Viewport slides your panels one viewport at a time. Choose Panel if you'd prefer to adance a single panel instead.

Pause/Play Button

Opt to show a Pause/Play button. It is recommended (but not required) that you opt to show the Pause/Play Button if you have selected Auto Play on Load.

Note: The Pause/Play control will work even if your slider is not set to Auto Play on Load.

Display Time

Set the number of seconds between slides when Auto Play is running.

Play Continually / Cycles

When Auto Play is running, you can choose to run continually or set a finite number of Cycles. If Play Continually is set, the system will ignore the number of Cycles set.

Pause on Mouse Over

With this option set, Auto Play will pause when you hover your mouse over the slider.

Stop on Action

With this option set, Auto Play will automatically stop if you take an action. Examples of actions would be if you click one of the arrows or a Paginator.

Paginator

A paginator can be displayed above or below the slider.

Color - Hover - Down

Set the default, hover, and down state colors for your paginator.

Color Scheme

Select a background color for the entire Info Slider.

Transparency

Selecting this option means that any background color you set (Global, Panels, and Arrows) will be slightly transparent. This can provide a nice effect. For instance, background images set on parent elements will peek through your Slider.

Arrows

Choose a background color for your arrows.

Padding

Set padding for the content inside your panels.

Tip: The default 30px is the sweet spot for ensuring that the arrow bar never obscures any of your panel content.

Borders

Set borders for the entire Info Slider.

Rounded

Set rounded corners for your Slider.

Transition Duration

Set the animation speed for your Slider. Higher numbers result in slower slides.

Root User Class

Set a custom class for your entire Slider.

UI Command Buttons

The right edge of the UI contains a set of command buttons. The button set will differ by one depending on whether the UI is open in Create or Modify Mode.

Create Mode Command Buttons

OK

Build the Slider

Cancel

Close the UI without adding a Slider to your page.

Help

Open this user guide.

Modify Mode Command Buttons

The Modify UI adds on additional button: Remove.

Remove

Click this button to remove the selected Slider. If this is the only Info Slider on your page, the links to the Slider CSS and script files will also be removed.

Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.