Firstly, I am a JS cut and paste hack artist. So I'm sure
this could be better.
Second, I haven't figured out how to make sliding panels one
continuous loop. That would be nice eh? But I do have the buttons
link back to the first panel at the end.
Here is the page:
www.goehnergroup.com/gg/
There are several mods to sliding panels here:
1. Two panels are being controlled by the same button. I had
to create a new function to fire both at the same time.
2. The animation is a custom sequence
3. It is set to slide automatically after 5 seconds (in case
a user missed the arrows).
4. And it goes back to the first panel at the end.
The code below just does #4. If you're interested in the
other things, check the source on the link above.
NOTE: this code assumes that the slider in question is called
sp2 (I used example 2). You'd need to change all references in the
following code from sp2 to whatever you called it.
Here is what the javascript looks like (drop inside the head
tags of your html):
<script type="text/javascript">
function moveNext(){
var idx = sp2.getContentPanelIndex(sp2.currentPanel);
var maxPanels = sp2.getContentPanels().length - 1;
if (maxPanels == idx)
{
sp2.showFirstPanel();
}
else
{
sp2.showNextPanel();
}
}
function movePrev(){
var idx = sp2.getContentPanelIndex(sp2.currentPanel);
if (0 == idx)
{
sp2.showLastPanel();
}
else
{
sp2.showPreviousPanel();
}
}
</script>
Here is what the nav links look like (drop into the html):
<a href="#" onclick="moveNext();">Next</a>
<a href="#" onclick="movePrev();">Prev</a>
