Hi jordan,
Its working at my side please refer below sample and make the changes according to your need
HTML
<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: 1500px; height: 600px; 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: 1500px; 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: 600, //assign width
$SlideHeight: 600, //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;
}
@keyframes jssorl-oval {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.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; }
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
.jssora22l.jssora22lds (disabled)
.jssora22r.jssora22rds (disabled)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('img/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>
</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