Hi Kavithav
You can make use of slider.
Refer below example. First bind the record from database and then apply the jquery plugin.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind
HTML
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
</div>
<!-- Add Arrows -->
<div class="swiper-button-next">
</div>
<div class="swiper-button-prev">
</div>
</div>
<style type="text/css">
.swiper-container {
width: 30%;
height: 100px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" />
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/BindData",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var json = response.d;
if (json.length == 0) {
$('.swiper-wrapper').append('<div class="swiper-slide">No rocords found</div>');
} else {
$.each(json, function (index, item) {
$('.swiper-wrapper').append('<div class="swiper-slide">Name : ' + item.Name + '<br />Number: ' + item.Number + '</div>');
});
}
new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
},
error: function (response) {
alert(response.responseText);
}
});
});
</script>
</div>
Namespaces
C#
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
Code
C#
[WebMethod]
public static List<Person> BindData()
{
List<Person> persons = new List<Person>();
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand("SELECT FirstName, HomePhone FROM Employees", con))
{
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
persons.Add(new Person
{
Name = sdr["FirstName"].ToString(),
Number = sdr["HomePhone"].ToString()
});
}
con.Close();
}
}
return persons;
}
public class Person
{
public string Name { get; set; }
public string Number { get; set; }
}
VB.Net
<WebMethod>
Public Shared Function BindData() As List(Of Person)
Dim persons As List(Of Person) = New List(Of Person)()
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(conString)
Using cmd As SqlCommand = New SqlCommand("SELECT FirstName, HomePhone FROM Employees", con)
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
persons.Add(New Person With {
.Name = sdr("FirstName").ToString(),
.Number = sdr("HomePhone").ToString()
})
End While
con.Close()
End Using
End Using
Return persons
End Function
Public Class Person
Public Property Name As String
Public Property Number As String
End Class
Screenshot