ASP.NET Repeater with jQuery Slider

Image Slider with Repeater

Image Slider with Repeater


In this Blog, we will learn how to integrate one jQuery Slider Plugin 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 Plugin

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

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

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

<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="#"><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 Plugin” 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 Plugin. 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…

<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, most important thing is to add the following script inside the body.

<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 Plugin js.

Step-5 : Bind the Repeater from Code Behind

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.

Advertisements

19 thoughts on “ASP.NET Repeater with jQuery Slider

    • Hi Guru,

      Thanks for reading the Blog. Glad it helped you. πŸ™‚

      Refer “Step-2 : Analysis of Demo HTML Page”, where I mentioned to add the jQuery library reference in body section. You can also include that in head section. But don’t duplicate the same in head as well as body. There should be only one reference declared in page to avoid conflict and overhead.

      I added that in body section as it was did in the Demo HTML page in the Plugin. πŸ™‚

      Regards,
      Tadit

      Like

    • Hello Luis,

      Thanks for reading the Blog. πŸ™‚

      There is no such reason why I put those scripts in the body section. I just tried to keep the same structure as in the demo HTML page present in the Plugin.
      You can put those in head section as well. Only thing you need to do is that you have to call the Plugin method inside $(document).ready(); to initiate the Slider, like…

      <script type="text/javascript">
          $(document).ready(function(){    
              $('#carousel').elastislide();
          });
      </script>
      

      Thanks,
      Tadit

      Like

    • Hi KEN,

      Thanks for reading the Blog. πŸ™‚

      When you store images in Database, you either store the URLs or the Paths/Names. If you store paths, then it just a matter of getting those in a DataTable and bind that to the Repeater.

      Feedback taken. Will come up with a Blog in future. Adding to Todo. πŸ™‚

      Thanks,
      Tadit

      Like

      • Yes sir I’ve downloaded it already but codes seems difficult to understand (hehe sorry for my bad English) .
        I tried to put this codes twice:

        Elastislide A Responsive Image Carousel

        Example 1
        Example 2
        Example 3
        Example 4




















        Resize the browser to see how the carousel adapts

        Example 1: A minimum of 3 (default) images are always visible.

        $( ‘#carousel’ ).elastislide();

        First one works well.

        But the the result of the second codes doesn’t work properly..
        😦 ..
        I know you can help me Sir .. thank you in advance πŸ™‚
        and also thanks for replying on my comment πŸ™‚

        Liked by 1 person

  1. aww.. Sorry Sir.. the codes I’ve entered twice is this:

    Elastislide A Responsive Image Carousel

    Example 1
    Example 2
    Example 3
    Example 4




















    Resize the browser to see how the carousel adapts

    Example 1: A minimum of 3 (default) images are always visible.

    $( ‘#carousel’ ).elastislide();

    Hope it appers as codes not result.. πŸ˜€

    Liked by 1 person

    • Hey KEN,

      I don’t understand how exactly you are trying this. I don’t work in PHP, so I don’t know what control you are using and how you are binding that with the images. Please see the Developer Tool Console Tab, if there are any errors or not. If you find any error, correct them.

      If the images are missing, that means issue is with the image URLs.

      Thanks,
      Tadit

      Like

  2. Hi taditdash,
    I have problem with speed. 500 is set by default. I wan to increase but no effect. I changed the value in jquery.elastislide.js (speed : 50) and also tried to change in function _validate : function() { this.options.speed = 500; value but no effect. Can you help me to fix this? Further I need to show only one image at one time and need navigation to move on next and previous image. Please help.

    Thanks

    Like

  3. Hi Mate,

    You have implemented a nice Slider.
    I have only one query . Can we make the images in the repeater Hyperlinks or Clickable, means all the images can go to the
    different URLs.
    Please help me out on this.

    Thanks in Advance,
    Nitin Kumar Tyagi

    Liked by 1 person

    • Hi Nitin,

      Thanks for reading the Blog. πŸ™‚

      Yes you can add HyprLinks. Actually the tag is already added in the markup, you can check. You just need to assign proper URL to it.

      Thanks,
      Tadit

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s