如何响应带有内容的 Nivo 滑块？

Question

我是网络新手 development.I 刚刚尝试将 Nivo 滑块添加到我的 content.I 添加 that.But 问题是当我尝试将我的模板传输到 mobile devices(320px) 它不会工作 properly.The 背景图片有响应，但滑块中的内容不会 responsive.How 我来解决这个问题 problem.I 尝试了很多方法但不会 work.Here 是我的 Nivo 滑块 HTML 代码...

<section id="wrapper">
    <div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">     
    <img src="assets/img/01.jpg" data-thumb="assets/img/01.jpg" alt="" />    
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg" alt="" title="#htmlcaption1" />     
    <img src="assets/img/01.jpg" data-thumb="assets/img/01.jpg" alt="" />     
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg" alt="" title="#htmlcaption2" /> 
</div> 

<div id="htmlcaption1" class="nivo-html-caption responsive_slider">   
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis incidunt, iusto sit repellendus vel consequuntur, consequatur unde possimus sapiente expedita aut! Magnam necessitatibus corporis fugit impedit illum hic corrupti.
    </p>
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>         
</div>

<div id="htmlcaption2" class="nivo-html-caption responsive_slider">     
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis incidunt, iusto sit repellendus vel consequuntur, consequatur unde possimus sapiente expedita aut! Magnam necessitatibus corporis fugit impedit illum hic corrupti.
    </p>
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>         
</div>     
</div>
</section>

这是我的 CSS 代码...

.slider-wrapper { 
    width: 100%;    
    margin: 0 auto;    
}

.nivo-caption {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #fff;
  font-size: 22px;
  left: 50%;
  text-align: center;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 50%;
}



.slider_button_1 {
    color: #FFFFFF;     
    border-radius: 0;
    border: 1px solid #FFFFFF;
    padding: 10px 15px;
    text-transform: uppercase;    
}

.slider_button_1:hover {
    background: #0069A8;
}

无论如何，我想用 content.I 响应滑块。

在此致谢。

Answer 1

试试这个

CSS

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

HTML

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

参考：How to make Nivo Slider Responsive

Answer 2

我为您找到了一份参考资料。这是参考 link：Nivo Slider - Awesome jQuery Slider Plugin

如何响应带有内容的 Nivo 滑块？

How can to responsive Nivo slider with content ?

html

css

nivo-slider