Question

我是网络开发的新手。我只是尝试将Nivo滑块添加到我的内容中。我添加了。但问题是当我尝试将模板转移到mobile devices(320px)时，它不会工作背景图片得到了响应，但是滑块中的内容没有响应。我怎么来解决这个问题。我尝试了很多方法但是没有工作。这是我的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;
}

我想用这个内容回复滑块。无论如何都在那里。

谢谢你。

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

我找到了一个参考资料。以下是参考链接：Nivo Slider - Awesome jQuery Slider Plugin

如何使用内容响应Nivo滑块？

2 个答案: