Possibly the most simple jQuery Slider alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Possibly the most simple jQuery Slider 9 comments Do you have jQuery in your blog and space to insert 10 lines of code? If the answer is yes and you also want to have an automatic slideshow, this is the simplest code I've seen so far. That code having a succession of simple images placed inside a box with a common general container would give this result: 1. Adding the JavaScript If you do not have jQuery, then you should add this line just after]]>to load this popular slideshow: We can save changes to the template because that is all. It is simple but you will see that it works and does what it has to do. Now we just have to put the images where we want to display, in the manner discussed below. 2. Create the slider After adding the codes above in our template (although you could add it directly into a gadget, on a page or even in an entry as you see here) we can create a viewer as you saw above. We just have to use this HTML structure below to add the images:

I do not know how you see it but it is all you need. For me this is quite lightweight and efficient, much more than most libraries that are used perhaps too often. Settings The last three numbers of the plugin allow us to adjust some things. All are expressed in milliseconds (4000 = 4 seconds) fadeOut(0): Time for the outgoing image fadeIn(1000): Time for the next image ('#slider');},4000): Time spent in each image How it Works And for the curious who want to learn things... $('#slider div:gt(0)').hide(); Withgt(x)we select all thedivs from number x. In this case 0 is the first, so what we do with this line is to hide (hide) all the boxes except the first, which will be the image visible initially. setInterval(function(){ [what we will do] }, 4000); We need to reiterate a few things from time to time and we do withsetInterval, indicating the delay time between each set. $('#slider div:first-child').fadeOut(0) Within each of these intervals we remove (fadeOut) the first box (div:first-child) that is in the relationship of images... .next('div').fadeIn(1000) ...and we make the following box (next) appearing gradually (fadeIn). .end().appendTo('#slider'); Finally we have the first image and place it at the end(appendTo) of the "list". end()resets the count of elements that we move forward withnext(). Thus, the first child made earlier to disappear is the one we sent down the stack and not the image that is now visible. Variants and customization As you have seen CSS is not necessary for the slider to work, but using it we can change its look, allow the use of images of different sizes, include labels and even improve the transition. Here are some ideas. DEMO TEXT1 We can limit the overall container size and prevent overflow for larger images. And then we will put rounded corners, border and then center them. #slider { overflow: hidden; width: 500px; height: 300px; border:3px solid #b8b8b8; border-radius: 40px; margin: 0 auto; padding: 0; position: relative; } If we place the parent boxes of the images absolutely with respect to the general container (for that we put before therelative), these will overlap each other. In this way thefadeOutmay give them some time to be "visible" (we changed 0 to 1000) and a smoother transition between images. The mixture of images is produced in the second demo. In the images, themax-widthserves us to always take up the entire width andmin-heightso that even if they are distorted, there will remain no space below when they are less than 300px. #slider > div { position:absolute; top:0; left:0; } #slider img { width:100%; min-height:300px; margin:0; padding:0; border:0; } And if we add other elements on the images (in this example a text), we'll just label them with aspanor paragraph (p) and position them in the CSS in an absolute manner, placing them in the exact place where we want with top/bottom - left/right. #slider p { position: absolute; bottom: 30px; left: 0; display: block; width: 400px; height: 24px; margin:0; padding: 5px 0; color: #eee; background: #990000; font-size: 22px; line-height:22px; text-align:center; } The markup in the HTML for this last, includes also a link to the image, so it would be like this:

TEXT1

TEXT2

TEXT3

Like 0 Random Posts How to Add Neat CSS3 Dropdown Menu in Blogger27/02/2014 - 5 Comments Rounded Corners and Shadows for Images using CSS18/09/2013 - 2 Comments Add Author's Profile Picture and Name in Multi Author Blog22/02/2014 - 2 Comments Related Posts: Using JQuery + EasyDrag to Move Ele... Share blog posts in social medias u... Add floating social media sharing b... Add A CSS Animated Share Button on ... How to Add Numbered Page Navigation... 9 comments: Raj Mehta 9/03/2013 The most wonderful thing about this slider is that it's ridiculously simple! Also, it won't affect much on one's page speed. Nice to see HelpLogger coming back with an awesome post. I just wish if you could post more often :) Great fan! @techsperia Reply Eslam Nabil 9/03/2013 Thanks a lot bro :) Great post ! Reply Gagan Masoun 9/03/2013 I love this slider. Will add to my blog soon. Reply Cerwenlloyd Gefjun 9/04/2013 I am waiting for your new post and now you come back with a gift to us....Thanks Bro! Regards Blog gingtipsandtrix.blogs pot.com Reply Migdhadh Prinx 9/09/2013 GUd Reply jeeten kushwaha 9/12/2013 One of the simple and good slider. Regards, jeeten. http://www.surat- training.com /seo_in_surat.php Reply Rehana Sulthan 9/14/2013 What a Slider. Can we have this simple silder with navigation? I wanted to implement this in one of my Entertainment blog if you could help me in providing this with navigation. Reply Alandy Franco Ocal 11/19/2013 Probably this was the simplest slider I've googled so far that worked fine. Thanks dude. :) Reply Petite Fille 1/18/2014 I don't understand where the codes should to be placed. Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,786 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 0 Like