Question

由于某些我无法看到的原因，我在同一页面上有两个不起作用的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 Slider 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 Slider 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>

Answer 1

这里有一些问题。

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

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

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

Answer 2

请更改其中一个滑块的<div id="wrapper">，然后选中。

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

同一页面上的2个Nivo滑块无法正常工作

2 个答案: