Awesome Image SlideShow Dealy Using jQuery

I have seen a lot of users requesting for simple jQuery scripts for Image SlideShow Dealy with time duration.So, I am sharing with you all the wonderful jQuery slider. This code is full configured and awesome design for image slide code also deal with lightly weighted and fewer scripts. You can see a demo of design from below link and for your website just copy the code and replace images URL.

Image SlideShow Dealy:

jQuery-slider

If you have latest jquery then use else use below Google Jquery CDN:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Now copy below script for slideshow:

 

<script type="text/javascript">
$(function() { 
var imgs = [
'http://lorempixel.com/output/nature-q-c-370-340-6.jpg',
'http://lorempixel.com/output/nature-q-c-370-340-2.jpg',
'http://lorempixel.com/output/city-q-c-370-340-4.jpg',
'http://lorempixel.com/output/city-q-c-370-340-6.jpg'];
var cnt = imgs.length;
var $imageSlide = $('img[id$=imageSlide]');
// set the image control to the last image
$imageSlide.attr('src', imgs[cnt-1]);
setInterval(Slider, 3000);
function Slider() {
$imageSlide.fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt])
.fadeIn("slow");
});
}
});
</script>

and your HTML part will be:

<img id="imageSlide" src="http://lorempixel.com/output/city-q-c-370-340-6.jpg"/>
Change red marked value as per your requirement.

 

JsFiddle Demo

Here simply we are using the JavaScript function which delays execution of the Slider function for a specific period of time, in above case 3000 milliseconds (3 seconds). If you want to pause the slideshow, use the clearInterval() function.

 

Note: Since the Slider function is first called after a 3 seconds delay, hence we explicitly set the image control source to the last image path in the array. If we do not do so, the user does not see an image for the first 3 seconds.

Himanshu is a young engineer living in India. Currently working at Cognizant as a Senior Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!

2 comments: On Awesome Image SlideShow Dealy Using jQuery

  • I simply want to mention I am beginner to blogs and absolutely enjoyed this website. More than likely I’m likely to bookmark your website . You absolutely have exceptional article content. Cheers for sharing your website page.

  • Meredith Bauchspies

    Outstandingly insightful bless you, I believe your followers may possibly just want far more items such as this continue the superior hard do the job.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page