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 :slight_smile:

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 :slight_smile:

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 :slight_smile:

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 :slight_smile: 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 :wink:

Try it out! :slight_smile: 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!

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. :slight_smile:

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 :slight_smile: 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 :wink:

Try it out! :slight_smile: 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.

http://www.kriesi.at/themes/propulsion/

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 :smiley:

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 :smiley:

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

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. :wink:

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. :wink:

Solution in page: http://danielmhd.com.br/blog/blog-e-dicas/como-deixar-o-slideshow-padrao-opencart-responsivo/