jssor-slider
Version:
Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD
84 lines (75 loc) • 4.22 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading skin 004 double tail spin - 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 double-tail-spin css */
.jssorl-004-double-tail-spin img {
animation-name: jssorl-004-double-tail-spin;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-004-double-tail-spin {
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-004-double-tail-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/double-tail-spin.svg" />
</div>
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 980px; height: 380px;
overflow: hidden;">
<div>
<div class="jssorl-004-double-tail-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/double-tail-spin.svg" />
</div>
</div>
<div>
<div class="jssorl-004-double-tail-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/double-tail-spin.svg" />
</div>
</div>
<div>
<div class="jssorl-004-double-tail-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/double-tail-spin.svg" />
</div>
</div>
<div>
<div class="jssorl-004-double-tail-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/double-tail-spin.svg" />
</div>
</div>
</div>
<!-- Trigger -->
<script>
init_jssor_slider1("slider1_container");
</script>
</div>
<!--#endregion Jssor Slider End -->
</body>
</html>