Click here to Skip to main content
15,861,168 members
Articles / Web Development / ASP.NET

ASP.NET Repeater with jQuery Slider

16 Jun 2014CPOL3 min read 95.3K   4.7K   19   40
In this blog, we will learn how to integrate one jQuery Slider Plugin with the ASP.NET Repeater Control.

Image Slider with Repeater

Image Slider with Repeater

In this blog, we will learn how to integrate one jQuery Slider plug in with the ASP.NET Repeater Control.

Background

There was a question on implementation of slider with ASP.NET DataList Control and the guy who posted that was facing issues. The issue was actually due to the DataList control, which was rendering as HTML tables breaking the default jQuery Slider functionality. After researching a bit, I found that, it is very easy to implement this with the ASP.NET Repeater control. Let’s go step by step and learn.

Step by Step

Step 1: Download jQuery Slider plug in

You can take any jQuery Slider, but you need to see how exactly it allows contents inside it. For this example, we will be using the Elastislide. Hit the “Download Source” button on the page to download the zip file containing the plug in files. We will try to implement the demo given here (Example 1).

Let’s extract the zip file. You will have something like this inside the extracted folder.

Extracted jQuery Slider Files

Extracted jQuery Slider Files

So, here we can find all related JavaScript, CSS and images used for the demos. The demo, which we will implement with Repeater is shown inside the index.html (highlighted in image). You can directly run and see in browser.

Step 2: Analysis of Demo HTML Page

JavaScript and CSS Files Included

In Head section…

XML
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script src="js/modernizr.custom.17475.js"></script>

In Body section…

XML
<script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquerypp.custom.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>

So, we will also include these files in our aspx page.

HTML Markup for Image Slider

If you open and see the index.html page, you will find a HTML structure which loads all the images. (I have removed the not needed headers and other HTML.)

XML
<div class="container demo-1">
    <div class="main">
	<!-- Elastislide Carousel -->
	<ul id="carousel" class="elastislide-list">
  	    <li><a href="#">
  	    <img src="images/small/1.jpg" alt="image01" /></a></li>
	    <li><a href="#">
	    <img src="images/small/2.jpg" alt="image02" /></a></li>
	    <li><a href="#">
	    <img src="images/small/3.jpg" alt="image03" /></a></li>
	    <li><a href="#">
	    <img src="images/small/4.jpg" alt="image04" /></a></li>
	    <li><a href="#">
	    lt;img src="images/small/5.jpg" alt="image05" /></a></li>
	    <li><a href="#">
	    <img src="images/small/6.jpg" alt="image06" /></a></li>
	    <li><a href="#">
	    <img src="images/small/7.jpg" alt="image07" /></a></li>
	    <li><a href="#">
	    <img src="images/small/8.jpg" alt="image08" /></a></li>
	    <li><a href="#">
	    <img src="images/small/9.jpg" alt="image09" /></a></li>
	    <li><a href="#">
	    <img src="images/small/10.jpg" alt="image10" /></a></li>
	    <li><a href="#">
	    <img src="images/small/11.jpg" alt="image11" /></a></li>
	    <li><a href="#">
	    <img src="images/small/12.jpg" alt="image12" /></a></li>
	    <li><a href="#">
	    <img src="images/small/13.jpg" alt="image13" /></a></li>
	    <li><a href="#">
	    <img src="images/small/14.jpg" alt="image14" /></a></li>
	    <li><a href="#">
	    <img src="images/small/15.jpg" alt="image15" /></a></li>
	    <li><a href="#">
	    <img src="images/small/16.jpg" alt="image16" /></a></li>
	    <li><a href="#">
	    <img src="images/small/17.jpg" alt="image17" /></a></li>
	    <li><a href="#">
	    <img src="images/small/18.jpg" alt="image18" /></a></li>
	    <li><a href="#">
	    <img src="images/small/19.jpg" alt="image19" /></a></li>
	    <li><a href="#">
	    <img src="images/small/20.jpg" alt="image20" /></a></li>
	</ul>
	<!-- End Elastislide Carousel -->
    </div>
</div>

This structure is most important, because the classes added to the HTML controls are used inside the CSS and JavaScript files.

So, we just need to replace the “list items (li)” inside the “Unordered Lists” with Repeater Items, which eventually would look like the same structure and render all the image URLs inside List Items.

Step 3: Create a Web Application and Add one aspx Page

After adding the aspx page to the project, now we need to copy the js, css files and images from the “Downloaded plug in” folders. So, Solution Explorer would look like…

Solution Explorer View

Solution Explorer View

NOTE: We have maintained the exact folder structure as in the downloaded plug in. Only “small” folder inside “images” folder is copied with another the “nav.png” image used for “previous next” buttons.

Step 4: Let’s Design the aspx Page

Basically, we will copy the HTML present in index.html page and update it by adding one Repeater.
Now, the div would look like…

HTML
<div class="container demo-1">
    <div class="main">
	<ul id="carousel" class="elastislide-list">
  	    <asp:Repeater ID="mylist" runat="server">
		<ItemTemplate>
	  	    <li><a href="#">
			<asp:Image ID="Image1" runat="server" ImageUrl='<%# "images/small/" + Eval("image")%>' />
		        </a>
                    </li>
		</ItemTemplate>
            </asp:Repeater>
	</ul>
    </div>
</div>

:: Here ImageUrl Property is a combination of folders path and image name. Image Name is dynamically bound from the Datasource (explained in the next step), EVAL is used for this purpose only.
Next we will add the JavaScript and CSS files in the Page just like it appears in the index.html Page.
Now, the most important thing is to add the following script inside the body.

HTML
<script type="text/javascript">
    $('#carousel').elastislide();
</script>

This code actually invokes the Slider to work. carousel is the id of the ul (Unordered list) element in HTML. This elastislide(); method is present in the plug in js.

Step 5: Bind the Repeater from Code Behind

C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
	BindRepeater();
    }
}

/// <summary>
/// This method binds the Image Slider.
/// </summary>
private void BindRepeater()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("image");

    for (int i = 1; i <= 20; i++)
    {
	dt.Rows.Add(i + ".jpg");
    }

    mylist.DataSource = dt;
    mylist.DataBind();
}

This code is very simple. It binds the Repeater from a DataTable, which contains rows as image names. Image names are 1.jpg, 2.jpg till 19.jpg. You can put your image binding logic here to bind the Repeater.

Feedback Equips Me !!!

Please put your thoughts on the project by commenting below the blog. Like and share, if you liked it.

Image 4 Image 5

This article was originally posted at http://taditdash.wordpress.com?p=303

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website

taditdash.com

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn

Awards


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

 
QuestionGood Job Pin
King Fisher21-Mar-15 2:47
professionalKing Fisher21-Mar-15 2:47 
AnswerRe: Good Job Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)22-Mar-15 20:19
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)22-Mar-15 20:19 
Questionthanks buddy Pin
Member 1131071330-Dec-14 18:23
Member 1131071330-Dec-14 18:23 
AnswerRe: thanks buddy Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)31-Dec-14 19:48
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)31-Dec-14 19:48 
QuestionNot working inside accordianpane(IE 11 and chrome) Pin
sarveh1-Nov-14 3:53
sarveh1-Nov-14 3:53 
AnswerRe: Not working inside accordianpane(IE 11 and chrome) Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)1-Nov-14 11:14
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)1-Nov-14 11:14 
BugIssue with Opera and IE10+ Pin
Gaurav Aroraa27-Oct-14 10:28
professionalGaurav Aroraa27-Oct-14 10:28 
AnswerRe: Issue with Opera and IE10+ Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Oct-14 22:23
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Oct-14 22:23 
Questioncong sir for best article Pin
joginder-banger18-Aug-14 3:19
professionaljoginder-banger18-Aug-14 3:19 
AnswerRe: cong sir for best article Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Aug-14 3:25
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)18-Aug-14 3:25 
BugNot working properly with IE 11 Pin
hahahahahahheheheehehehe25-Jul-14 3:37
hahahahahahheheheehehehe25-Jul-14 3:37 
GeneralRe: Not working properly with IE 11 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Jul-14 7:42
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Jul-14 7:42 
Hi Bigyan,

I am really sorry that you are facing issues in IE 11. Thanks for letting me know. I will test in IE 11 and let you know.

Thanks a lot again for reporting this to me,

GeneralRe: Not working properly with IE 11 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Oct-14 22:23
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Oct-14 22:23 
GeneralGreat Article Pin
Patil Kishor24-Jul-14 20:06
Patil Kishor24-Jul-14 20:06 
GeneralRe: Great Article Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Jul-14 20:29
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Jul-14 20:29 
GeneralMy vote of 5 Pin
Maciej Los24-Jul-14 1:06
mveMaciej Los24-Jul-14 1:06 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Jul-14 1:50
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Jul-14 1:50 
GeneralRe: My vote of 5 Pin
Maciej Los24-Jul-14 2:12
mveMaciej Los24-Jul-14 2:12 
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Jul-14 2:16
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)24-Jul-14 2:16 
GeneralClean Code but Stylish Output... Pin
Suvabrata Roy23-Jul-14 2:10
professionalSuvabrata Roy23-Jul-14 2:10 
GeneralRe: Clean Code but Stylish Output... Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Jul-14 2:29
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Jul-14 2:29 
GeneralRe: Clean Code but Stylish Output... Pin
Suvabrata Roy23-Jul-14 2:36
professionalSuvabrata Roy23-Jul-14 2:36 
GeneralRe: Clean Code but Stylish Output... Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Jul-14 2:37
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)23-Jul-14 2:37 
GeneralRe: Clean Code but Stylish Output... Pin
Suvabrata Roy23-Jul-14 2:48
professionalSuvabrata Roy23-Jul-14 2:48 
GeneralMy vote of 5 Pin
Sampath Lokuge23-Jul-14 1:52
Sampath Lokuge23-Jul-14 1:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.