XAMMPhtdocsWEB-Than-Huu-Hai-NgoaiSliderShowjssor.slider.devpackdemos

File "vertical-slider.html"

Full path: E:/sites/Single15/tinmung2007/webroot/XAMMP/htdocs/WEB-Than-Huu-Hai-Ngoai/SliderShow/jssor.slider.devpack/demos/vertical-slider.html
File size: 5.81 KiB (5951 bytes)
MIME-type:
Charset: utf-8

Download   Open   Back 



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Vertical Slider - Jssor Slider</title>
</head>
<body style="margin:0;padding:0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; background-color: #262626;">
    
    <!-- #region Jssor Slider Begin -->
    <!-- Generator: Jssor Slider Maker -->
    <!-- Source: https://www.jssor.com -->
    <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
    <script type="text/javascript">
        jssor_1_slider_init = function() {

            var jssor_1_options = {
              $AutoPlay: 1,
              $DragOrientation: 2,
              $PlayOrientation: 2,
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $Orientation: 2
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*#region responsive code begin*/

            var MAX_WIDTH = 980;

            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                    jssor_1_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*#endregion responsive code end*/
        };
    </script>
    <style>
        /* jssor slider loading skin spin css */
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }


        .jssorb031 {position:absolute;}
        .jssorb031 .i {position:absolute;cursor:pointer;}
        .jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
        .jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
        .jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
        .jssorb031 .i.idn {opacity:.3;}
    </style>
    <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:380px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
            <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="../svg/loading/static-svg/spin.svg" />
        </div>
        <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/gallery/980x380/001.jpg" />
                <div style="position:absolute;top:57px;left:92px;width:400px;height:250px;z-index:0;background-color:rgba(255,188,5,0.8);font-size:16px;color:#ffffff;line-height:30px;text-align:left;padding:10px;box-sizing:border-box;">Settings <br /><br />
                    Layout -> Slide -> Orientation: Vertical<br /> 
                    Options -> Drag -> Orientation: Vertical
                </div>
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/002.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/003.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/004.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/005.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/006.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/007.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/008.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/009.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/010.jpg" />
            </div>
            <div>
                <img data-u="image" src="../img/gallery/980x380/011.jpg" />
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb031" style="position:absolute;bottom:12px;right:12px;" data-autocenter="2" data-scale="0.5" data-scale-right="0.75">
            <div data-u="prototype" class="i" style="width:12px;height:12px;">
                <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
    </div>
    <script type="text/javascript">jssor_1_slider_init();</script>
    <!-- #endregion Jssor Slider End -->
</body>
</html>

PHP File Manager