I have added he Parallax Slider to a HTML page. When I change the width to a percentage nothing shows in a browser but the navigation.

Since this is HTML5 I assumed percentages would work to facilitate responsive design. Is there any way this can be done?

Hello Robin.

This week we will provide you with video tutorial how you can make responsive HTML5 Parallax Slider.

Regards:Vulcho.

Excellent, thank you.

Awsome Im stuck with this too :-)

Hello all.

You can style responsive the parallax slider in the following way:

1.You need to create 3 sliders with the elements for 3 different resolutions.
The IDs that i will use in my example are:
dmxParallaxSlider1 - with width:480px
dmxParallaxSlider2 - with width:768px
dmxParallaxSlider3 - with width:1232px

After that in your responsive stylesheet you need to add the following media queries to prevent from DOM loading the desired element :

/* Mobile Layout: 480px and below. */
@media only screen and (max-device-width: 480px) {

#dmxParallaxSlider2 {
    display:none;
}

#dmxParallaxSlider3 {
    display:none;
}
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

#dmxParallaxSlider1 {
    display:none;
}

#dmxParallaxSlider3 {
    display:none;
}
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {


#dmxParallaxSlider1 {
    display:none;
}

#dmxParallaxSlider2 {
    display:none;
}
}

This reply was removed on 1/21/2013 1:38:05 PM.
See the changelog

I'm struggling with this one :-(
I seem to have done as suggested and its not working...
HELP!!
Should I start my own thread so as not to hijack this one?

I've been working with this and almost have it.

Had to add the viewport meta tag to head.
<meta name="viewport" content="width=device-width">

The first media call had to be changed by removing 'device'
@media only screen and (max-width: 480px)

I could only see the larger dmxParallaxSlider3 if i added the following style

@media only screen and (min-width: 769px) {
#dmxParallaxSlider3 {
display: block;
}
{

Without it no show in any browser or DW

Now, even though the other sliders are off, i can still see the navigation for each on the page.

I have tried various styles to turn them off but none work.

#dmxParallaxSlider1 .dmxParallaxSlider-default .dmxParallaxSliderControlNav {
display:none;
}
#dmxParallaxSlider2 .dmxParallaxSliderControlNav {
display:none;
} etc. do not work.

Any solution to turning off the other navs on the page?

Hey robin, when I try your solution mine is the same with the navigation icons but I also seem to loose the Tab view :-(

Hello Robin, Les,

What i can recommend is to:

Wrap your sliders inside Divs wit IDs like: #phone, #tablet, #desktop
So instead of applying the display:none to dmxParallaxSlider1, dmxParallaxSlider2, dmxParallaxSlider3.. like Vulcho suggested, you just need to apply it to the #phone, #tablet, #desktop as needed.

This reply was removed on 1/22/2013 1:53:42 AM.
See the changelog

This reply was removed on 1/22/2013 12:00:50 AM.
See the changelog

Thanks Teodor,

Wrapping each in its own div works.
Still have to add display: block or inline to desktop div but it works fine.

Thanks for your help.

Mine seems fine now to Thanks :-)

Is it possible to see an example page of a responsive ParallaxSlider. Thanks

I have and example of a responsive ParallaxSlider here: www.imthewebguy.com/assets/samples/Parallax-Slider-dark.asp

Thanks. It seems great!

Has a video been posted for doing a responsive layout yet? I see one was offered 5 months ago in a reply but dont see it in the video section? Thanks!