Let’s make an Image Slider in ASP.NET. I am using FlexSlider to make it. It is an Open source Image slider and it is widely popular. It has multiple options of viewing Image slides in different styles. You can visits its Official Website for more info on this.
ASP.NET Image Slider :
Step 1 :
Download the source files from Github.com.
Step 2 :
Copy the CSS, Fonts and JS folder from the sources in your solution as shown in the image below :
Step 3 :
Make an images folder in your project and copy any four images of your liking for our ASP.NET Image Slider.
These images will be displayed on our Image Slider.
Step 4 :
Create an ASPX web page with the name “FlexSliderDemo”, you can make your web page with any name. And with it as below :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FlexSliderDemo.aspx.cs" Inherits="FlexSliderDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<link href="css/demo.css" rel="stylesheet" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<script src="js/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
InitializeImageSlider();
});
function InitializeImageSlider() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
itemWidth: "100%",
itemHeight: 400
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/marvel1.jpg" />
</li>
<li>
<img src="images/marvel2.jpg" />
</li>
<li>
<img src="images/marvel3.jpg" />
</li>
<li>
<img src="images/marvel4.jpg" />
</li>
</ul>
</div>
</section>
</div>
</form>
</body>
</html>
This will make our ASP.NET Image Slider work like below :