How to make nivo slider responsive ?

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

Then you are not setting width: 100% to all necessary parents.

P.S. Your avatar has bad contrast on white background. Don’t be surprised if threads started by you have a low reply rate – it’s just a usability issue, it’s not the thread title.

Enabled said

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.

Do you have a working example of this you can show? I don’t see how this is possible because Nivo applies the sliced up images as background images to different little chunks it breaks everything into for its transitions. So, with your method sure the slider would scale down, but it would just cut off all the images. Maybe I’m missing something?

Now I know this is not the Nivo slider, but a variation Kriesi has created himself, but his is responsive.

I gave you the code. It works for me. I used it for all my customers and my themeforest theme, and the theme i’m working now, and I’ve tested it extensively. Giving out the max-width property will lock it, weather JS wants it or not

templatesquare look at this topic a nice example that works http://demowp.templatesquare.com/sevenwonders/

Enabled said
I gave you the code. It works for me. I used it for all my customers and my themeforest theme, and the theme i’m working now, and I’ve tested it extensively. Giving out the max-width property will lock it, weather JS wants it or not

Nope, not buying it. Prove it w/one link.

jorgemartinez178 said
templatesquare look at this topic a nice example that works http://demowp.templatesquare.com/sevenwonders/

Look closer at the link you posted. When you shrink the window down to his tablet size and refresh the page, you will notice that it appears the slider has scaled down, but actually the right side of all the photos have just been cut off.

But the good news is one of the Nivo guys has said in their support forum that in their next big release they plan to make Nivo responsive (see here). And someone that works with these guys has also eluded to it on Twitter today. This is my juicy gossip column for the day.

haha .. O_o if you’re right does not work 100% and thanks for sharing the information.

but what comes out the update you can use this plugin very similar other http://jayis.net/thomas/cycle/

ThemeBlvd said

jorgemartinez178 said
templatesquare look at this topic a nice example that works http://demowp.templatesquare.com/sevenwonders/

Look closer at the link you posted. When you shrink the window down to his tablet size and refresh the page, you will notice that it appears the slider has scaled down, but actually the right side of all the photos have just been cut off.

But the good news is one of the Nivo guys has said in their support forum that in their next big release they plan to make Nivo responsive (see here). And someone that works with these guys has also eluded to it on Twitter today. This is my juicy gossip column for the day.