File "responsive-slider-div-span.html"
Full path: E:/sites/Single15/tinmung2007/webroot/XAMMP/htdocs/WEB-Than-Huu-Hai-Ngoai/SliderShow/jssor.slider.devpack/demos-jquery/responsive-slider-div-span.html
File size: 8.04 KiB (8236 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="font-family:Arial, Verdana;background-color:#fff;">
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/jssor.slider.min.js"></script>
<script>
jQuery(document).ready(function ($) {
//Reference https://www.jssor.com/development/tip-make-responsive-slider.html
var options = {
$AutoPlay: 1, //[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)
$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),
};
var jssor_slider2 = new $JssorSlider$('slider2_container', options);
/*#region responsive code begin*/
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
//reserve blank width for margin+padding: margin+padding-left (10) + margin+padding-right (10)
var paddingWidth = 20;
//minimum width should reserve for text
var minReserveWidth = 225;
var parentElement = jssor_slider2.$Elmt.parentNode;
//evaluate parent container width
var parentWidth = parentElement.clientWidth;
if (parentWidth) {
//exclude blank width
var availableWidth = parentWidth - paddingWidth;
//calculate slider width as 70% of available width
var sliderWidth = availableWidth * 0.7;
//slider width is maximum 600
sliderWidth = Math.min(sliderWidth, 600);
//slider width is minimum 200
sliderWidth = Math.max(sliderWidth, 200);
var clearFix = "none";
//evaluate free width for text, if the width is less than minReserveWidth then fill parent container
if (availableWidth - sliderWidth < minReserveWidth) {
//set slider width to available width
sliderWidth = availableWidth;
//slider width is minimum 200
sliderWidth = Math.max(sliderWidth, 200);
clearFix = "both";
}
//clear fix for safari 3.1, chrome 3
var toClearElment = $Jssor$.$GetElement("clearFixDiv");
toClearElment && (toClearElment.style["clear"] = clearFix);
jssor_slider2.$ScaleWidth(sliderWidth);
}
else
$Jssor$.$Delay(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*#endregion responsive code end*/
});
</script>
<div style="display: block; overflow: hidden; margin: 20px auto 0 auto; padding: 10px 5px 5px 10px; width: 96%; max-width:940px; min-width: 240px; border: 1px solid #ccc; background-color: #fff; box-shadow: 2px 2px 10px 2px #dddddd; -webkit-box-shadow: 0px 0px 5px 0px #dddddd; font-size: .8em; line-height: 1.5em;">
<!-- Jssor Slider Begin -->
<div id="slider2_container" style="position: relative; margin: 0px 5px 5px 0px; float: left; top: 0px; left: 0px; width: 600px;
height: 300px; overflow: hidden;">
<!-- Slides Container -->
<div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><img data-u="image" src="../img/gallery/980x380/001.jpg" />
<div style="position:absolute;left:100px;top:80px;width:110px;height:40px;font-size:36px;color:#fff;line-height:40px;">Resize</div>
<div style="position:absolute;left:230px;top:80px;width:120px;height:40px;font-size:36px;color:#fff;line-height:40px;">Window</div>
<div style="position:absolute;left:380px;top:80px;width:130px;height:40px;font-size:36px;color:#fff;line-height:40px;">Please!</div>
</div>
<div><img data-u="image" src="../img/gallery/980x380/002.jpg" />
<div style="position:absolute;left:100px;top:80px;width:110px;height:40px;font-size:36px;color:#fff;line-height:40px;">Resize</div>
<div style="position:absolute;left:230px;top:80px;width:120px;height:40px;font-size:36px;color:#fff;line-height:40px;">Window</div>
<div style="position:absolute;left:380px;top:80px;width:130px;height:40px;font-size:36px;color:#fff;line-height:40px;">Please!</div>
</div>
<div><img data-u="image" src="../img/gallery/980x380/003.jpg" />
<div style="position:absolute;left:100px;top:80px;width:110px;height:40px;font-size:36px;color:#fff;line-height:40px;">Resize</div>
<div style="position:absolute;left:230px;top:80px;width:120px;height:40px;font-size:36px;color:#fff;line-height:40px;">Window</div>
<div style="position:absolute;left:380px;top:80px;width:130px;height:40px;font-size:36px;color:#fff;line-height:40px;">Please!</div>
</div>
<div><img data-u="image" src="../img/gallery/980x380/004.jpg" />
<div style="position:absolute;left:100px;top:80px;width:110px;height:40px;font-size:36px;color:#fff;line-height:40px;">Resize</div>
<div style="position:absolute;left:230px;top:80px;width:120px;height:40px;font-size:36px;color:#fff;line-height:40px;">Window</div>
<div style="position:absolute;left:380px;top:80px;width:130px;height:40px;font-size:36px;color:#fff;line-height:40px;">Please!</div>
</div>
</div>
</div>
<!-- Jssor Slider End -->
<div id="clearFixDiv" style="display: table; padding: 5px; margin: 0px 5px 5px 0px; border: 1px solid #ccc;">
<img src="../img/icons/icon_chrome.png" style="float: left; margin-right: 5px;" />
<p style="margin:0px;">Jssor Slider is responsive touch swipe javascript slider, <strong>Responsive Web Design (RWD)</strong> is a new web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from desktop computer monitors to mobile phones).</p>
</div>
<p style="margin-top:10px;"><span style="padding: 2px; background-color: #ddd;">Jssor Slider designed with (RWD) adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images.</span></p>
<p style="margin-top:0px;">The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.</p>
<p style="margin-top:0px;">Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.</p>
<p style="margin-top:0px;">Jssor Slider responds to window resizing, it scales smoothly, it keeps correct ratio, and animation is running with no stop. Wow, touch swipe still works great.</p>
<p style="margin-top:0px; font-weight: bold;">Resize window to see how it works!</p>
</div>
</body>
</html>