Question

我想在带有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 */
    }

Answer 1

这是我的解决方案：

在滑块中添加一个额外的参数

$('#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进行一些更改

第1步：添加到滑块dafault params我们的新参数

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>'));}

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

替换

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

与

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

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

Answer 2

您可以在标题中添加正z-index，然后标题不会在其他元素后面消失，但会在所有内容之上。

我尝试了这个控制器并且它工作得很完美，它也适用于标题。

Answer 3

please find this css

.futurico-theme .nivo-caption
{
}

and remove 

margin-left:-50px

Answer 4

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

.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;
  }

Refrence： NIVO SLIDER: HOW TO CHANGE THE CAPTION POSITION FOR EACH SLIDE

Answer 5

如果删除

      overflow: hidden;

来自CSS中的.nivoSlider {}它应该有效。

图片外的nivo滑块标题

5 个答案:

这是我的解决方案：