jQuery 如何使 Nivo Slider 响应

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13156708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:20:38  来源:igfitidea点击:

How to make Nivo Slider Responsive

jquerysliderresponsive-designnivo-slider

提问by Himanshu Jain

I am using NivoSlider in WordPress and implemented some responsive css to the theme, I have fixed the width & height of the images and background size in Nivo Slider also but its displaying correct size only once and afterwards its displaying big images in the slider.

我在 WordPress 中使用 NivoSlider 并为主题实现了一些响应式 css,我已经在 Nivo Slider 中固定了图像的宽度和高度以及背景大小,但它只显示一次正确的大小,然后在滑块中显示大图像。

Here is the link to the site : Website

这是该网站的链接:网站

Please let me know if I am missing something.

如果我遗漏了什么,请告诉我。

Regards

问候

回答by Daljit

It was officially announced by nivo slider that it is responsive, Here is announcement.

nivo slider 正式宣布它是响应式的,这是公告。

http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/

http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/

Demo :

演示:

http://nivo.dev7studios.com/responsive-demo/

http://nivo.dev7studios.com/responsive-demo/

回答by Pablo S G Pacheco

css

css

 #nivoSlider, #nivoSlider img{width:100%;height:auto !important}

HTML:

HTML:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="nivoSlider" class="nivoSlider">
       <img src="" />
    </div>
</div>