Hi jordan,
I have created a sample which full fill your requirement you need to modify the code according to your need
HTML
<div>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="logo">
<a href="index.html">
<img src="images/logo/logo.png" alt=""></a></div>
</div>
<div class="col-md-10 col-sm-9 col-xs-6">
<div class="mgea-full-width">
<div class="header-right">
<div class="header-menu hidden-sm hidden-xs">
<div class="menu">
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">about</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Food Menu</a></li>
<li><a href="#">gallery</a></li>
<li><a href="contact-us.html">contact</a></li>
</ul>
</div>
</div>
<div class="search">
<div class="search-inner">
<a href="#"><i class="mdi mdi-magnify"></i></a>
</div>
</div>
</div>
<div class="search-inside" style="display: none;">
<a href="#" class="search-close"><i class="mdi mdi-close"></i></a>
<div class="search-overlay">
</div>
<div class="searchbar-inner">
<div class="search">
<form action="#">
<input type="search" placeholder="Search here">
<button type="submit">
<i class="mdi mdi-magnify"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile menu start -->
<div class="mobile-menu-area hidden-lg hidden-md">
<div class="container">
<div class="col-md-12">
<nav id="dropdown" style="display: block;">
<ul>
<li><a href="#">Home</a>
<ul class="dropdown_menu">
<li><a href="index.html">home page one</a></li>
<li><a href="index-2.html">home page two</a></li>
<li><a href="index-3.html">home page three</a></li>
<li><a href="index-4.html">home page four</a></li>
<li><a href="index-box.html">home page five</a></li>
<li><a href="index-box-fixed.html">home page six</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li class="mega-parent"><a href="#">Elements</a>
<ul class="mgea-menu">
<li class="mega-sub"><a href="#">Column one</a>
<ul class="mega-sub-item">
<li><a href="#">Accordion</a></li>
<li><a href="#">Tab</a></li>
<li><a href="#">table</a></li>
<li><a href="#">progressbar</a></li>
<li><a href="#">Alerts</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column two</a>
<ul class="mega-sub-item">
<li><a href="#">Audio</a></li>
<li><a href="#">vido</a></li>
<li><a href="#">gallery one</a></li>
<li><a href="#">Gallery two</a></li>
<li><a href="#">typhogrpahy</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column Three</a>
<ul class="mega-sub-item">
<li><a href="#">Testimonial</a></li>
<li><a href="#">brand</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">map</a></li>
</ul>
</li>
<li class="mega-sub"><a href="#">Column one</a>
<ul class="mega-sub-item">
<li><a href="#">Food menu item 1</a></li>
<li><a href="#">Food menu item 2</a></li>
<li><a href="#">Contact form</a></li>
<li><a href="#">Food product</a></li>
<li><a href="#">No sticky</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">gallery</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Mobile menu end -->
<div>
<div class="slider-content parallax" style="background-position: 50% 35px;">
<div class="container">
<div class="row">
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px;
width: 975px; height: 400px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-oval" style="position: absolute; top: 0px; left: 0px;
text-align: center; background-color: rgba(0,0,0,0.7);">
<img style="margin-top: -19.0px; position: relative; top: 50%; width: 38px; height: 38px;"
src="Backoffice/images/Gallery/Jellyfish.jpg" />
</div>
<div id="slider" runat="server" data-u="slides" style="cursor: default; position: relative;
top: 0px; left: 0px; width: 975px; height: 600px; overflow: hidden;">
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom: 16px; right: 16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width: 16px; height: 16px;">
</div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top: 0px; left: 8px; width: 40px;
height: 58px;" data-autocenter="2"></span><span data-u="arrowright" class="jssora22r"
style="top: 0px; right: 8px; width: 40px; height: 58px;" data-autocenter="2">
</span>
</div>
</div>
</div>
</div>
</div>
<div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/22.1.8/jssor.slider.min.js"
type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 100,
$SlideWidth: 975, //assign width
$SlideHeight: 400, //assign height
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<style type="text/css">
/* jssor slider loading skin oval css */
.jssorl-oval img
{
animation-name: jssorl-oval;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.jssorb05
{
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av
{
position: absolute; /* size of bullet elment */
width: 16px;
height: 16px;
background: url('img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div
{
background-position: -7px -7px;
}
.jssorb05 div:hover, .jssorb05 .av:hover
{
background-position: -37px -7px;
}
.jssorb05 .av
{
background-position: -67px -7px;
}
.jssorb05 .dn, .jssorb05 .dn:hover
{
background-position: -97px -7px;
}
.jssora22l, .jssora22r
{
display: block;
position: absolute; /* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('BackOffice/images/shoe_story/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l
{
background-position: -10px -31px;
}
.jssora22r
{
background-position: -70px -31px;
}
.jssora22l:hover
{
background-position: -130px -31px;
}
.jssora22r:hover
{
background-position: -190px -31px;
}
.jssora22l.jssora22ldn
{
background-position: -250px -31px;
}
.jssora22r.jssora22rdn
{
background-position: -310px -31px;
}
.jssora22l.jssora22lds
{
background-position: -10px -31px;
opacity: .3;
pointer-events: none;
}
.jssora22r.jssora22rds
{
background-position: -70px -31px;
opacity: .3;
pointer-events: none;
}
.welcome-about .read-more > a
{
background: #e54c2a none repeat scroll 0 0;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 16px 38px;
text-transform: uppercase;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.header
{
box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 99;
}
.header .logo
{
display: inline-block;
margin-bottom: -23px;
position: relative;
}
.header-right, .header-right .search
{
float: right;
}
.mgea-full-width
{
position: relative;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.menu ul li
{
position: relative;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
li
{
list-style: none;
}
.menu ul li a
{
color: #535353;
display: block;
font-size: 15px;
font-weight: bold;
padding: 50px 0 50px 32px;
text-transform: uppercase;
}
.menu ul li a:hover
{
color: #e54c2a;
}
.header-right .search
{
padding-left: 38px;
padding-top: 47px;
}
.header-right .search, .header-menu, .menu ul li
{
display: inline-block;
}
.header-right, .header-right .search
{
float: right;
}
.search-inside
{
position: absolute;
right: 0;
top: 35px;
width: 100%;
z-index: 99999999;
}
.search-inside a.search-close
{
color: #777;
font-size: 18px;
position: absolute;
right: -22px;
top: 12px;
}
.search-inner > a
{
color: #535353;
font-size: 22px;
font-weight: bold;
}
.searchbar-inner .search
{
position: relative;
}
.mdi
{
display: inline-block;
font: normal normal normal 24px/1 "Material Design Icons";
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.searchbar-inner .search input
{
background: #fff none repeat scroll 0 0;
border: 1px solid #ddd;
color: #535353;
font-size: 20px !important;
height: 50px;
z-index: 1;
}
.searchbar-inner .search button
{
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #777;
font-size: 24px;
position: absolute;
right: 10px;
top: 10px;
}
.mdi:hover
{
color: #e54c2a;
}
.grey-bg
{
background: #f1f1f1;
}
.row
{
margin-left: -15px;
margin-right: -15px;
}
h3.single-footer-title
{
color: #535353;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin: 0;
}
.mt-30
{
margin-top: 30px;
}
.single-footer-details ul
{
display: block;
padding-top: 10px;
}
ul
{
margin: 0px;
padding: 0px;
}
ol, ul
{
list-style: none;
}
.single-footer .open-list li
{
color: #535353;
margin-bottom: 5px;
text-transform: capitalize;
}
li
{
list-style: none;
}
.single-footer .open-list li span
{
font-weight: bold;
}
.single-footer.instagram ul li
{
padding-bottom: 15px;
padding-right: 15px;
}
.single-footer.instagram ul li
{
float: left;
width: 33.33%;
}
li
{
list-style: none;
}
.single-footer.instagram ul li a
{
display: block;
position: relative;
overflow: hidden;
}
a, button, input
{
outline: medium none;
color: #4FC1F0;
}
.single-footer.instagram ul li img
{
width: 100%;
}
img
{
max-width: 100%;
}
p
{
font-size: 14px;
font-weight: normal;
line-height: 24px;
color: #757575;
margin-bottom: 15px;
}
p
{
margin: 0 0 10px;
}
.newsletter-form input
{
background: none repeat scroll 0 0 #fff;
border: medium none;
color: #999999;
font-weight: 600;
}
input
{
border: 2px solid #eceff8;
height: 45px;
box-shadow: none;
padding-left: 10px;
font-size: 14px;
width: 100%;
}
.newsletter-form button
{
background: none repeat scroll 0 0 #e54c2a;
border: medium none;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: bold;
margin-top: 15px;
padding: 14px 38px;
text-transform: uppercase;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
a, button, input
{
outline: medium none;
color: #4FC1F0;
}
a, button
{
font-family: 'Raleway' , sans-serif;
}
.white-bg
{
background: #fff;
}
.ptb-20
{
padding: 20px 0;
}
.text-center
{
text-align: center;
}
.copyright
{
background: none repeat scroll 0 0 #e54c2a;
}
p
{
font-size: 14px;
font-weight: normal;
line-height: 24px;
color: #757575;
margin-bottom: 15px;
}
.copyright p a
{
color: #fff;
font-weight: bold;
}
a, button, input
{
outline: medium none;
color: #4FC1F0;
}
.copyright p
{
color: #fff;
font-size: 13px;
text-transform: capitalize;
}
.copyright p
{
margin: 0;
}
.pattern-fixed.pattern
{
background: url(images/bg/pattern.png) repeat fixed 0 0;
}
.boxed-layout .wrapper
{
margin: auto;
position: relative;
width: 1500px;
}
.white-bg
{
background: #fff;
}
.boxed-layout .sticky
{
left: 0;
right: 0;
width: 1500px;
}
.sticky
{
-webkit-animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
left: 0;
margin: auto;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
}
img
{
width: 975;
}
</style>
</div>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
getSlider();
}
public void getSlider()
{
DataTable dtProductTable = new DataTable();
dtProductTable.Columns.Add("ProductID");
dtProductTable.Columns.Add("ColorID");
dtProductTable.Columns.Add("ProductName");
dtProductTable.Rows.Add(1, 1, "Chrysanthemum");
dtProductTable.Rows.Add(2, 2, "Desert");
dtProductTable.Rows.Add(3, 3, "Hydrangeas");
dtProductTable.Rows.Add(4, 4, "Jellyfish");
dtProductTable.Rows.Add(5, 5, "Koala");
dtProductTable.Rows.Add(6, 1, "Lighthouse");
dtProductTable.Rows.Add(7, 2, "Penguins");
dtProductTable.Rows.Add(8, 3, "Tulips");
dtProductTable.Rows.Add(9, 4, "Product10");
dtProductTable.Rows.Add(10, 5, "Product1");
dtProductTable.Rows.Add(11, 1, "Product2");
dtProductTable.Rows.Add(12, 2, "Product3");
dtProductTable.Rows.Add(13, 3, "Product4");
dtProductTable.Rows.Add(14, 4, "Product5");
dtProductTable.Rows.Add(15, 5, "Product6");
dtProductTable.Rows.Add(16, 1, "Product7");
dtProductTable.Rows.Add(17, 2, "Product8");
dtProductTable.Rows.Add(18, 3, "Product9");
string str = string.Empty;
int i = 0;
for (i = 0; i < dtProductTable.Rows.Count; i++)
{
str += @" <div>
<img data-u='image' src='Backoffice/images/Category/" + dtProductTable.Rows[i]["ProductName"].ToString() + ".jpg" + @"' />
</div>";
}
slider.InnerHtml = str;
}
Screenshot
