Click here to Skip to main content
15,849,487 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
i want to make a image slider by jquery, but i m unable to do so,
i tried a lot but failed..
please can someone gv me any video tutorials for making a jquery image slider..i need it alot..please smone help me,,
asp.net c#
Posted
Updated 20-Feb-14 0:38am
v2

1 solution

Please try is as below.

HTML


XML
<div id="slideshow">
    <img src="img/img1.jpg" alt="" class="active" />
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>




CSS

C#
#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}



Jquery

C#
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');
        
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});


Check here for complete Example : A Simple jQuery Slideshow

Here is the Video : jQuery Image Slider
 
Share this answer
 
v3
Comments
manishmns12 21-Feb-14 7:31am    
sir as i saw some over internet,,,they saved a jquery file and then imported it ,
so here just i may paste the codings above given by you , and the desired output will b achievd na???
Sampath Lokuge 21-Feb-14 7:48am    
Your problem sorted out or what ? Do you need more help ?
manishmns12 21-Feb-14 7:52am    
just trying....do i need to import any java script files too in my project..or just copy n paste the code given by you....
Sampath Lokuge 21-Feb-14 8:06am    
Yes,You have to add jQuery to your project.
manishmns12 22-Feb-14 0:38am    
sorry sir to ask u gain..but what to add here..

<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />

in the alt" " part....
mine page is running but it is not teaking the images which i had set...so what to write in commas of alt..
please tell me

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