Trouble with the CSS to change start position on a slider

Question

I'm very new to CSS and Javascript, and as a sort of project have been working on a slider that moves in two directions, both horizontally and vertically. I've used this guide as a model, and have something that is mostly serviceable.

However, I'd like for the slider to 'begin' not at the standard point of origin (that is, the left-most and upper-most slide) but at a different, customizable point--for instance, the horizontal and vertical centermost of the available slides--and nothing I try helps me to do this. I've played around with margins, positions and padding, but everything only messes the slider up. Does anyone have an idea for how I can change the slide that is showing on pageload?

Here's the CSS that I have so far:

    .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;
        }

Here's the Javascript, which allows for nav & animation and so on:

<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>

and here's the relevant 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>

Hope this is comprehensible, as I said, I'm very new (only picked up javascript about two weeks ago, and html maybe a month and a half ago), so I'm sure this is very sloppy, roundabout code. Still, if anyone could help, it would be much appreciated!

Thanks.

Answer 1

Looks like the first lines on your JavaScript could be what you're looking for.

Have you tried changing the values of

var positionH = 0
var positionV = 0

to the positions you want?

EDIT

Okay so following on you can use those variables you'll just need to add a little more code to your init method...

init: function() {
    this.bindUIEvents();
    this.el.slider.scrollLeft(positionH);
    this.el.slider.scrollTop(positionV);
}

Then change the positionH and positionV variables.