Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

How to create a responsive slider in Dreamweaver

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

Video version (tutorial provided by Webucator):



Insert a jQuery Slider 2 into the page

In order to add a jQuery Slider 2 to a page, 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:

http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

1. Place the mouse cursor into the container where you want the slider to be added.

Add a responsive slider to your page in Dreamweaver

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

Insert Photo Gallery in Dreamweaver

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

- go to skin 4;

- click the “Customize this template” button to get to the editor and define the slider settings ;

Power Slider Editor in Dreamweaver

4. Choose the slider resize type.

You can choose from 2 types of responsivevess: Auto-Responsive or Media Queries .

- Auto-responsive:

Enable the “Auto” module from the top toolbar. This option resizes the slider proportionally with the screen size. It works automatically without any configuration.

This module works great for simple, quickly made sliders, and dynamically adjusts the slider’s width / height

accordingly to the display / device that views it.

- Media queries:

For greater customization and control, use media queries type.In this mode, you have complete control over the look and feel of your slider, for each target device : mobile , tablet, desktop. Complete control on every aspect , at breakpoint and slide element level.

It allows you to customize each slider component or element, on each device type.

Components and elements can also be made visible or hidden for each device type.

Select the Media Queries option.

Power Slider Editor in Dreamweaver - Choose Resize type

Change the Power Slider settings

Inside the Slider Editor sidebar you can define its settings.

1. Change the slider width

- select the slider container;

- set the slider width to 100%;

- also, set the slider type to full width;

Power Slider Editor in Dreamweaver - Change slider width

2. Remove the slider background in order to add a transparent color – so that the image with the green grass that is applied on the page background is visible under the slider.

- make sure to have the slider container selected;

- open the background panel;

- go to the image tab and remove the background image;

Power Slider Editor in Dreamweaver

3. Add a solid color and make it transparent.

Power Slider Editor in Dreamweaver

- make sure to have the slider container selected;

- from the background panel go to solid color;

- define the color – in this tutorial we had used black;

- set a lower alpha value (alpha is set in percents) – in this tutorial we had used 40%;

Here is how the slider will look like.

4. If you want to add a different background image to each slide, here is what you need to do:

- select the slide – make sure to see the Slide selected in the element top left breadcrumb;

- in the sidebar make sure to be inside the Element Settings panel;

- Open the Background tab and go to Image;

- By clicking the folder icon near the input you can browse for the image in your computer;

Power Slider Editor in Dreamweaver

To switch between slides, use the slides manager from the bottom of the editor.

jQuery Power Slider - Slides manager

Facebook comments:



Leave a Reply