Auto Image Slideshow Using jQuery

This is a simple slideshow using jquery. Here we used the fade in fade out effect in Jquery.
Its just a 2-3 line code using jquery as compare to Javascript tradional code.
Here what we used

<script>
$(document).ready(function()
{
	$('.img:gt(0)').hide();
	setInterval(function() {
		$(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#show-case")
}, 4000);
      
});
</script>

The complete HTML,CSS & Jquery code is here [click on read more]

<!DOCTYPE html>
<html>
<head>
<title>Fade In-Out - Auto Play Slide Show</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#show-case
{
	box-shadow:1px 1px 5px 2px #0d456d;
	border-raduius:10px;
	height:300px;
	margin:10px auto;
	width:600px;
}
img
{
       position:absolute;
       width:600px;
       height:300px;
}
</style>
</head>
<body>
<div id="show-case">
	<img class="img" src="auto/1.jpg">
	<img class="img" src="auto/2.jpg">
	<img class="img" src="auto/3.jpg">
	<img class="img" src="auto/4.jpg">
	<img class="img" src="auto/5.jpg">
	<img class="img" src="auto/6.jpg">
</div>
<script>
$(document).ready(function()
{
	$('.img:gt(0)').hide();
	setInterval(function() {
		$(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#show-case")
}, 4000);
      
});
</script>
</body>
</html>

Searched Tags- for this post :
0nikhil, nikhil ughade, Jquery, auto image slideshow using jquery, jquery slideshow, Fade in fade out slideshow, fade in effect image slideshow, simple jquery code for slideshow,

Hope it will help you.

Thanks,
Nikhil Ughade
(WEB DeSigNer)
Pune,IN

Nikhil on Deviant Art
http://designikx.deviantart.com
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter
https://twitter.com/0nikhil
—— Advertise Starts ——

—— Advertise Ends ——

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

12 Responses to Auto Image Slideshow Using jQuery

  1. Jan Cihak says:

    Nice slideshow! Is it also possible to make the images appear in random order?

    Jan

  2. Corp Web says:

    i used this script,,it is really helpful but i m having prob with my other images when i use any element with fix position and scroll the page my element goes behind this animation…any tips…please visit http://www.corp-web.com to see what i m exactly saying

    • Nikhil says:

      Friend,
      Please arrange your code.
      There two html,head and body tags in your page. Use them only once in a page.
      Place the slideshow code in body

      <div id="show-case">
      <img class="img" src="auto/1.jpg">
      <img class="img" src="auto/2.jpg">
      <img class="img" src="auto/3.jpg">
      <img class="img" src="auto/4.jpg">
      <img class="img" src="auto/5.jpg">
      <img class="img" src="auto/6.jpg">
      </div>

      <script>

      $(document).ready(function()
      {
      $(‘.img:gt(0)’).hide();
      setInterval(function() {
      $(".img:first-child").fadeOut(3000).next(".img").fadeIn(3000).end().appendTo("#show-case")
      }, 4000);

      });
      </script>

      place this script n html part in “body” part.
      ———————————-
      and place below code in head section …

      <style>
      #show-case
      {
      box-shadow:1px 1px 5px 2px #0d456d;
      border-raduius:10px;
      height:300px;
      margin:10px auto;
      width:600px;
      }
      img
      {
      position:absolute;
      width:600px;
      height:300px;
      }
      </style>

      ————-
      Once you done with this code, Check the slide show, if it’s running good or not.
      still if you find any problem please feel free to contact. It would be great to help you.
      Thank You friend for connecting !!!See you more n more here.

      Nik

      • Sana Khan says:

        please send me complete code. i want a slideshow in which one picture show at first then after some time 1st picture smothily fads out and 2nd will show smothly ……nd so on….plz help me…

      • Nikhil says:

        $(document).ready(function()
        {
        $(‘.img:gt(0)’).hide();
        setInterval(function() {
        $(“.img:first-child”).fadeOut(A).next(“.img”).fadeIn(B).end().appendTo(“#show-case”)
        }, C);

        });

        ———-
        Please find A, B, & C in above code
        A- is fade out time for first image
        B- is fade in time for second image
        C- is how much time you want image to stay
        —————

      • im getting error at $(‘.img:gt(0)’).hide();

      • Nikhil says:

        what error you are facing?
        please check the quotes.
        $(‘.img:gt(0)’).hide();
        Let me know the error if it not works.

  3. Lee Arnold says:

    I had the same issue with my drop down menus coming in behind my rotating banner. All I had to do was add “z-index:100;” to my nav dropdown element.

    This was an excellent, elegant piece of code work BTW. Thank you very much Nikhil!

    (and my name is beverly – it would not allow me to change or log out of my bosses FB account)

  4. The second image fades in while the first image is fading out. This makes two images appear in the frame (and the second images bleeds into my website).

    Any ideas?

  5. Smashing little bit of code – clean and simple! Thanks Nikhil.

  6. Manish Joshi says:

    Thnx For Code.

    How can Title / Caption To Each Image Be Attached in above code?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: