jQuery Raw Panel Slider
by nickadeemus2002
HTML
<ul class="myclass">
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/01.jpg" alt="Css Template Preview" />1</li>
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/02.jpg" alt="Css Template Preview" />2</li>
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/03.jpg" alt="Css Template Preview" />3</li>
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/04.jpg" alt="Css Template Preview" />4</li>
</ul>
<br><br>
<a href="#" class="mylink">Next</a><br>
<a href="#" class="mylink2">pre</a>
<ul class="myclass2">
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/01.jpg" alt="Css Template Preview" />1</li>
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/02.jpg" alt="Css Template Preview" />2</li>
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/03.jpg" alt="Css Template Preview" />3</li>
<li><img src="http://cssglobe.com/lab/easyslider1.5/images/04.jpg" alt="Css Template Preview" />4</li>
</ul>
<br><br>
<a href="#" class="mylink3">Next</a><br>
<a href="#" class="mylink4">pre</a>
JavaScript
$(".myclass li").hide();
$(".myclass li:first-child").show();
var total = $(".myclass li").size();
var count = 1;
$(".mylink").click(function() {
$(".myclass li:nth-child(" + count + ")").hide();
count++;
if (count == total + 1) {
count = 1;
}
$(".myclass li:nth-child(" + count + ")").show();
return false;
});
$(".mylink2").click(function() {
$(".myclass li:nth-child(" + count + ")").hide();
count--;
if (count === 0) {
count = total;
}
$(".myclass li:nth-child(" + count + ")").show();
return false;
});
//-------------------second one
$(".myclass2 li").hide();
$(".myclass2 li:first-child").show();
var total2 = $(".myclass2 li").size();
var count2 = 1;
$(".mylink3").click(function() {
$(".myclass2 li:nth-child(" + count2 + ")").hide();
count2++;
if (count2 == total2 + 1) {
count2 = 1;
}
$(".myclass2 li:nth-child(" + count2 + ")").show();
return false;
});
$(".mylink4").click(function() {
$(".myclass2 li:nth-child(" + count2 + ")").hide();
count2--;
if (count2 === 0) {
count2 = total2;
}
$(".myclass2 li:nth-child(" + count2 + ")").show();
return false;
});