SharePoint 2010 Announcement Slider Web Part with bxSlider

Slider web part with text and image is one of the common requirements for most of the SharePoint 2010 intranet applications. There are multiple jQuery plugins available to create a Content Slider. In this post I’ll share how to use bxSlider in SharePoint 2010 visual web part to display the items available in default Announcement list.

The basic idea is to create a content slider with both text and image as shown below.

Add a new column to the Announcement list with the name “Image” with data type “Single Line of Text” . This column holds the URL of the image that has to be shown for that announcement item. Add some images into Site Assets library or any other desired location and refer its url into the image column while you add items in Announcement library.

Now let’s start our coding part and begin with setting up our environment.

1. Create a new SharePoint Project in Visual Studio 2010

2. Create a new VisualWebPart named as ContentSlider

3. Download jQuery and add it to the project if you have not already referenced it in your Master Page

4. Download bxSlider and add it to your project. For the sake of simplicity I have placed it into the mapped folder, so that it can be referenced from 14 root. The other options are to provision the js file through a SharePoint module or upload it into style library or site assets library and refer that file.

Content Slider – Design

The design for slider is very simple as bxSlider is very easy to implement. bxSlider plugin requires a div element to apply its sliding effect. The id of that div has to be referred in the method call to plugin and its treats all its child div-s as slider item. So any content which is placed inside the child div will be shown with a carousel effect. In this example I have placed a repeater control inside a div named as “slider1” and repeater takes care of rendering the child divs.

 <SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="~site/_layouts/AshokRaja.Me.Slider/Scripts/jquery-1.7.2.min.js" />
 <SharePoint:ScriptLink ID="ScriptLink2" runat="server" Name="~site/_layouts/AshokRaja.Me.Slider/Scripts/jquery.bxSlider.min.js" />
 <SharePoint:ScriptLink ID="ScriptLink3" runat="server" Name="~site/_layouts/AshokRaja.Me.Slider/Scripts/jquery.easing.1.3.js"  />
 
 <style type="text/css">
     .bx-pager
     {
         text-align: center;
     }
     
     .bx-pager a
     {
         color: #838383;
         font-size: 16px;
         padding: 0 10px;
     }
     .bx-pager .pager-active, .bx-pager a:hover
     {
         color: #DE312A;
         text-decoration: none;
     }
     
     a
     {
         text-decoration: none;
     }
 </style>
 <script type="text/javascript">
     $(function () {
         $('#slider1').bxSlider({
             auto: true,
             pager: true,
             controls: false,
             pause: 5000
         });
     });
 	
 	
 </script>
 <div class="wp-Cover">
     <h3 class="wp-Header">
         <span class="Head">Announcements</span>
     </h3>
     <div id="slider1">
         <asp:Repeater ID="rep1" runat="server">
             <ItemTemplate>
                 <div>
                     <table>
                         <tr>
                             <td colspan="2">
                                 <h2 style="color: Orange">
                                     <%# DataBinder.Eval(Container.DataItem, "Title") %>
                                 </h2>
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <asp:Literal ID="ltImage" runat="server"></asp:Literal>
                                 <img alt="" src="<%# DataBinder.Eval(Container.DataItem, "Image") %>" width="200px" />
                             </td>
                             <td valign="top" style="text-align:justify;padding-left:10px">
                                 <div class="info">
                                     <%# DataBinder.Eval(Container.DataItem, "Body") %>
                                 </div>
                             </td>
                         </tr>
                     </table>
                 </div>
             </ItemTemplate>
         </asp:Repeater>
     </div>
 </div>
 <script type="text/javascript">
     $('img').error(function () { $(this).hide(); });
     $('img').each(function () { this.src = this.src; });
 </script>

The script section at the bottom of the control is not mandatory but this help you to remove the empty space created if the image is not available.

Content Slider – Code

Open the code window of the user control and place the below code section. The below piece of code retrieves the announcement items from list after validating its expiry date and binds the content to the repeater.

 public partial class ContentSliderUserControl : UserControl
 {
 	string Qry = " <Where><Geq><FieldRef Name='Expires' /><Value IncludeTimeValue='FALSE' Type='DateTime'>{0}</Value></Geq></Where>";
 	protected void Page_Load(object sender, EventArgs e)
 	{
 		if (!IsPostBack)
 		{
 			DisplayAnnouncements();
 		}
 	}
 
 
 	private void DisplayAnnouncements()
 	{
 		SPSecurity.RunWithElevatedPrivileges(delegate()
 		  {
 			  using (SPSite site = new SPSite(SPContext.Current.Site.ID))
 			  {
 				  using (SPWeb web = site.OpenWeb(SPContext.Current.Web.ID))
 				  {
 					  SPList list = web.Lists["Announcements"];
 					  SPQuery query = new SPQuery();
 					  query.RowLimit = 10;
 					  query.Query = string.Format(Qry, DateTime.Now.ToString("yyyy-MM-dd"));
 					  rep1.DataSource = list.GetItems(query).GetDataTable();
 					  rep1.DataBind();
 				  }
 			  }
 		  }
 			  );
 	}
 }

That’s it, now build the App, deploy it, edit a page and add your web part and let the content start sliding 🙂

Download the source code for this article from the below link.

Download Source