Create Simple Carousel using jQuery

admin — Mon, 15 Feb 2010 03:42:15 +0000

Carousel

You can see the working demo here.

Carousel is a way to present content in the form of slideshow on web page. Here I’m showing how easily you can create a horizontal carousel using jQuery. You can play with the given code and easily create vertical carousel, circular carousel, auto-scrolling carousel etc.

I’m using jQuery for animation. So, you need jQuery JavaScript library for it. You can download latest jQuery JavaScript library from jquery.com.

So, how it work.

Your basic structure of HTML for Carousel should be like this:-


   
    	some content...
        some content...
        some content...
        some content...
        some content...
        some content...
        .....

What you need to do before applying “my_carousel” ID to your Carousel DIV.

1. Put any HTML content which you want to display in your LI’s.
2. Create CSS for your Carousel DIV.
3. You also need two images, or button to scroll your content in left and right direction.
4. Assign “btnprev” class to your left button or image.
5. Assign “btnnext” class to your right button or image.
6. Assign “my_carousel” ID to you Carousel DIV.

How JavaScript Code work:-

So, when browser load the page JavaScript look for “my_carousel” ID in HTML and apply all the require attributes and events to your DIV, UL, and LI.

Important JavaScript variables and their purpose:-

step – How many LI’s you want to scroll on click of left and right button.
current – Index or Number of left most visible LI in carousel.
maximum – Total number of LI in carousel.
visible – Number of visible LI’s.
speed – Animation speed.
liSize – Width of one LI in pixels.
carousel_height – Carousel DIV height.
ulSize – Width of UL. You can calculate it like this liSize * maximum.
divSize – Width of CArousel DIV. You can calculate it like this liSize * visible.

Assign require attributes to DIV, UL, and LI.

$('#my_carousel').css("width", divSize+"px").css("height", carousel_height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
 
$('#my_carousel ul').css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute");

Here we changed the width, height, visibility, overflow, and position of Carousel DIV. The Carousel DIV overflow = hidden property is very important here, through it we are just showing the require(visible) LI’s which we want to show at a time. We just hide the remaining LI’s.

We also changes the width, left and position of UL.

Assign Click event to left and right buttons/images

Left button/image

$('.btnprev').click(function() { 
	if(current - step < 0 || current - step > maximum - visible) {return; }
	else {
		current = current - step;
		$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
	}
	return false;
});

So, we have assigned a click event on previous button. So, we are first checking the index of current LI. If the current LI is the first LI we will not do anything. We will simply return from the function. If the current LI is not the first LI then scroll the content of UL to left hand side by using the jQuery “animate” function. For more information about animate function click here. And we also changed the current to current left most most visible LI.

Right button/image

$('.btnnext').click(function() { 
	if(current + step < 0 || current + step > maximum - visible) {return; }
	else {
		current = current + step;
		$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
	}
	return false;
});

Similarly we assigned the clicked event on next button and followed the same logic what we used for previous click. We just changed it slightly to check last LI when we click on next button. If the current is last LI we will do nothing.

Complete JavaScript Code:-

<script language="javascript">
	$(function() {
		var step = 2; 
		var current = 0; 
		var maximum = $('#my_carousel ul li').size(); 
		var visible = 2; 
		var speed = 200; 
		var liSize = 331;
		var carousel_height = 161;
 
 
		var ulSize = liSize * maximum;   
		var divSize = liSize * visible;  
 
		$('#my_carousel ul').css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute");
 
		$('#my_carousel').css("width", divSize+"px").css("height", carousel_height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
 
		$('.btnnext').click(function() { 
			if(current + step < 0 || current + step > maximum - visible) {return; }
			else {
				current = current + step;
				$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
			}
			return false;
		});
 
		$('.btnprev').click(function() { 
			if(current - step < 0 || current - step > maximum - visible) {return; }
			else {
				current = current - step;
				$('#my_carousel ul').animate({left: -(liSize * current)}, speed, null);
			}
			return false;
		});
	});
script>

Create CSS Stylesheet and JavaScript for Print

admin — Mon, 13 Apr 2009 16:38:17 +0000

CSS Stylesheet for Print

When we want to print out HTML page we need a lighter version of our HTML page. Basically, we don’t want to print the background images, background colors, advertisements and other things which are not relevant in printing. For this purpose, we need to specify a CSS stylesheet which browser use when we print our HTML page. We can also change the width and layout of our HTML page. We can specify our CSS stylesheet for print like this.

<head>
/*External style sheets*/
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>

<head>
/*Embedded style sheets*/
<style type="text/css" media="print">
	.noprint
        {
		display:none;
	}
</style>
</head>

The important thing to note here is the media descriptor media=”print” which we are giving through media attribute. The browser knows using this media descriptor that this CSS stylesheet is defined to use at the time of print. We can define CSS stylesheet for SCREEN like this.

<head>
/*External style sheets*/
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>

<head>
/*Embedded style sheets*/
<style type="text/css" media="screen">
	.header
        {
		width:800px;
                height:200px;
	}
</style>
</head>

In the following example, I don’t want to print the “Print this Coupon” link in coupon. So, I have just added the class “noprint” and set the display property none in this class. Now, I will apply this class to all the elements which I don’t want to print. You can easily create other classes for different purpose like to change the background color of element in print.


<html>
<head>
    <title>CSS stylesheet for Print</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>
<body>
	<div class="coupon-mini">
  	<table width="500" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="146" align="left" valign="top"><div class='default-coupon'><img src='/sites/default/files/coupon_116_116.'></div></td>
      <td width="354" align="left" valign="top">
      	  <h3 style="font-family: 'palatino linotype',palatino; line-height:18px; padding:6px 0 0 0; color:#0e549c; ">
          		Divan Restaurant and Hookah Lounge, Alabama          
          </h3>
          <div class='coupons-text1'><span>McDonald 20% Off.</span><p>McDonald 20% Off.</p></div><br />
          <div style="clear:both;"></div>
          <div class="detail-basic1">
          	 3125 Piedmont Rd NE, Atlanta, Alabama<br> 
             <strong> Phone Number :</strong>  (404) 365-0410<br/>
             <strong> Pincode:</strong>  30305 <div class="openhr1"><strong> Opening Hours:</strong>  6:30 PM to 01:00 AM</div>
	         <div class="web1">
             	<div class="lft1"><a href="#" class="about-web-link">http://www.divanatlanta.com</a></div>
                <div class="rght1"><a href="#" class="about-mail-link">ajay0878@yahoo.com</a></div>
			</div>
          </div>
      </td>
    </tr>
  </table>
</div>
<div class="print noprint"><a href="javascript:window.print();" class="coupon-print-link">Print this Coupon</a></div>
</body>
</html>

We have also added the window.print() function on Print this Coupon link. This function print the current windows content. We can also print our page through File->Print… menu. But this function is useful when the toolbar and menubar are disabled.

A K Chauhan's Blog » CSS