Question

我搜索并尝试了几种解决方案无济于事。我目前正在使用jQuery 1.7.1和Nivo Slider 3.0.1。

您可以在http://www.wheelerbikeclub.net看到该网站（这是我去年创建的一个网站，我现在回到现在）。

我的主页上对我的nivo滑块的影响都没有效果。我知道他们去年有一点，但后来我改变了一些东西，现在他们没有改变，我无法回想起发生的事情。

我确保列/盒/切片的数量均匀划分我的图像。有谁知道问题是什么？它是否与我强行滑块覆盖整个屏幕这一事实有关？

感谢您的任何反馈，我非常感谢！

我在头部

中调用jQuery，然后调用NivoSlider脚本

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

然后在我的身体里放了一个包装纸

<div class="slider-wrapper theme-default"> 
        <div id="slider" class="nivoSlider">
                <img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
                <img src="img/new_slides/slide_2-4.png" alt="" />
                <img src="img/new_slides/slide_4.png" alt="" />
                <img src="img/new_slides/slide_3-1.png" alt="" />
        </div>
        <div id="slide_1-caption" class="nivo-html-caption">
                <a href="legacy"><strong>Find Out More</strong></a>. 
        </div>
</div>

有四个图像，我只是用图像一来测试标题。

在我的nivo-slider css中，我（不是全部，我认为问题可能在哪里）

.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    z-index:2;
}
.nivo-slice {
    display:block;
    position:absolute;
    z-index:100;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

在我的主要styles.css中我有

.slider-wrapper {  position:relative; 
                   top: 0px; 
                   left: 0px; 
                   width: 100%;
                   position:fixed; 
                   z-index:0; }

#slider-div { min-height: 100%;
              height: auto !important;
              height: 100%;
              margin: 0 auto -30px; }

希望这是有道理的。

Nivo滑块效果不起作用

0 个答案: