jquery - 图片外的 nivo slider 标题

Question

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

                          -----------------------------------------
                          |                                       |
                          |              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

这是我的解决方案:

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

$('#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

进行一些更改

第一步:将我们的新参数添加到 slider 默认参数

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 步:将标题搜索从父级相关更改为全局(您将失去在页面上使用多个 slider 的可能性，但一些简单的代码修改将解决这个问题。这对我来说并不重要。)

替换

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

与

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

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