How to make nivo slider responsive ?

Hi all, How to make responsive website & nivo slider. I troubling to make responsive website so plz Help Me

nivo slider is working with background image so I guess it’s hard to make it responsive

Take a look at FlexSlider, super easy to implement: http://flex.madebymufffin.com/

Thanks for reply. But my another images also not show as responsive i’m using image css as

img { width:100%; display:block; height:auto;}

But my images is not resize according to page window width

39articles said
Thanks for reply. But my another images also not show as responsive i’m using image css as

img { width:100%; display:block; height:auto;}

But my images is not resize according to page window width

Nivo slider is not hard to make responsive at all. I used it in my mobile template and made it responsive simply by giving the main #slider id max-width:value px;

Works fine

Enabled said
Nivo slider is not hard to make responsive at all. I used it in my mobile template and made it responsive simply by giving the main #slider id max-width:value px; Works fine

Can you share an example of this? I’ve been trying but all I can get it to do is cover over the full size images.

Thanks!

- Ed

edcousins said

Enabled said
Nivo slider is not hard to make responsive at all. I used it in my mobile template and made it responsive simply by giving the main #slider id max-width:value px; Works fine

Can you share an example of this? I’ve been trying but all I can get it to do is cover over the full size images.

Thanks!

- Ed

Nivo slider has a main ID class called #slider, when downloading it as default from the website. Give that class a max-width:300px; value for example, and make it smaller and smaller for each resolution you target. It responds by re-sizing the image That’s the only example needed. If you use for example

@media screen and (max-width: 320px){
    #slider {
        position:relative;
        max-width:300px;
        max-height:100%;
        height:160px;
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
}

That for example is for a iPhone screen in portrait mode, and in the same CSS I also added.

@media screen and (min-width: 340px){    
    #slider {
        position:relative;
        max-width:460px;
        max-height:100%;
        height:160px; 
        margin-left:auto;
        margin-right:auto;
        overflow:hidden;
    }
}

And that’s added in the same CSS for making the nivo-slider resize to 460px, meaning, the iPhones landscape mode

Try it out! Just remember to give it a max-width not a width! Don’t ask me why, I tested this on several devices and noticed that sometimes width does not respond as it should.

Thanks Enabled!

Hey Enabled,

Thanks for sharing the code!

I can get it to work as I had before where the slider would resize fine, however the original slides still stay the same width / height, and therefore don’t resize with the slider. Is this what you see?

Thanks,

- Ed

edcousins said
Hey Enabled,

Thanks for sharing the code!

I can get it to work as I had before where the slider would resize fine, however the original slides still stay the same width / height, and therefore don’t resize with the slider. Is this what you see?

Thanks,

- Ed

No problem guys! Glad to have helped!

@edcousins

That is a bug that cannot be fixed. From what I’ve coded and used this code, it only happens for the first slide, meaning, I can see the background of the ” image to be ” but when the transition takes place, all other transitions behave normally afterwards, that happens because you force it to change width / height in the middle of a transition!