Creating a Responsive Parallax Slider 2

Before you start

We created our page layout, using DMXzone Bootstrap 3. In the top section of the page we've inserted a container with a cell, which is 12 columns wide. The active view is set to Large Devices.

Insert HTML5 Parallax Slider 2

Open the insert menu (1) and click HTML5 Parallax Slider 2 icon (2).

Open the property inspector

In order to get access to HTML5 Parallax Slider 2 options, click on its label and they will appear in the property inspector.

Change the default size

Here, we can change the default width and height of the slider. For large devices, a width of 1128 pixels should be just fine.

Slides options

There are 2 default slides inside the slider. You can edit or remove any of them. Also you can import new slides from folder.

Customize the slides

Let's add a background image for our first slide. Click the add new image button (1). Our images have been edited and resized in Photoshop, so we turned off the resize images option but you can use it any time. Select the slide background image (2) and click the OK button (3).

Change the default slide emelent content

In order to do that, select the content (1) and from the property inspector choose Heading 2 (2).

Customize the element

You can drag the slide element to a specific position, or you can select it (1) in order to edit its properties. Below you can set its size and position manually (2). The higher the Z-index, the more the element is on the foreground and the faster it slides. The lower the Z-index , the more the element is on the background and the slower it goes.

Add background color

In order to set a background color for the element, click the icon (1). Switch to RGBa and set a semi-transparent white background (2).

Adjust the transitions

You can adjust the transition settings of the parallax element. We leave these settings to their default values.

Choose a design and direction

Let's go back to the HTML5 Parallax Slider 2 general settings. Select a direction (1) for the slides. We choose horizontal. And choose one of the predefined designs (2). Our choice is the fancy one.

Set duration and time transition

Set the duration (1) for each slide before going to the next one and set the time transition (2) between the slides change.

Slider controls

Choose how your slides will be controlled allow keyboard navigation, put auto play, pause on hover and more.

Add additional elements

You can add as many parallax elements (1) in a single slide as you need. Setup the rest of your slides (2), when you are done with the first one.

Customize the slider for the different devices

Now, let's switch to Bootstrap 3 Grid inspector (1) and change the active view to - medium devices (2). Then select the parallax slider (1), that we've just created for large devices and from the display dropdown, select hidden (3). This will hide the HTML5 Parallax Slider 2 that we've setup for large devices, when the page is displayed on medium devices.

Add Parallax Slider for the different devices

Now, add a new parallax slider for medium devices, set it up and hide it on large, small and extra small devices. We do the same for each of the screen sizes, that we want to display the parallax slider on. That's how easy it is to setup and use HTML5 Parallax Slider 2 on responsive, Bootstrap 3 based pages.