不能让Nivo滑块工作

我想在此页面上集成nivo滑块Link幻灯片应该放到页面顶部的屏幕上。目前我很难将滑块图像放入屏幕图像中。不能让Nivo滑块工作

HTML：

<div class="top" > 
<img src="screen.png" style="margin-top: 0px; margin-bottom: 10px; " /> 
     <div class="slider"> 
      <img src="slide-1.png" alt="" /> 
      <img src="slide-2.png" alt="" /> 
      <img src="slide-3.png" alt="" /> 
    </div>    
</div>

CSS：

#content { height: 800px; width: 1000px; float: left; display: block; margin-top: 20px; } 
#content .top { width: 1000px; height: 300px; display: block; float: left; position: relative; margin-left: 20px; margin-top: 20px; } 
#content .text3 { width: 200px; display: inline-block; margin-left: 20px; } 
#content .text4 { width: 300px; height: 90px;margin-bottom: 10px; } 
#content .face { width: 300px; height: 300px; display: block; float: left; position: relative; margin-top: 20px; } 
#content .bottom { width: 1000px; height: 400px; display: block; float: left; position: relative; margin-left: 0px; margin-top: 45px; } 
#content .box1 { width: 236px; height: 350px; background:url(box1.png) no-repeat; display: block; float: left; position: relative; margin-left: 0px; margin-top: 20px; } 
#content .box2 { width: 236px; height: 350px; background:url(box2.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; } 
#content .box3 { width: 236px; height: 350px; background:url(box3.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; } 
#content .box4 { width: 236px; height: 350px; background:url(box4.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; } 
#content .slider { width: 360px; height: 235px; margin-left: 60px; margin-top: 40px; overflow: hidden; }

这里是我的全部代码：

HTML：Link

CSS：Link

应该如何让nivo滑块正常运行？

我用Javascript和CSS从这个网站Link

来源

2013-07-22 Daniel Hernandez

哪里JS参考？ – feitla

我发布了我使用的Javascript的链接 –

您正在初始化#slider的标题，但div是class="slider“将其更改为ID或将ID切换到适当位置类

/** ** EDITED/

改变你的CSS这样的：

#content .slider { 
width: 350px; 
height: 235px; 
margin-left: 60px; 
margin-top: 40px; 
overflow: hidden; 
position: absolute; 
top: 12px; 
right: 133px; 
}

来源

2013-07-22 18:23:03 feitla

现在我将它改为一个类，但是我无法将滑块移到图像上的屏幕上。 –

可以用Z-index来完成吗？ –

不，这是您的定位 – feitla

你是ID在JS调用NIVO滑块和而您只使用CSS类存在于HTML 使用这种

$(window).load(function() { 
       $('.slider').nivoSlider({ 
         effect: 'random', // Specify sets like: 'fold,fade,sliceDown' 
         animSpeed: 500, // Slide transition speed 
         pauseTime: 6000, // How long each slide will show 
         startSlide: 0, // Set starting Slide (0 index) 
         controlNav: true, // 1,2,3... navigation 
         directionNav: false, // Next & Prev navigation 
         pauseOnHover: true // Stop animation while hovering 
       }); 
     });

或wrapp一个名为滑块周围的滑块类

来源

2013-07-22 18:22:51 Hushme

现在我将它更改为一个类，但是我无法将滑块移到图像上的屏幕上。 –

可以用Z-index来完成吗？ –

其工作表在那里 – Hushme

不能让Nivo滑块工作

回答

相关问题