File "thumbnail-091.html"
Full path: E:/sites/Single15/tinmung2007/webroot/XAMMP/htdocs/WEB-Than-Huu-Hai-Ngoai/SliderShow/jssor.slider.devpack/skin/thumbnail-091.html
File size: 4.23 KiB (4336 bytes)
MIME-type:
Charset: utf-8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Navigator Skin 091 - Jssor Slider</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<script src="../js/jssor.slider.min.js" type="text/javascript"></script>
<script>
init_jssor_slider1 = function (containerId) {
var options = {
$Loop: 0,
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$ThumbnailNavigatorOptions: { //[Optional] Options to specify and enable thumbnail navigator or not
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$SpacingX: 0, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$Cols: 1, //[Optional] Number of pieces to display, default value is 1
$Align: 0, //[Optional] The offset position to park thumbnail
$Orientation: 2,
$NoDrag: true
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
<!--#region Jssor Slider Begin -->
<div id="slider1_container" style="position: relative; width: 980px; height: 380px; overflow: hidden;">
<!-- Slides Container -->
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<div>
<img data-u="image" src="img/slide.png" />
<div u="thumb">Slide description #001</div>
</div>
<div>
<img data-u="image" src="img/slide.png" />
<div u="thumb">Slide description #002</div>
</div>
<div>
<img data-u="image" src="img/slide.png" />
<div u="thumb">Slide description #003</div>
</div>
<div>
<img data-u="image" src="img/slide.png" />
<div u="thumb">Slide description #004</div>
</div>
<div>
<img data-u="image" src="img/slide.png" />
<div u="thumb">Slide description #005</div>
</div>
<div>
<img data-u="image" src="img/slide.png" />
<div u="thumb">Slide description #006</div>
</div>
</div>
<!--#region Thumbnail Navigator Skin Begin -->
<!-- Help: https://www.jssor.com/development/slider-with-thumbnail-navigator.html -->
<div u="thumbnavigator" style="position:absolute;bottom:0px;left:0px;width:980px;height:50px;color:#FFF;overflow:hidden;cursor:default;background-color:rgba(0,0,0,.5);">
<div u="slides">
<div u="prototype" style="position:absolute;top:0;left:0;width:980px;height:50px;">
<div u="thumbnailtemplate" style="position:absolute;top:0;left:0;width:100%;height:100%;font-family:verdana;font-weight:normal;line-height:50px;font-size:16px;padding-left:10px;box-sizing:border-box;"></div>
</div>
</div>
</div>
<!--#endregion Thumbnail Navigator Skin End -->
<!-- Trigger -->
<script>
init_jssor_slider1("slider1_container");
</script>
</div>
<!--#endregion Jssor Slider End -->
</body>
</html>