图片外的 nivo 滑块标题答案

【问题标题】：nivo slider caption outside the picture图片外的 nivo 滑块标题
【发布时间】：2013-09-25 10:43:06
【问题描述】：

我想用 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 */
    }

【问题讨论】：

你能提供我使用它的链接吗
您好，您可以在这里找到页面link。我想要左边的标题，现在是其他文本。最终目标是一起实现幻灯片文本和图片，并在底部有项目符号导航。如果您知道任何其他解决方案，我将不胜感激。谢谢！
你的标题被剪掉了，你想修复它吗
图片中的标题
是的，我想像上面画的那样解决这个问题。我希望标题位于现在左侧文本不在图片上方而是在图片外部的位置。

标签： jquery html css nivo-slider

【解决方案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

进行一些更改

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

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");

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

不幸的是，它不适用于字幕。我添加了 z-index 并且仍然是相同的（z-index: 80;）。左侧的标题被切断。它可以在图像上看到。
在这里你可以看到我的结果link。我希望标题位于左侧当前文本的位置。

【解决方案3】：

please find this css

.futurico-theme .nivo-caption
{
}

and remove 

margin-left:-50px

【讨论】：

【解决方案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;
  }

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

【讨论】：

【解决方案5】：

如果你删除

      overflow: hidden;

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

【讨论】：