如何消除标题和图像滑块之间的间隙

这是一个简单的页面，我正在尝试开发。

我对html，css和jQuery完全陌生。

有一个标题菜单，下面是一个图像滑块，我使用一些 youtube 教程对其进行了编码。图像每 3 秒淡入和淡出一次。

我的标题广告滑块之间有间隙，我不知道如何摆脱它？ 当我尝试在body:after{ background-image:url(...)}中应用背景图像时，因为我希望图像具有不透明度，背景图像没有出现。

任何帮助将不胜感激，我也想知道我该怎么做

1. 在我的图像滑块上添加内容，例如图像上的描述或图像上的链接？
2. 将视频集成到我的滑块中，主要是从YouTube播放的视频？

这是JSfiddle： http://jsfiddle.net/vj1023/57aqkdg2/6/

.HTML

 <header class="mainHeader">

   <nav>
     <ul>
       <li><a href=" #">LIFE</a></li>
       <li><a href=" #">REVIEWS</a></li>
       <li><a href=" #">LISTS</a></li>
       <li><a href=" #">PHOTO-ESSAYS</a></li>
       <li><a href=" #">PARENT'S SPEAK</a></li>
       <li><a href=" #">AGONY AUNT</a></li> 
    </ul>

   </nav>
   <div class="sliderWrapper">
    <div id="slider">
      <Img id="1" src="http://v-pluse24.ru/wp-content/uploads/2014/10/1822-Soccer-Ball-www.WallpaperMotion.com_.jpg"> 
      <Img id="2" src="images/img2.jpg">
      <Img id="3" src="images/img3.jpg">
      <Img id="4" src="images/img4.jpg">
    </div>
  </div>  
 </header>

<script src="js/jQuery.js"></script>
<script src="js/slider.js"></script>  
</body>

.CSS

a
{
    text-shadow: 0px 4px 6px #000;
    color:white!important;
    text-decoration: none;
}
.mainHeader nav
{
    background: rgba(19, 17,17, 0.7);
    height: 40px;
    padding: 0px;
    margin: 0px;
}

.mainHeader nav
{
    background: rgba(19, 17,17, 0.7);
    height: 40px;
    padding: 0px;
    margin: 0px;
}


img
{
    margin: 0px;
}

.mainHeader nav ul
{
    float: right;
    list-style: none;
    margin: 0 ; 
}
.mainHeader nav ul li
{
    display: inline;
}
.mainHeader nav a
{
    color: #FFF;
    display: inline-block;
    padding: 10px 20px;
    height: 40px;
    text-shadow: 0px 1px 3px #FFF;
}

.body
{
    margin: 0 auto;
    clear: both;
}

 body:after 
   {
        content: "";
        background-color: white;
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment:fixed;
        background-size:cover;
        opacity: 0.6;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
       text-align: left;
    }

.sliderWrapper
{ 
  vertical-align: top; 
  padding: 0px;
  margin: 0px;
}
#slider
{
  vertical-align: top;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin: 0px;
}
#slider > Img
{
   width: 100%;
   height: 400px;
   float: left;
}

.sliderWrapper > a
{
   background-color:white;
   text-decoration: none;
   border-radius: 5px;
   position: absolute;
   top: 400px;
}

JavaScript/Jquery

sliderInt=1;
sliderNext=2;
$(document).ready(function(){
    $('#slider>img#1').fadeIn(100);
    startSlider();
});
function startSlider(){
    count= $("#slider>img").size();
    loop = setInterval(function(){
        if(sliderNext>count){
            sliderNext=1;
            sliderInt=1;
        }
        $("#slider>img").fadeOut(100);
        $("#slider>img#"+sliderNext).fadeIn(100);
        sliderInt=sliderNext;
        sliderNext = sliderNext+1;
    }, 2500);
}