1

我已经搜索并尝试了几种解决方案均无济于事。我目前正在使用 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; }

希望这是有道理的。

4

0 回答 0