Image Slider (right alternate)
Basic jQuery image slider, slides out right instead of left. Alternate animation, images always come in from left, even when resetting to beginning of slider.
HTML
<div id="slider">
<div id="slider_pane">
<div id="slide_page_3" class="slider_page">
slide 4
</div>
<div id="slide_page_2" class="slider_page">
slide 3
</div>
<div id="slide_page_1" class="slider_page">
slide 2
</div>
<div id="slide_page_0" class="slider_page current">
slide 1
</div>
</div>
<div id="slider_steps">
<img id="slider_pause" src="http://images.hayneedle.com/shared/images/HN_BP_T3_Pause.png" height="20" width="20">
<img id="slider_play" src="http://images.hayneedle.com/shared/images/HN_BP_T3_Play.png" height="20" width="20">
<div id="slider_step_0" class="slider_step slider_stepa">1</div>
<div id="slider_step_1" class="slider_step">2</div>
<div id="slider_step_2" class="slider_step">3</div>
<div id="slider_step_3" class="slider_step">4</div>
</div>
</div>
CSS
#slider {
float:left;
position:absolute;
overflow:hidden;
width: 780px; /*width of one slide*/
height: 376px; /*height of one slide*/
}
#slider_steps {
float: left;
z-index: 2;
position: absolute;
bottom: 0;
right: 0;
color: white;
padding: 7px 10px 7px 10px;
text-align: center;
font-size: 11px;
background: rgba(0,0,0,0.6);
}
#slider_pane {
position: relative;
float: left;
top: 0;
right: 0;
margin-top: 5px;
width: 780px;
}
.slider_page {
float: left;
position: absolute;
left: -780px;
width: 780px; /*slide width*/
height: 376px; /*slide height*/
background: blue;
z-index: 2;
}
.slider_page.current {
left: 0;
}
#slider_pause, #slider_play {
float: left;
border: 1px solid white;
cursor: pointer;
}
#slider_play {
display: none;
}
.slider_step {
float: left;
margin-left: 5px;
border: 1px solid white;
width: 20px;
height: 17px;
padding-top: 3px;
cursor: pointer;
}
.slider_stepa {
background: white;
color: black;
}
JavaScript
if ($("#slider")) {
var Slider_Timer;
var Slider = function(pcount, count) {
if ($("#slider").data("an") != "true") {
$("#slider").data("an", "true");
clearTimeout(Slider_Timer);
$("#slider_step_" + pcount).removeClass("slider_stepa");
$("#slider_step_" + count).addClass("slider_stepa");
var next = count * 1 + 1;
$("#slide_page_" + pcount).animate({
left: "780px"
}, 750, function() {
$(this).css({
"left": "-780px"
}).removeClass('current');
});
$("#slide_page_" + count).animate({
left: "0px"
}, 750, function() {
$(this).addClass('current');
$("#slider").data("an", "false");
Slider_Timer = setTimeout(function() {
if ($("#slider").data("pause") != "true") {
if ($("#slider_steps .slider_step").length - 1 == count) {
Slider(count, 0);
}
else {
Slider(count, count * 1 + 1);
}
}
}, 5000);
});
}
};
Slider_Timer = setTimeout(function() {
Slider(0, 1);
}, 3000);
$("#slider_steps .slider_step").click(function() {
if ($(this).hasClass("slider_stepa") === false) {
var count = $("#slider_steps .slider_stepa").attr("id").split("_")[2] * 1;
var thisID = $(this).attr("id").split("_")[2];
Slider(count, thisID);
$("#slider_pause").hide();
$("#slider_play").show();
$("#slider").data("pause", "true");
}
return false;
});
$("#slider_pause").click(function() {
$(this).hide();
$("#slider_play").show();
$("#slider").data("pause",...