<div style="width: 600px; max-width: 100%; margin: 0 auto;">
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:800px;height:456px;overflow:hidden;visibility:hidden;background-color:#24262e;">
<div data-u="loading" style="position:absolute;top:0px;left:0px;background:url(http://www.jssor.com/theme/img/loading.gif) no-repeat 50% 50%;background-color:rgba(0, 0, 0, 0.7);"></div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//01.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-01.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//02.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-02.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//03.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-03.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//04.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-04.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//05.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-05.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//06.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-06.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//07.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-07.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//08.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-08.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//09.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-09.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//10.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-10.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//11.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-11.jpg" />
</div>
<div>
<img data-u="image" src="https://www.jssor.com/demos/img/alila//12.jpg" />
<img data-u="thumb" src="https://www.jssor.com/demos/img/alila//thumb-12.jpg" />
</div>
<a data-u="any" href="https://www.jssor.com" style="display:none">javascript slider</a>
</div>
<div data-u="thumbnavigator" class="jssort01" style="position:absolute;left:0px;bottom:0px;width:800px;height:100px;" data-autocenter="1">
<div data-u="slides" style="cursor: default;">
<div data-u="prototype" class="p">
<div class="w">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
<div class="c"></div>
</div>
</div>
</div>
<span data-u="arrowleft" class="jssora05l" style="top:158px;left:8px;width:40px;height:40px;"></span>
<span data-u="arrowright" class="jssora05r" style="top:158px;right:8px;width:40px;height:40px;"></span>
</div>
</div>
.jssora05l, .jssora05r {
display: block;
position: absolute;
width: 40px;
height: 40px;
cursor: pointer;
background: url('http://www.jssor.com/theme/img/a17.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
.jssort01 .p { position: absolute; top: 0; left: 0; width: 72px; height: 72px; }
.jssort01 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.jssort01 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.jssort01 .c { position: absolute; top: 0px; left: 0px; width: 68px; height: 68px; border: #000 2px solid; box-sizing: content-box; background: url('http://www.jssor.com/theme/img/t01.png') -800px -800px no-repeat;}
.jssort01 .pav .c { top: 2px; left: 2px; width: 68px; height: 68px; border: #000 0px solid; background-position: 50% 50%;}
.jssort01 .p:hover .c { top: 0px; left: 0px; width: 70px; height: 70px; border: #fff 1px solid; background-position: 50% 50%;}
.jssort01 .p.pdn .c { background-position: 50% 50%; width: 68px; height: 68px; border: #000 2px solid;}
* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c { width: 72px; height: 72px; }
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:1200,x:0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var jssor_1_options = {
$AutoPlay: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Cols: 10,
$SpacingX: 8,
$SpacingY: 8,
$Align: 360
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 800);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
};
jssor_1_slider_init();
<script src='//bizweb.dktcdn.net/100/005/795/themes/534730/assets/jquery-2.2.4.min.js?1495533194821' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/23.1.5/jssor.slider.min.js' type='text/javascript'></script>