Click here to Skip to main content
15,848,264 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
XML
<!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>
        <!--<script>
            $(document).ready(function () {
                $("#main>li>img").fadeIn("slow");
            })
        </script>-->
    </body>
</html>
Posted

1 solution

 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900