1

我想用 nivo 滑块在图片的左侧显示不同的文本，让它像图片一样滑动。我尝试了不同的解决方案，但我无法将文本移到图片之外，因为当我向左侧添加负值时，我的标题消失了——它只是在图片上可见。所以问题是如何在图像之外设置标题的位置 - 这不是图像的一部分？我怎样才能做到这一点？也许 nivo 滑块不是正确的方法？

                          -----------------------------------------
                          |                                       |
                          |              image                    |
 -------------            |                                       |
 |  caption   |           |                                       |
 --------------           -----------------------------------------

感谢你的回答。到目前为止我有这个：HTML 

    <div id="feature-text-01" class="nivo-html-caption">
        <p><h2>Title 1</h2></p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
    <div id="feature-text-02" class="nivo-html-caption">
        <p><h2>Title 2</h2></p>
        <p>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
    </div>
    <div id="feature-text-03" class="nivo-html-caption">
        <p><h2>Title 3</h2></p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
    <div id="feature-text-04" class="nivo-html-caption">
        <p><h2>Title 4</h2></p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>

CSS

    .nivo-caption { 
        width: 200px; 
        height: 250px; 
        left: -200px; /* same as the width */
    }
4

5 回答 5

2

这是我的解决方案：

添加到您的滑块调用一个额外的参数

$('#Myslide').nivoSlider({
    manualCaption: true // Manual caption placement
});

将 HTML 代码放到您想要显示幻灯片标题的页面中

<div id="manual-nivo-caption" class="nivo-caption"></div>

将任何 CSS 添加到标题

#manual-nivo-caption{
    background: none;
    color: #000;
    position: relative;
    border: 1px solid #000;
}

在此之后，我们必须对jquery.nivo.slider.pack.js进行一些更改

第一步：将我们的新参数添加到滑块默认参数

e.fn.nivoSlider.defaults={ ... , manualCaption:false, ... }

第二步：在添加标题之前，检查我们的参数

代替

s.append(e('<div class="nivo-caption"></div>'));

和

if(!r.manualCaption){s.append(e('<div class="nivo-caption"></div>'));}

第三步：将标题搜索从父相关更改为全局（您将失去在页面上使用多个滑块的可能性，但一些简单的代码修改将解决这个问题。这对我来说并不重要。）

代替

var n=e(".nivo-caption",s);

和

var n=e(".nivo-caption");

这就是所有人。我希望它对你有用。

于 2013-12-16T06:01:45.927 回答
0

如果你删除

      overflow: hidden;

来自您的 CSS 中的 .nivoSlider {} 它应该可以工作。

于 2014-10-14T16:10:56.743 回答
0

您可以为标题添加一个正 z-index，然后标题不会消失在其他元素之后，而是会在所有内容之上。

我在 controlnav 上试过这个，效果很好，它也应该适用于标题。

于 2013-09-25T10:56:54.913 回答
0 
please find this css

.futurico-theme .nivo-caption
{
}

and remove 

margin-left:-50px
于 2013-09-25T18:48:08.360 回答
0

只需为这些样式定义标题属性

.nivo-caption {
      position: absolute;
      left: 700px;
      top: 150px; /* y offset position */
      overflow: hidden;
      background: none;
      font-family: Helvetica, Arial, Sans-Serif;
      color: #FFF;
      font-weight: bold;
      font-size: 40px;
      line-height: 44px;
      text-align: left;
      text-transform: uppercase; /* converts text to UPPERCASE */
      z-index: 8;
  }

  .nivo-caption a {
      display: inline !important;
  }

参考： NIVO 滑块：如何更改每张幻灯片的标题位置

于 2014-07-07T13:15:52.327 回答