Today evening i was wondering that why jquery plugins made very complex and why are not lightweight. Jquery has a inbuilt function “animate()” which really create tremendous effects.
Therefore i made one content slider using this animate function and found that its script excluding “jquery.js” is less than 380 bytes , yes i repeat its 380 bytes. Sounds cool and great.
Just check out DEMO here.
Copy and Paste the HTML inside body tag of your html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div id="button"> <a class="button1 active" rel="1" href="#"></a> <a class="button2" rel="2" href="#"></a> <a class="button3" rel="3" href="#"></a> </div> <!-- end of div button--> <div class="clear"></div> <div id="myslide"> <div class="cover"> <div class="mystuff"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra, elit sed hendrerit condimentum, libero elit tincidunt mauris, id rutrum tellus leo at urna. Fusce dui mi, lacinia sit amet blandit vitae, interdum ut eros. Nulla egestas imperdiet rutrum. Praesent vel metus ligula. In ut leo enim, in interdum urna. In hac habitasse platea dictumst. Nullam euismod, eros et venenatis adipiscing, libero libero cursus magna, et semper tellus ipsum eget libero. </div> <div class="mystuff"> Aenean scelerisque ipsum a nunc placerat sed blandit odio sollicitudin. Donec sed velit id ipsum lobortis tincidunt a sit amet leo. Praesent sit amet nisl a arcu lobortis egestas. Nunc at felis in erat condimentum ornare vel vel nisl. Phasellus ultrices nisi vel leo commodo et rhoncus ipsum porttitor. Fusce eu ligula sit amet sapien ullamcorper adipiscing. Suspendisse non ipsum elit. Nunc vehicula, felis non scelerisque aliquam, tellus leo consequat sem, ac suscipit nisi risus a justo. Quisque sollicitudin iaculis nisl at luctus. Curabitur porttitor lacus et dui blandit vulputate. In eu quam quam. </div> <div class="mystuff"> Suspendisse iaculis sodales dui pretium faucibus. Praesent vitae ipsum justo, id tempor tellus. In nulla leo, dignissim quis luctus sed, commodo nec velit. Aliquam ac nisl quam, quis tincidunt magna. Aenean nec massa elit, non ornare neque. Vestibulum at ipsum sit amet augue euismod consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus porttitor gravida massa at cursus. Sed ac viverra risus. </div> </div> <!-- end of div cover --> </div> <!-- end of div myslide --> |
.
Copy and paste CSS inside style tag of your html page:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #myslide {width:160px;overflow:hidden;position: relative;height:170px;margin-bottom:20px} #myslide .cover{ width:480px; /*------- class mystuff width * number of mystuff divs (160 * 3 = 480)---------- */ position: absolute; height:160px; } #myslide .mystuff {width:160px;float:left;padding:20px 0;} .button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;} .active{background:#111;padding:6px;display:block;float:left;outline:none;} .clear{clear:both;} |
.
And here is the master jquery code (389 bytes), copy and paste under head tag of your html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/JavaScript"> $(document).ready(function (){ $('#button a').click(function(){ var integer = $(this).attr('rel'); $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */ $('#button a').each(function(){ $(this).removeClass('active'); if($(this).hasClass('button'+integer)){ $(this).addClass('active')} }); }); }); </script> |
.
Thats all folks. Check out working DEMO.
Cheers!


Comments
I’ve been looking through your site. You have some nice posts on here, especially this one, I enjoyed it…nice post. Consider yourself bookmarked
.
Hello! Your post (Lightest jquery content slider ever ) does so well that I would like to translate it into French, publish on my french blog and link to you. You have something against it? Regards
Wow, that’s quite good; clean, sleek and simple.
Wonderful slider! It be really cool to have an Autoplay Function!
How can I add something like an auto-play for rotating automatically? ty!
Nice simple jquery slider.
I did something similar (more options) here:
http://www.designtopx.com/archives/2010/2/jquery-vert-slider/
This one is is really good:
nice, clean and simple.
Well, that is great you shared about these demo’s it would be really helpful.
Simple is always best! Many thanks – it added some much needed interactivity on my website. I changed two things, though:
1. I added a return false line to your code to stop the href=”#” from activating
2. I changed the href=”#” to href=”#cs[integer]” and added a corresponding anchor link alongside each slide so that if javascript is not working, it “jumps” to the right part of the page.
Many thanks
Phil
How long do you spend a day coming up with stuff like this?
I cling on to listening to the news bulletin speak about getting boundless online grant applications so I have been looking around for the top site to get one. Could you tell me please, where could i get some?
Hi,
Is it possible to make it auto slide? without buttons
Thanks
It has lots of information, I like the creation, the designs, keep up the good work.
Hey! I love your code. Honestly it is very simple, but very powerful in terms of use. I just one to ask one question: I embed a you tube video as one of the . When it plays, on switch I want the video to stop or to mute. Is there a function to do so or some sort of code. Thank You!
this is a great article. Ready to hear more in the future.
I just wanted to say that I found your site via Goolge and I am glad I did. Keep up the good work and I will make sure to bookmark you for when I have more free time away from the books. Thanks again!
Informations like this I always prefer to collect. I always open your post with great wish.
thanks for this great list. You really give to developers great juice. Thanks!
Great one! Thanks for sharing.
good job!!! best sliding with the minimal of programming and size!
Hi Steve, can you add the line of code witch enable auto-slide ?
Thank you for sharing
Wow!, this was a top quality post. In explanation I’d like to publish like this as well – taking time and real effort to make a good article… but what can I say… I keep putting it off and never seem to get something done