Hi there
I want to make a slider using jquery & java script.
my problem is that I don't know how to add timer to my code to show each slide separately.the below code is my code and it just show the first li!!!!
JSSlider.js
$(document).ready(function () {
var counter = 0;
hideAllSlides();
function hideAllSlides() {
//debugger;
$("#main li").css("display", 'none');
}
//debugger;
$("#main li").each(
function () {
// debugger;
counter += 1;
$(this).attr("id", "slide"+counter);
});
counter = 0;
$.timer(function nextSlide() {
//debugger;
counter += 1;
hideAllSlides();
debugger;
$("#main #slide" + counter).animate({
display: "block",
height:"toggle"
});
}, 2000,true);
//$("#main>li img").css("display", "none");
//$("#main li>*").animate({
// display:"inline-block",
// height: "toggle",
// opacity: "toggle"
//}, "slow");
})
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JS/jquery-1.10.2.min.js"></script>
<script src="JS/jsSlider.js"></script>
<style>
.main li {
display: inline-block;
}
</style>
</head>
<body>
<div>
<ul id="main" class="main">
<li>
<img src="Photo/01.jpg" />
</li>
<li></li>
<li></li>
<li>
<ul>
<li>
<img src="Photo/02.jpg" />
</li>
<li>
<img src="Photo/03.jpg" />
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>