File "responsive-slider-float-text.html"
Full path: E:/sites/Single15/tinmung2007/webroot/XAMMP/htdocs/WEB-Than-Huu-Hai-Ngoai/SliderShow/jssor.slider.devpack/demos/responsive-slider-float-text.html
File size: 7.65 KiB (7838 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/jssor.slider.min.js"></script>
<script>
jssor_slider1_init = 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_slider1 = new $JssorSlider$('slider1_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 = 150;
var parentElement = jssor_slider1.$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);
//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);
}
jssor_slider1.$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 style="display: block; 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="slider1_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>
<!-- Trigger -->
<script>
jssor_slider1_init();
</script>
</div>
<!-- Jssor Slider End -->
<img src="../img/icons/icon_chrome.png" style="float: left; margin-right: 5px;" /><p style="margin-top: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>
<p style="margin-top:0px;">Jssor Slider designed with (RWD) adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images.</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>