同一页面上的 2 个 Nivo 滑块不起作用答案

【问题标题】：2 Nivo Sliders on same page not working同一页面上的 2 个 Nivo 滑块不起作用
【发布时间】：2014-03-10 09:32:37
【问题描述】：

由于某种我看不到的原因，我在同一页面上有两个不起作用的 nivo 滑块。非常感谢帮助。下面是我正在改编的众所周知的 Nivo Slider 代码。

标题

 <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Nivo 滑块 1

<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
           <img src="images/up.jpg" data-thumb="images/up.jpg" alt=""/>
            <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt=""/>
            <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt=""/>
        </div>

    </div>

</div>

Nivo 滑块 2

<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider2">
<em><img src="images/up2.jpg" data-thumb="images/toystory2.jpg" alt="" title="Hello, My name is Daisy and I am a mobile beauty specialist covering the Cambridge area." data-transition="fade" />
<img src="images/walle2.jpg" data-thumb="images/up2.jpg" alt="" title="My clients know that when they come to me, they will get the service and the look that they want. I really can help you be that face that gets noticed in the crowd." data-transition="fade" />
<img src="images/nemo2.jpg" data-thumb="images/walle2.jpg" alt="" title="However I am not just a specialist in applying make-up, I offer luxury manicures and pedicures, Sienna X spray tanning, massages and a lot mot" data-transition="fade" />
<img src="images/toystory2.png" data-thumb="images/nemo2.jpg" alt="" title="This is an example of a caption" data-transition="fade" />
        </em></div>
</div>

</div>

JavaScript

<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({pauseTime:10000});
    $('#slider2').nivoSlider({pauseTime:5000});
    effect:'fade'
});
</script>

【问题讨论】：

我不知道 NIVO 是什么，但是有两个 ID 相同的元素是错误的id="wrapper"。
为什么第二个滑块中的所有图像都包含在em 标签中？此外，您的效果语法不正确。您可能会收到 Javascript 错误。检查您的控制台。

标签： javascript jquery css nivo-slider

【解决方案1】：

这里有几个问题。

您有重复的 ID。我怀疑这是问题所在，但这是不好的做法。
您在第二个滑块中的图像周围有<em> 标签。

最后，您错误地指定了 effect 参数 - 这很可能是问题的原因

$(window).load(function() {
    $('#slider').nivoSlider({pauseTime:10000});
    $('#slider2').nivoSlider({
        pauseTime:5000,
        effect:'fade'
    });
});

【讨论】：

【解决方案2】：

请将<div id="wrapper"> 更改为其中一个滑块，然后检查。

注意：任何时候你都不应该为两个 div（不仅是 div）使用相同的 id。

【讨论】：