麻烦的CSS改变滑块上的开始位置

我对CSS和Javascript非常陌生，作为一个项目，我一直在研究一个滑块，它可以在两个方向上移动，水平和垂直。我把这个指南作为一个模型，并且有一些东西是非常有用的。

然而，我希望滑块"开始"不是在标准原点(即最左边和最上面的幻灯片)，而是在一个不同的，可定制的点-例如，大多数可用幻灯片的水平和垂直中心-我没有尝试帮助我做到这一点。我已经尝试了边距、位置和填充，但所有这些都只会把滑块弄得一团糟。有人知道如何改变在页面加载中显示的幻灯片吗?

这是我到目前为止的CSS:

    .testprojbody
        {
        background-color: black;
        padding: 0;
        overflow: hidden;
        }
    .slider-holder
        {
        width: 98%;
        height: 665px;
        border: 2px black solid;
        background-color: white;
        float: center;
        margin-left: 9px;
        }
    .slider
        {
        width: 987px;
        height: 610px;
        overflow: hidden;
        float:center;
        margin-top: 25px;
        border: 2px black solid;
        margin-left: 35px;
        }
    .holder
        {
        width: 200%;
        height: 200%;
        position: relative;
        }
    .slide
        {
        float: left;
        width: 987px;
        height: 610px;
        position: relative;
        }
    .slider-navright 
        {
          text-align: center;
          margin: 310px 0 0 1030px;
          position: absolute;
        }
    .slider-navright a {
          width: 0;
          height: 0;
          display: inline-block;
          overflow: hidden;
          text-indent: -9999px;
          border-top: 40px solid transparent;
          border-bottom: 40px solid transparent;
          border-left: 20px solid #999;
        }
    .slider-navleft {
          text-align: center;
          margin: 310px 0 0 12px;
          position: absolute;
        }
    .slider-navleft a {
          width: 0;
          height: 0;
          display: inline-block;
          overflow: hidden;
          text-indent: -9999px;
          border-top: 40px solid transparent;
          border-bottom: 40px solid transparent;
          border-right: 20px solid #999;
        }
    .slider-navtop {
          text-align: center;
          margin: 2px 0 0 501px;
          position: absolute;
        }
    .slider-navtop a {
          width: 0;
          height: 0;
          display: inline-block;
          overflow: hidden;
          text-indent: -9999px;
          border-left: 40px solid transparent;
          border-right: 40px solid transparent;
          border-bottom: 20px solid #999;
        }
    .slider-navbot {
          text-align: center;
          margin: 642px 0 0 501px;
          position: absolute;
        }
    .slider-navbot a {
          width: 0;
          height: 0;
          display: inline-block;
          overflow: hidden;
          text-indent: -9999px;
          border-left: 40px solid transparent;
          border-right: 40px solid transparent;
          border-top: 20px solid #999;
        }

这是Javascript，它允许nav &动画等:

<script type="text/javascript">
     var positionH = 0
     var positionV = 0
        $(document).ready(function(){
            var slider = {
  el: {
    slider: $("#slider"),
    allSlides: $(".slide"),
    sliderNavRight: $(".slider-navright"),
    sliderNavLeft: $(".slider-navleft"),
    sliderNavTop: $(".slider-navtop"),
    sliderNavBot: $(".slider-navbot"),
  },
  timing: 400,
  slideWidth: 987,
  slideHeight: 610,
  // In this simple example, might just move the
  // binding here to the init function
  init: function() {
    this.bindUIEvents();
  },
  bindUIEvents: function() {
    // nav code
    this.el.sliderNavRight.on("click", "a", function(event) {
      slider.handleNavRightClick(event, this);
    });
    this.el.sliderNavLeft.on("click", "a", function(event) {
      slider.handleNavLeftClick(event, this);
    });
    this.el.sliderNavTop.on("click", "a", function(event) {
      slider.handleNavTopClick(event, this);
    });
    this.el.sliderNavBot.on("click", "a", function(event) {
      slider.handleNavBotClick(event, this);
    });
  },

  handleNavRightClick: function(event, el) {
    positionH+=1;
    event.preventDefault();
    this.el.slider.animate({
      scrollLeft: this.slideWidth * positionH
    }, this.timing);
  },
  handleNavLeftClick: function(event, el) {
    positionH-=1;
    event.preventDefault();
    this.el.slider.animate({
      scrollLeft: this.slideWidth * positionH
    }, this.timing);
  },
  handleNavTopClick: function(event, el) {
    event.preventDefault();
    positionV--;
    this.el.slider.animate({
      scrollTop: this.slideHeight * positionV
    }, this.timing);
  },
  handleNavBotClick: function(event, el) {
    event.preventDefault();
    positionV++;
    this.el.slider.animate({
      scrollTop: this.slideHeight * positionV
    }, this.timing);
  }, 
};
slider.init();});
    </script>
  <script type="text/javascript">
//arrow functions
$(document.documentElement).keydown(function(event){
  if (event.keyCode == 39){
    //go right
    event.preventDefault();
    $('.slider-navright a')
      .click();
  } else if (event.keyCode == 37){
    //go left
    event.preventDefault();
    $('.slider-navleft a')
      .click();
  } else if (event.keyCode == 38){
    //go up
    event.preventDefault();
    $('.slider-navtop a')
      .click();
  } else if (event.keyCode == 40){
    //go down
    event.preventDefault();
    $('.slider-navbot a')
      .click();
  }
});
// makes slider unselectable AND makes arrow nav work better
$(".slider").disableSelection();
  </script>

，这里是相关的HTML:

<body class="testprojbody">
  <div class="slider-holder">
    <div class="slider" id="slider">
        <div class="holder">
            <div class="slide" id="slide-x0y0"></div>
            <div class="slide" id="slide-x1y0"></div>
            <div class="slide" id="slide-x0yA"></div>
        <div class="slide" id="slide-x0y0"></div>
        </div>
    </div>
    <nav class="slider-navright">
      <a href="#">Move Right</a>
    </nav>
  <nav class="slider-navleft">
    <a href="#">Move Left</a>
  </nav>
  <nav class="slider-navtop">
    <a href="#">Move Up</a>
  </nav>
  <nav class="slider-navbot">
    <a href="#">Move Down</a>
  </nav>
 </div>
</body>
</html>

希望这是可以理解的，正如我所说，我是非常新的(只拿起javascript大约两个星期前，和html可能一个半月前)，所以我确信这是非常草率，迂回的代码。不过，如果有人能帮忙，我将不胜感激!

谢谢。