Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create a slider with animation effects using simple code of jQuery

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 5
    • 0
    • 727
    Comment on it

    Hii,

    I had shared few example of animation effects using CSS and jQuery,This blog is continuation with my previous blogs on "animation effects" using CSS and jQuery

    Learn how to create a slider in html with different animation effects using CSS and Jquery.

    Go through the example below:

    HTML:

    <div id="slides">
        <div id="slide1" style="display:none;">
        <p>Slider1</p>
        <img style="width:940px;height:752px;" src="flower1.jpg">
        </div>
        <div id="slide2" style="display:none;"><p>Slider2</p><img style="width:940px;height:752px;" src="flower2.jpg"></div>
        <div id="slide3" style="display:none;"><p>Slider3</p><img style="width:940px;height:752px;" src="flower3.jpeg"></div>
        <div id="slide4" style="display:none;"><p>Slider4</p><img style="width:940px;height:752px;" src="flower4.jpg"></div>
        <div id="slide5" style="display:none;"><p>Slider5</p><img style="width:940px;height:752px;" src="flower5.jpeg"></div>
    </div> 

    CSS:

    body{background-color:#B96B8D;}
    #slides{margin:0 auto;text-align:center;}

    jQuery:

    $("#slide1").fadeIn('slow').delay(3000).fadeOut('slow');
    var t2 = setTimeout(function(){
        $("#slide2").fadeIn('slow').delay(3000).fadeOut('slow');
        var t3 = setTimeout(function(){
            $("#slide3").fadeIn('slow').delay(1000).fadeOut('slow');
            var t4 = setTimeout(function(){
                $("#slide4").fadeIn('slow').delay(3000).fadeOut('slow');
                var t5 = setTimeout(function(){        
                    $("#slide5").fadeIn('slow');
                }, 6000);
            }, 10000);
        }, 6000);
    }, 6000);

    Note: Must include this link in your file

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    Learn how to create a slider with animation effects using simple code of jQuery

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: