a4ansar: ASP.Net Carousel using Listview Control

I have searched in so many sites for carousel control in asp.net. In Adobe Flex, MS Silverlight has default carousel controls with good look and feel. In JQuery we can create carousel controls. Here I am demonstrating a carousel using jquery,ASP.Net Listview controls. We can fetch data from database into the carousel dynamically from the database(Here I am using static datatable).

myCarousel.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Carousel.aspx.cs" Inherits="mySite.Carousel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <link rel="STYLESHEET" type="text/css" href="site.css" />
   <style type="text/css">
   div.panes > div
   {
   display: none;
   padding: 0;
   border: 1px solid #999;
   border-top: 0;
   font-size: 14px;
   background-color: #fff;
   }
   div.carousel-section
   {
   margin-top: 15px;
   }
   ul.list-apps div.app-img
   {
   width: 91px;
   height: 92px;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-color: #fff;
   border: solid 1px #333;
   margin-right: 10px;
   }
   ul.carousel-apps div.app-img
   {
   width: 89px;
   height: 90px;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-color: #000;
   margin-right: 10px;
   }
   div.carousel-no-content
   {
   height: 121px;
   color: #fff;
   padding: 20px;
   }
   div.carousel-no-content p, div.carousel-no-content li
   {
   line-height: 18px;
   font-weight: bold;
   }
   div.carousel-no-content p
   {
   margin-bottom: 10px;
   }
   div.carousel-non-content ol
   {
   padding-bottom: 15px;
   }
   div.carousel-no-content a
   {
   color: #fff;
   text-decoration: underline;
   }
   </style>
   

   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

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

</head>
<body>
   <form id="form1" runat="server">
   <div>
   <div id="my_carousel" class="carousel groupr">
   <div class="arrow left btnprev" style="z-index: 100;">
   </div>
   <div class="arrow right btnnext" style="z-index: 100;">
   </div>
   <ul class="carousel-apps group">
   <li>
   <div class="image group">
   <p>
   <a href="#" title="">Mr. X</a><div>
   India</div>
   </p>
   <div class="app-img" src="profile_games.png">
   <img src="images/Bluehills.jpg" width="93" height="94" alt="" /></div>
   </div>
   <div class="info">
   <fieldset>
   <div class="data">
   <p>
   <label>
   Father's Name:</label><span>Mr. A</span></p>
   <p>
   <label>
   Date of Birth:</label><span>29-Oct</span></p>
   <p>
   <label>
   Phone #:</label>
   <span>(345)-354-3412</span></p>
   <p>
   <label>
   Profession:</label><span>Software Engineer</span></p>
   </div>
   </fieldset>
   </div>
   </li>
   <li>
   <div class="image group">
   <p>
   <a href="#" title="">Mr. Y</a>
   <div>
   India</div>
   </p>
   <div class="app-img" src="profile_games.png">
   <img src="images/Sunset.jpg" width="93" height="94" alt="" /></div>
   </div>
   <div class="info">
   <fieldset>
   <div class="data">
   <p>
   <label>
   Father's Name:</label>
   <span>Mr. B</span></p>
   <p>
   <label>
   Date of Birth:</label><span>19-Feb</span></p>
   <p>
   <label>
   Phone #:</label>
   <span>(345)-354-4892</span></p>
   <p>
   <label>
   Profession:</label><span>Model</span></p>
   </div>
   </fieldset>
   </div>
   </li>
   <li>
   <div class="image group">
   <p>
   <a href="#" title="">Miss Z</a>
   <div>
   India</div>
   </p>
   <div class="app-img" src="profile_games.png">
   <img src="images/Waterlilies.jpg" width="93" height="94" alt="" /></div>
   </div>
   <div class="info">
   <fieldset>
   <div class="data">
   <p>
   <label>
   Father's Name:</label>
   <span>Mr. C</span></p>
   <p>
   <label>
   Date of Birth:</label><span>21-Mar</span></p>
   <p>
   <label>
   Phone #:</label><span>(345)-354-5656</span></p>
   <p>
   <label>
   Profession:</label><span>Student</span></p>
   </div>
   </fieldset>
   </div>
   </li>
   <li>
   <div class="image group">
   <p>
   <a href="#" title="">Mr. Y</a>
   <div>
   India</div>
   </p>
   <div class="app-img" src="profile_games.png">
   <img src="images/Sunset.jpg" width="93" height="94" alt="" /></div>
   </div>
   <div class="info">
   <fieldset>
   <div class="data">
   <p>
   <label>
   Father's Name:</label>
   <span>Mr. B</span></p>
   <p>
   <label>
   Date of Birth:</label><span>19-Feb</span></p>
   <p>
   <label>
   Phone #:</label>
   <span>(345)-354-4892</span></p>
   <p>
   <label>
   Profession:</label><span>Model</span></p>
   </div>
   </fieldset>
   </div>
   </li>
   <li>
   <div class="image group">
   <p>
   <a href="#" title="">Mr. W</a><div>
   India</div>
   </p>
   <div class="app-img" src="profile_games.png">
   <img src="images/Winter.jpg" width="93" height="94" alt="" /></div>
   </div>
   <div class="info">
   <fieldset>
   <div class="data">
   <p>
   <label>
   Father's Name:</label><span>Mr. D</span></p>
   <p>
   <label>
   Date of Birth:</label><span>13-Sep</span></p>
   <p>
   <label>
   Phone #:</label><span>(345)-354-1231</span></p>
   <p>
   <label>
   Profession:</label><span>Cricketer</span></p>
   </div>
   </fieldset>
   </div>
   </li>
   </ul>
   </div>
   </div>
   </form>
</body>
</html>

myCarousel.aspx.cs

---------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace mySite
{
   public partial class myCarousel : System.Web.UI.Page
   {
   protected void Page_Load(object sender, EventArgs e)
   {
   DataTable myDataTable = new DataTable();

   DataRow dtRow;
   DataColumn myDataColumn;

   myDataColumn = new DataColumn();
   myDataColumn.DataType = Type.GetType("System.String");
   myDataColumn.ColumnName = "id";
   myDataTable.Columns.Add(myDataColumn);

   myDataColumn = new DataColumn();
   myDataColumn.DataType = Type.GetType("System.String");
   myDataColumn.ColumnName = "username";
   myDataTable.Columns.Add(myDataColumn);

   myDataColumn = new DataColumn();
   myDataColumn.DataType = Type.GetType("System.String");
   myDataColumn.ColumnName = "firstname";
   myDataTable.Columns.Add(myDataColumn);

   myDataColumn = new DataColumn();
   myDataColumn.DataType = Type.GetType("System.String");
   myDataColumn.ColumnName = "lastname";
   myDataTable.Columns.Add(myDataColumn);

   myDataColumn = new DataColumn();
   myDataColumn.DataType = Type.GetType("System.String");
   myDataColumn.ColumnName = "designation";
   myDataTable.Columns.Add(myDataColumn);

   myDataColumn = new DataColumn();
   myDataColumn.DataType = Type.GetType("System.String");
   myDataColumn.ColumnName = "photo";
   myDataTable.Columns.Add(myDataColumn);

   dtRow = myDataTable.NewRow();
   dtRow["firstname"] = "Ansar";
   dtRow["lastname"] = "Azeez";
   dtRow["designation"] = "Software Engineer";
   myDataTable.Rows.Add(dtRow);

   dtRow = myDataTable.NewRow();
   dtRow["firstname"] = "Aslam";
   dtRow["lastname"] = "Azeez";
   dtRow["designation"] = "Project Leader";
   dtRow["photo"] = Server.MapPath("/images/" + "Sunset.jpg");
   myDataTable.Rows.Add(dtRow);

   dtRow = myDataTable.NewRow();
   dtRow["firstname"] = "Mishal";
   dtRow["lastname"] = "Mohammed";
   dtRow["designation"] = "HR Manager";
   myDataTable.Rows.Add(dtRow);

   dtRow = myDataTable.NewRow();
   dtRow["firstname"] = "Adil";
   dtRow["lastname"] = "Azeez";
   dtRow["designation"] = "Event Manager";
   myDataTable.Rows.Add(dtRow);

   dtRow = myDataTable.NewRow();
   dtRow["firstname"] = "Jobish";
   dtRow["lastname"] = "J";
   dtRow["designation"] = "Project Manager";
   myDataTable.Rows.Add(dtRow);

   dtRow = myDataTable.NewRow();
   dtRow["firstname"] = "Anandh";
   dtRow["lastname"] = "K";
   dtRow["designation"] = "Software Tester";
   myDataTable.Rows.Add(dtRow);

   dtRow = myDataTable.NewRow();
   dtRow["firstname"] = "Renjith";
   dtRow["lastname"] = "Maxy";
   dtRow["designation"] = "Project Leader";
   myDataTable.Rows.Add(dtRow);

   listViewItems.DataSource = myDataTable;
   listViewItems.DataBind();
   }
   }
}

ASP.Net Carousel Using ListView

From above example we can create a carousel with good look and feel.

a4ansar

Monday, July 26, 2010

ASP.Net Carousel using Listview Control

1 comment: