如何使用轮播隐藏和显示背景图像？

我真的是j查询的新手。这可能会很尴尬，但是我很难找到如何使用完整背景图像创建滑块图像轮播的方法。我看过其他解决方案，但是似乎您必须将要滑动的所有图片的大小都固定为宽度（例如div宽度为9000px）。但是，我觉得我可以使用某种类型的数组或索引函数，在其中可以使用循环来迭代某些东西以隐藏和显示。从基本的javascript到jquery的过渡是我在调整时遇到的麻烦。如果有人可以给我一些建议或技巧，那将是很好的。这是我的下面的代码。谢谢

http://codepen.io/kevk87/pen/PPNPmg

    <main>

<div class="container">
<ul>  
  <li class="one"> 
  </li>
  <li class="two"> </li>
  <li class="three"></li>
  <li class="four"></li>
</ul>

  <div class="nav">
      <ul >
       <li class="first active"> </li>
      <li class="second"> </li>
       <li class="third"> </li>
      <li class="fourth"> </li>
      </ul>
  </div>
</div>
</ul>
</main>

的CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}



ul {
  list-style:none;
  height:100%;
}
main, html, body{
  height:100%;
}

.container {
  height:100%;
  postion:relative;

}

.one {  
   height:100%;   background:url(http://hamderser.dk/blog/images/clairvoyant/clairvoyant-nature-nature2.jpg) center center no-repeat fixed; 
   background-size:cover;

}  

.two {
  background: url(http://www.atilaminates.com/wp-content/uploads/2015/05/nature-wlk.jpeg) center center no-repeat fixed;
  height:100%; 
}
.three {
  background: url(http://php.drishinfo.com/photostudioone/wp-content/uploads/2014/11/nature-wallpaper-hd-1920x1080.jpg) center center no-repeat fixed;
  height:100%; 
}
.four {
  background: url(http://www.projecthappyhearts.com/wp-content/uploads/2015/04/green-nature-dual-monitor-other.jpg) center center no-repeat fixed;
  height:100%; 
}


.nav ul li {
  width:20px;
  background-color:white;
  height:20px;
  display:inline-block;
  margin-right:20px; 
}
.nav ul li:last-child {
  margin-right:0px;
}

.nav {
  position: absolute;
  bottom:100px;
  left:50%;
  transform:translate(-50%,-50%);
}

.nav ul .active{
  background-color:black;
}

.two, .three, .four {
  display:none;
}

Java脚本

//change active class

    $('.nav ul').click(function(){
  $(this).removeClass('active');  
    $(this).addClass('active');
});

//Click handlers to change image and active class


$('.first').click(function(){
    $('.one').show();
  $('.two').hide();
  $('.three').hide();
  $('.four').hide();
});


$('.second').click(function(){
    $('.two').show();
  $('.one').hide();
  $('.three').hide();
  $('.four').hide();
});

$('.third').click(function(){
    $('.three').show();
  $('.one').hide();
  $('.two').hide();
  $('.four').hide();
});

$('.fourth').click(function(){
    $('.four').show();
  $('.one').hide();
  $('.three').hide();
  $('.two').hide();
});