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.
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.
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.
As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...
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.
Switch to the PVII category. Info Slider is the last one in the screen capture below
Switch to the PVII category. Info Slider is the last one in the screen capture below
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.
The Info Slider interface makes customizing your panels easy!
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:
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.
Adds a new panel below the one that is selected
Deletes the selected panel.
Moves the selected panel up in the listing.
Moves the selected panel down in the listing.
Each panel item has several available settings.
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.
Set the alignment of the content in your panels. Click the All button to affect all panels in the Panel List.
Align your panel content to vertical center. Click the All button to affect all panels in the Panel List.
Select an optional background color for your panel. Click the All button to assign the color to all panels in the Panel List.
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.
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 are used to style or configure the overall Info Slider widget, as opposed to the individual panels within.
Set any panel to be the first one when the page loads.
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.
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.
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.
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.
Set the number of seconds between slides when Auto Play is running.
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.
With this option set, Auto Play will pause when you hover your mouse over the slider.
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.
A paginator can be displayed above or below the slider.
Set the default, hover, and down state colors for your paginator.
Select a background color for the entire Info Slider.
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.
Choose a background color for your arrows.
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.
Set borders for the entire Info Slider.
Set rounded corners for your Slider.
Set the animation speed for your Slider. Higher numbers result in slower slides.
Set a custom class for your entire Slider.
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.
Build the Slider
Close the UI without adding a Slider to your page.
Open this user guide.
The Modify UI adds on additional button: 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.
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.
PVII maintains a Web Forum community. Go Direct to the Web Forum
E-Mail: support@projectseven.com
Phone: (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.