如何用内容响应 Nivo 滑块？

Posted 2023-05-07

【中文标题】如何用内容响应 Nivo 滑块？

【英文标题】：How can to responsive Nivo slider with content ?

【发布时间】：2018-06-08 16:50:43

【问题描述】：

我是 web 开发的新手。我只是尝试将 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"  />    
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg"  title="#htmlcaption1" />     
    <img src="assets/img/01.jpg" data-thumb="assets/img/01.jpg"  />     
    <img src="assets/img/02.jpg" data-thumb="assets/img/02.jpg"  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;

我想用那个内容来响应滑块。无论如何。

从这里谢谢。

【参考方案1】：

试试这个

CSS

#nivoSlider, #nivoSlider imgwidth: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

【讨论】：

但问题是我应该在功能区类中输入什么。请解释一下。如果你能给出孔标记

你能在jsbin或jsfiddle中添加demo吗，我帮你整合一下

【参考方案2】：

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

【讨论】：

我之前看到了。滑块是响应式的。但是想用内容响应滑块。