In our welcome post we promised you that will come with tutorials on css and jquery soon and also will continue with it. So this one is our first tutorial on jquery which is all about creating a content slider using css and jquery here will learn to create a slider which can be used to slide your content of website. A simple tutorial easy to learn and it can take somewhat 15 minutes of your time to get it working. So lets start it.
Step 1 : HTML
Now here will create a html document first with basic elements in it like a wrapper which holds all the divs of our document in it along with the slider and the content slider which slides through the slide. Then a navigation section for slide there with mouse click we can slide the slider manually. So lets create a html document check out the below codes for more clarification.
<div id="wrapper"> <div id="slider"> <div class="inslider"> <!-- Content holder will hold content --> <div class="contentholder"> <div class="contentslider"> <div class="content"> <h1>Welcome to Content Slider Demo</h1> <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> </div> <div class="content"> <h1>Welcome to Content Slider Demo 2</h1> <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> </div> <div class="content"> <h1>Welcome to Content Slider Demo 3</h1> <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> </div> <div class="content"> <h1>Welcome to Content Slider Demo 4</h1> <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> </div> </div> </div> <!-- Navigation for content slider --> <div class="contentnav"> <a rel="1" href="#">1</a> <a rel="2" href="#">2</a> <a rel="3" href="#">3</a> <a rel="4" href="#">4</a> </div> </div> </div> </div> </div>
Step 2 : Styling with CSS
Now here we need to slide our html elements according to our requirement. You guys can style it according to your project requirement. Check out below codes
body { background-color:#f0f0f0; } #wrapper { width:960px; margin-left:auto; margin-right:auto; overflow:visible; } #slider { background-color:#3a3a3a; position:relative; padding:20px; overflow:hidden; border: 1px solid #a9a9a9; -moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; } .content { width:920px; float: left; position: relative; background-color:#FFF; } .inslider a { text-decoration:none; } .contentholder { border: 1px solid #a9a9a9; height:300px; width: 920px; overflow: hidden; position: relative; background-color:#FFF; } .contentslider { position: absolute; top: 0; left: 0; } .contentnav { position: absolute; bottom: 30px; left:30px; height:30px; z-index: 100; text-align: center; line-height: 30px; border: 1px solid #000; background-color: #fff; border: 1px solid #000; } .contentnav a { padding: 5px; text-decoration: none; color: #333; } .contentnav a.active { font-weight: bold; color:#FFF; background: #603; }
Step 3 : Jquery and Custom Js linking
Here we need to link jquery framework with html document, for now will link jquery framework directly from google code. Then create one custom.js file which holds all our custom js codes in it and then link custom.js with html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script> <script src="custom.js" type="text/javascript"></script>
Step 4 : Putting Life in Slider
Now lets write some codes to get working slider. We have explained each lines of js codes in comments in below codes. Check out
$(document).ready(function() { //Activate First Link $(".contentnav a:first").addClass("active"); //width of a single content area var contentwidth = $(".contentholder").width(); //Total number of content var totalcontent = $(".content").size(); //Total width of all content area var allcontentwidth = contentwidth * totalcontent; //contentslider to new size which we got in above step $(".contentslider").css({'width' : allcontentwidth}); //Now right a new function for slide and slide navigation rotate = function(){ //Number of times we need to slide var slideid = $active.attr("rel") - 1; //Set the distance which single content needs to slide var slidedistance = slideid * contentwidth; //Remove active class $(".contentnav a").removeClass('active'); //Add Active Class $active.addClass('active'); //Slider Animation $(".contentslider").animate({ left: -slidedistance }, 500 ); }; //Set Time for Rotation of slide rotation = function(){ play = setInterval(function(){ //Next slide nav $active = $('.contentnav a.active').next(); if ( $active.length === 0) { //Move to first slide nav $active = $('.contentnav a:first'); } rotate(); //Timer speed 5 sec }, 5000); }; //Run rotation fuction rotation(); $(".contentnav a").click(function() { $active = $(this); clearInterval(play); rotate(); rotation(); return false; }); });
[...] This post was mentioned on Twitter by Geoffrey CONTE and Julien Lavallée, vikas ghodke. vikas ghodke said: RT @wddesk Content Slider Using CSS and Jquery | Web Designers Desk http://bit.ly/9DvF9z [...]
Great article, Thanks for sharing I’ll put this on my facebook about this too.
[Reply]
Admin Reply:
May 8th, 2010 at 12:43 pm
I am glad that you liked this post.
[Reply]
Hi. Thanks for sharing. Usability would be improved by adding a few more controls. I suggest pause onmouseover as well as adding Next, Previous, and Pause/Play buttons.
[Reply]
Admin Reply:
May 8th, 2010 at 12:42 pm
Yeah will surely consider your point and will come up with your above mentioned requirements in upcoming tutorials. Anyways thanks for the comment.
[Reply]
[...] This post was mentioned on Twitter by Robert Visser. Robert Visser said: Content Slider Using CSS and Jquery /by @wddesk http://j.mp/ceChIT #css #css3 #jquery #webdesign [...]
Thanks a bunch. Exactly the “basic” setup I was looking for.
[Reply]
Lots of Fantastic information in your blogpost, I bookmarked your blog post so I can visit again in the future, Cheers, Clare Lieb
[Reply]
Thanks for the info. Regards.
[Reply]
[...] Content Slider Using CSS and Jquery [...]
Content Slider Using CSS and Jquery…
So this one is our first tutorial on jquery which is all about creating a content slider using css and jquery here will learn to create a slider which can be used to slide your content of website….
[...] This post was mentioned on Twitter by FAQPAL. FAQPAL said: Content Slider Using #CSS and #Jquery: http://bit.ly/9FbLY8 via @wddesk [...]
This Is very use Full Post for Designers and freshers who want learn HTML and CSS In Easy way. I am Very Thank full to You. Keep it Up
[Reply]
[...] Content Slider Using CSS and Jquery [...]
[...] Content Slider Using CSS and Jquery [...]
[...] 22.Content Slider Using CSS and Jquery [...]
[...] This post was mentioned on Twitter by FAQPAL. FAQPAL said: Content Slider Using #CSS and #Jquery: http://bit.ly/9FbLY8 via @wddesk [...]
[Reply]
[...] Crear un contenedor deslizante usando CSS y Jquery [...]
Wow this one too! http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/
[Reply]
[...] [...]