Ref:http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
I have checked your HTML Page and found that you have not given proper Id to tags and image path is not correct. You need to add the script in the end of Body tag. You need to add data-preview in li which you haved removed.
Refer this code
I have added Repeater in the code
HTML
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Elastislide - A Responsive Image Carousel</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Elastislide - A Responsive Image Carousel" />
<meta name="keywords" content="carousel, jquery, responsive, fluid, elastic, resize, thumbnail, slider" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<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>
</head>
<body>
<div class="container demo-4">
<!-- Codrops top bar -->
<!--/ Codrops top bar -->
<div class="main">
<div class="gallery">
<!-- Elastislide Carousel -->
<ul id="carousel" class="elastislide-list">
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<li data-preview='<%# Eval("LargeImage") %>'><a href="#">
<img src='<%# Eval("SmallImage") %>' /></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<!-- End Elastislide Carousel -->
<div class="image-preview">
<img id="preview" src="images/large/4.jpg" />
</div>
</div>
</div>
</div>
<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>
<script type="text/javascript">
// example how to integrate with a previewer
var current = 0,
$preview = $('#preview'),
$carouselEl = $('#carousel'),
$carouselItems = $carouselEl.children(),
carousel = $carouselEl.elastislide({
current: current,
minItems: 4,
onClick: function (el, pos, evt) {
changeImage(el, pos);
evt.preventDefault();
},
onReady: function () {
changeImage($carouselItems.eq(current), current);
}
});
function changeImage(el, pos) {
$preview.attr('src', el.data('preview'));
$carouselItems.removeClass('current-img');
el.addClass('current-img');
carousel.setCurrent(pos);
}
</script>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2]{new DataColumn("LargeImage",typeof(string)),
new DataColumn("SmallImage",typeof(string))});
dt.Rows.Add("images/large/4.jpg", "images/small/4.jpg");
dt.Rows.Add("images/large/5.jpg", "images/small/5.jpg");
dt.Rows.Add("images/large/6.jpg", "images/small/6.jpg");
dt.Rows.Add("images/large/11.jpg", "images/small/11.jpg");
dt.Rows.Add("images/large/12.jpg", "images/small/12.jpg");
dt.Rows.Add("images/large/13.jpg", "images/small/13.jpg");
dt.Rows.Add("images/large/14.jpg", "images/small/14.jpg");
dt.Rows.Add("images/large/15.jpg", "images/small/15.jpg");
this.rptImages.DataSource = dt;
this.rptImages.DataBind();
}
}
Screenshot
