Lightest jquery content slider ever – 380 bytes

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:

<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:

#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:

<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 (){
	$(&#039;#button a&#039;).click(function(){
		var integer = $(this).attr(&#039;rel&#039;);
		$(&#039;#myslide .cover&#039;).animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
		$(&#039;#button a&#039;).each(function(){
		$(this).removeClass(&#039;active&#039;);
			if($(this).hasClass(&#039;button&#039;+integer)){
				$(this).addClass(&#039;active&#039;)}
		});
	});	
});
</script>

.

Thats all folks. Check out working DEMO.

Cheers!

Recently Published

»

Secure Web: 5 Best Practices For Application Development

There are several essential best practices for secure web ...

»

Laravel PHP Framework: Features and benefits for web development

Companies and organizations are focusing on developing custom web ...

»

Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...

»

Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...

»

Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...

»

Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...

»

Know-How DevOps Benefits Your Business

The organizations in this current fast-paced environment need to ...