In
this article I am going to explain how to implement carousel image slider in
asp net using flexisel responsive jquery.
In
the previous article I have explained how to get the public IP address ofvisitors and how to merge two or more datatables in c# using C# and vb.net.
Description:
To
implement this functionality I am using flexisel responsive jquery plugin.
Implementation:
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/jquery.flexisel.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
$(window).load(function
() {
$("#imagecarousel").flexisel({
visibleItems: 4,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint: 480,
visibleItems: 1
},
landscape: {
changePoint: 640,
visibleItems: 2
},
tablet: {
changePoint: 768,
visibleItems: 3
}
}
});
});
</script>
Complete
HTML markup of webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/jquery.flexisel.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="imagecarousel">
<asp:Repeater ID="mylist" runat="server">
<ItemTemplate>
<li><a>
<asp:Image ID="Image1" runat="server"
Width="150px"
ImageUrl='<%# Eval("PhotoPath","~/img/{0}") %>' /><br />
<asp:Label ID="lbl" runat="server"
Text='<%# Bind("photoname") %>'></asp:Label>
</a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<script>
$(window).load(function
() {
$("#imagecarousel").flexisel({
visibleItems: 4,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint: 480,
visibleItems: 1
},
landscape: {
changePoint: 640,
visibleItems: 2
},
tablet: {
changePoint: 768,
visibleItems: 3
}
}
});
});
</script>
</form>
</body>
</html>
Build
and run the project.
DEMO:
In this article we have learn how to implement carousel image slider in asp.net. I hope you enjoyed this article. Please post you comment, query and feedback about this article. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.
.png)
Hi Administrator,
ReplyDeleteI looking for download source of post, but I don't see it, could you share source help to me.
Hi ,pls share the stylesheet which u hv refered
ReplyDeleteI have upload the CSS and JS files. Now you can download.
Delete