全宽半页响应滑块

我使用jssor为我的网页创建一个滑块，我需要我的滑块固定为半页滑块并且响应。因为当我缩小它仍然占据页面的整个宽度并固定在半页高度。全宽半页响应滑块
2017-06-19 safi mahmoud
有新的API $ScaleSize与jssor滑块25.0.6可以在此处https://www.jssor.com/script *
你可以让一个div拿一半的窗口，并在div填补jssor滑块。
<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
     <title>Full Screen Slider - Jssor Slider</title> 
     <style> 
      html, body { 
       /*position: fixed;*/ 
       margin: 0; 
       padding: 0; 
       width: 100%; 
       height: 100%; 
      } 
     </style> 
    </head> 
    <body style="font-family: Arial, Verdana, Sans-Serif;"> 
     <script type="text/javascript" src="../js/jssor.slider-25.0.6.min.js"></script> 
     <script> 
      jssor_slider1_init = function() { 

       var options = { 
        $AutoPlay: 0,          //[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) 
        $Idle: 1500,          //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
        $PauseOnHover: 1,         //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 
        $DragOrientation: 1,        //[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) 
        $ArrowKeyNavigation: 1,        //[Optional] Steps to go for each navigation request by pressing arrow key, default value is 1. 
        $SlideDuration: 800,        //Specifies default duration (swipe) for slide in milliseconds 

        $ArrowNavigatorOptions: {       //[Optional] Options to specify and enable arrow navigator or not 
         $Class: $JssorArrowNavigator$,     //[Requried] Class to create arrow navigator instance 
         $ChanceToShow: 2        //[Required] 0 Never, 1 Mouse Over, 2 Always 
        } 
       }; 

       var jssor_slider1 = new $JssorSlider$('slider1_container', options); 
       //responsive code begin 
       //you can remove responsive code if you don't want the slider scales while window resizing 
       function ScaleSlider() { 
        var parentNode = jssor_slider1.$Elmt.parentNode; 
        var parentWidth = parentNode.clientWidth; 
        if (parentWidth) { 
         var parentHeight = parentNode.clientHeight; 
         jssor_slider1.$ScaleSize(parentWidth, parentHeight); 
        } 
        else { 
         $Jssor$.$Delay(ScaleSlider, 30); 
        } 
       } 

       ScaleSlider(); 

       $Jssor$.$AddEvent(window, "load", ScaleSlider); 
       $Jssor$.$AddEvent(window, "resize", ScaleSlider); 
       $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); 
       //responsive code end 
      }; 
     </script> 

     <!-- Jssor Slider Begin --> 
     <div style="position:relative;top:0;left:0;width:50%;height:100%;overflow:hidden;"> 
      <div id="slider1_container" style="margin: 0 auto; position: relative; top: 0px; left: 0px; width: 800px; 
       height: 356px; background: #191919; overflow: hidden;"> 

       <!-- Loading Screen --> 
       <div data-u="loading" style="position:absolute;top:0px;left:0px;background:url('../img/loading.gif') no-repeat 50% 50%; background-color: rgba(0, 0, 0, .7);"></div> 

       <!-- Slides Container --> 
       <div data-u="slides" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 356px; overflow: hidden;"> 
        <div> 
         <img u="image" src="../img/alila/01.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/02.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/03.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/04.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/05.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/06.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/07.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/08.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/09.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/10.jpg" /> 
        </div> 

        <div> 
         <img u="image" src="../img/alila/11.jpg" /> 
        </div> 
        <div> 
         <img u="image" src="../img/alila/12.jpg" /> 
        </div> 
       </div> 

       <!--#region Arrow Navigator Skin Begin --> 
       <style> 
        /* jssor slider arrow navigator skin 05 css */ 
        /* 
        .jssora05l     (normal) 
        .jssora05r     (normal) 
        .jssora05l:hover   (normal mouseover) 
        .jssora05r:hover   (normal mouseover) 
        .jssora05l.jssora05ldn  (mousedown) 
        .jssora05r.jssora05rdn  (mousedown) 
        .jssora05l.jssora05lds  (disabled) 
        .jssora05r.jssora05rds  (disabled) 
        */ 
        .jssora05l, .jssora05r { 
         display: block; 
         position: absolute; 
         /* size of arrow element */ 
         width: 40px; 
         height: 40px; 
         cursor: pointer; 
         background: url(../img/a17.png) no-repeat; 
         overflow: hidden; 
        } 
        .jssora05l { background-position: -10px -40px; } 
        .jssora05r { background-position: -70px -40px; } 
        .jssora05l:hover { background-position: -130px -40px; } 
        .jssora05r:hover { background-position: -190px -40px; } 
        .jssora05l.jssora05ldn { background-position: -250px -40px; } 
        .jssora05r.jssora05rdn { background-position: -310px -40px; } 

        .jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; } 
        .jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; } 
       </style> 
       <!-- Arrow Left --> 
       <span u="arrowleft" class="jssora05l" style="top: 158px; left: 8px;"> 
       </span> 
       <!-- Arrow Right --> 
       <span u="arrowright" class="jssora05r" style="top: 158px; right: 8px"> 
       </span> 
       <!--#endregion Arrow Navigator Skin End --> 

       <!-- Trigger --> 
       <script> 
        jssor_slider1_init(); 
       </script> 
      </div> 
     </div> 
     <!-- Jssor Slider End --> 
    </body> 
    </html>
来源
2017-06-19 20:55:01 jssor
全宽半页响应滑块

回答

相关问题
