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

File "loading-003-oval.html"

Full path: E:/sites/Single15/tinmung2007/webroot/XAMMP/htdocs/WEB-Than-Huu-Hai-Ngoai/SliderShow/jssor.slider.devpack/skin/loading-003-oval.html
File size: 3.95 KiB (4041 bytes)
MIME-type:
Charset: utf-8

Download   Open   Back 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading skin 003 oval - 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
            };

            var jssor_slider1 = new $JssorSlider$(containerId, options);
        };
    </script>

    <!--#region Jssor Slider Begin -->

    <style>
        /* jssor slider loading skin oval css */

        .jssorl-003-oval img {
            animation-name: jssorl-003-oval;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-003-oval {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
    
    <div id="slider1_container" style="position: relative; width: 980px; height: 380px; overflow: hidden;">
        <!-- Help: https://www.jssor.com/development/slider-with-loading-screen.html -->
        <!-- Loading Screen -->
        <div data-u="loading" class="jssorl-003-oval" 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/oval.svg" />
        </div>

        <!-- Slides Container --> 
        <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 980px; height: 380px;
            overflow: hidden;">
            <div>
                <div class="jssorl-003-oval" 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/oval.svg" />
                </div>
            </div>
            <div>
                <div class="jssorl-003-oval" 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/oval.svg" />
                </div>
            </div>
            <div>
                <div class="jssorl-003-oval" 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/oval.svg" />
                </div>
            </div>
            <div>
                <div class="jssorl-003-oval" 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/oval.svg" />
                </div>
            </div>
        </div>

        <!-- Trigger -->
        <script>
            init_jssor_slider1("slider1_container");
        </script>
    </div>
    <!--#endregion Jssor Slider End -->
</body>
</html>

PHP File Manager