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.