Back to Top
The nuts and bolts for
Creative web development

HTML5 Parallax Slider Features Unveiled

“Check our what you can do with our upcoming extension”

As we promised last Thursday, now is the time to show you what our developers packed in this awesome Dreamweaver extension - the HTML5 Parallax Slider. Choose one of the 7 predefined design or customize them through the CSS, add any content inside your slides - from simple text and images, to URLs and HTML tags. To help you organize your galleries, we added our DMXzone Image Resizer, so all your images will be one size. Set the direction and slide duration, add multiple elements in every slide and much more. Below you can read the full list.

The Story

  • Present your content in amazing Parallax slides - Create stunning presentations and organize your content slide by slide.

  • Awesome 3D illusion effect - Add multiple elements in every slide and create a 3D feeling for your customers.

  • Add any content - In your slide you can add whatever you want - images, text, video, HTML tags, URLs and more.

  • Full touch devices support - You can slide by swiping with your finger touch when using a mobile device.
  • Full visual drag & drop design in Dreamweaver - Simply hover over the container, click and drag it in order to move it.

  • Customize your slides - You can add and remove slides, set the starting slide and rearrange the order. Adding and deleting images takes only a second or you can just import a whole folder. It has integrated DMXzone Image Resizer to help you with your images.
 
 
 
  • 7 Amazing designs - Choose one of 7 stunning designs which are CSS based, so if you need you can customize them to meet your needs.
 
    • Default
 
    • Dark
 
    • Ebony
 
    • Fancy
 
    • Fresh
 
    • Light
 
    • Nice
 
 
  • Set direction - Choose how you slides slide - horizontally or vertically.
 
  • Slide duration - Set the duration for each slide before going to the next one.
 
 
  • Effect duration - Use this option to set the time transition between the slides change.
 
 
  • Control the slides - Choose how your slides will be controlled - allow keyboard navigation, put auto play, pause on hover and more.
 
 
  • Add Elements - In every slide you can add as much elements as you want. Inside every div container you can use any content - images, video, text, HTML tags, URLs and more.
 
    • Z-Index - Arrange the appearance of your elements in the current slide. For example Element with Z-index 1 will be shown before Element with Z-index 10.
 
    • Speed - Set the time when your element will show on  the slide. For example if you put 2000ms the element will appear 2000ms after the Slide comes on screen.
 
    • Add images - Add images to the element.
 
    • Background color - Choose a background color for your element.
 
    • Transitions - Control the appearance and the outgoing for each element in your slide.
 
    • Set size - Set the size for the div element.
 
    • Position - Set the position for the element in the slide by entering values or just drag the container.
 
    • Element ID - Pick up a name for your div.
 
    • Full support for the DMXzone Behavior Connector - Bind your elements with other DMXzone extensions to trigger on show/hide element.
 
 
  • Container size - Set the dimensions for the slides.
 
 
  • ID name - Set the ID for your slider.
 
  • Full support for the DMXzone Behavior Connector - Set slide change to be a trigger and attach other DMXzone extensions.
 
  • Fully controllable by behaviors - Set different elements to control the Parallax slider with one of these actions - Go to next, play, stop, go to previous and jump to slide.
 
 
  • Great Dreamweaver design preview - You can preview your parallax slider directly in Dreamweaver and see how it looks.
 

Share this Article