File "tab-slider-text-vertical.html"
Full path: E:/sites/Single15/tinmung2007/webroot/XAMMP/htdocs/WEB-Than-Huu-Hai-Ngoai/SliderShow/jssor.slider.devpack/demos/tab-slider-text-vertical.html
File size: 9.59 KiB (9825 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></title>
</head>
<body style="background:#fff;">
<!-- Jssor Slider Begin -->
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jssor_slider3_init = function () {
var options = {
$AutoPlay: 0, //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation)
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$Idle: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation: 1, //[Optional] Steps to go for each navigation request by pressing arrow key, default value is 1.
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide, default value is 20
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 5, //[Optional] Space between each slide in pixels, default value is 0
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 2, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$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)
$ThumbnailNavigatorOptions: {
$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
$Rows: 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
$SpacingX: 0, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$SpacingY: 0, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
$Align: 0, //[Optional] The offset position to park thumbnail
$Orientation: 2, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
$NoDrag: true //[Optional] Disable drag or not, default value is false
}
};
var jssor_slider3 = new $JssorSlider$('slider3_container', options);
/*#region responsive code begin*/
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var parentWidth = jssor_slider3.$Elmt.parentNode.clientWidth;
if (parentWidth) {
var sliderWidth = parentWidth;
//keep the slider width no more than 701
sliderWidth = Math.min(sliderWidth, 701);
jssor_slider3.$ScaleWidth(sliderWidth);
}
else
$Jssor$.$Delay(ScaleSlider, 30);
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
</script>
<div id="slider3_container" style="position: relative; top: 0px; left: 0px; width: 701px; height: 302px; background: #fff; overflow: hidden; ">
<!-- Slides Container -->
<div data-u="slides" style="position: absolute; left: 99px; top: 0px; width: 600px; height: 300px; border: 1px solid gray; -webkit-filter: blur(0px); background-color: #fff; overflow: hidden;">
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">Slide 1 content, place any html here.</div>
<div data-u="thumb">Banner Rotator</div>
</div>
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">Slide 2 content, place any html here.</div>
<div data-u="thumb">Image Gallery</div>
</div>
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">Slide 3 content, place any html here.</div>
<div data-u="thumb">Image Slider</div>
</div>
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">Slide 4 content, place any html here.</div>
<div data-u="thumb">Tab Slider</div>
</div>
<div>
<div style="margin: 10px; overflow: hidden; color: #000;">Slide 5 content, place any html here.</div>
<div data-u="thumb">Carousel</div>
</div>
</div>
<!--#region ThumbnailNavigator Skin Begin -->
<style>
/* jssor slider thumbnail navigator skin 13 css */
/*
.jssort13 .p (normal)
.jssort13 .p:hover (normal mouseover)
.jssort13 .pav (active)
.jssort13 .pav:hover (active mouseover)
.jssort13 .pdn (mousedown)
*/
.jssort13 {
position: absolute;
width: 100px;
height: 150px;
}
.jssort13 .p {
POSITION: absolute;
WIDTH: 100px;
HEIGHT: 30px;
TOP: 0;
LEFT: 0;
padding: 0px;
}
.jssort13 .w {
cursor: pointer;
position: absolute;
WIDTH: 98px;
HEIGHT: 29px;
border: 1px solid gray;
top: -1px;
left: 0px;
}
.jssort13 .pav .w, .jssort13 .pdn .w {
border-right: 1px solid #fff;
}
.jssort13 .c {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
line-height: 28px;
text-align: center;
color: #000;
font-size: 13px;
}
.jssort13 .p .c, .jssort13 .pav:hover .c {
background-color: #eee;
}
.jssort13 .pav .c, .jssort13 .p:hover .c {
background-color: #fff;
}
</style>
<div data-u="thumbnavigator" class="jssort13" style="left: 0px; top: 0px;">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default; top:0px; left:0px; border-top: 1px solid gray;">
<div data-u="prototype" class="p">
<div class=w><div data-u="thumbnailtemplate" class="c"></div></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!--#endregion ThumbnailNavigator Skin End -->
<!-- Trigger -->
<script>
jssor_slider3_init();
</script>
</div>
<!-- Jssor Slider End -->
</body>
</html>