如何改变Jssor图像滑块的尺寸，同时又不失去iPhone设备上的响应性、图像纵横比等特性?

The website I'm developing is responsive in nature i.e. the website design gets adjust according to the device on which it is browsed. I've used Bootstrap framework for it.

我正在开发的网站在本质上是响应性的，即网站设计根据它所浏览的设备进行调整。我用过Bootstrap框架。

I'm using Jssor JQuery Image slider in my website. It's working fine and perfect for me on all devices and all popular well-known browsers. The only issue I'm facing is when it is viewed on iPhone the size of sliding images in Jssor slider should get changed to dimensions 460 px * 280 px. In other words, the Jssor image slider should look somewhat bigger than the current size. But while doing this the aspect ratio of the images appearing in slider should be maintained.

我在我的网站上使用Jssor JQuery图像滑块。它在所有设备和所有流行的知名浏览器上运行良好，非常适合我。我所面临的唯一问题是，当它在iPhone上被浏览时，Jssor滑动条上的滑动图像的大小应该被更改为460像素* 280像素。换句话说，Jssor图像滑块看起来应该比当前的大小要大一些。但是在这样做的同时，滚动条中出现的图像的纵横比应该被保持。

Also when the website is viewed on iPhone the image slider should occupy the whole horizontal screen. That is the image slider shouldn't have any white space appearing around the slider. Currently two vertical blank bars are appearing on both sides of the slider.

同样，当在iPhone上浏览网站时，图像滑块应该占据整个水平屏幕。也就是说，图像滑块不应该在滑块周围出现任何空格。目前，两个垂直的空白栏出现在滑块的两边。

Initially when the website is viewed on a browser on PC or laptop the resolution of slider images is 940 px * 370 px and it gets auto adjust as per the size of the device on which it it browsed.

最初，当网站在电脑或笔记本电脑上的浏览器上浏览时，滑块图像的分辨率是940像素* 370像素，它会根据浏览设备的大小自动调整。

The said dimension change should happen only on iPhone and not on any other devices. On other devices it's working absolutely fine and perfect. Also the aspect ratio of the images should not get disturb in this process.

上述尺寸变化只会发生在iPhone上，而不会发生在任何其他设备上。在其他设备上，它运行得非常完美。在此过程中，图像的纵横比也不应受到干扰。

For your reference I'm putting below the HTML code and jQuery code of the slider. All the necessary library files have been included.

为了您的参考，我将放在滑块的HTML代码和jQuery代码下面。所有必要的库文件都包括在内。

HTML code :

HTML代码:

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 940px; height: 370px; overflow: hidden; ">

      <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
        <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
      </div>     

      <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 940px; height: 370px; overflow: hidden;">
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Finlandia_1413041875.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute;left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute;left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
      </div>        
      <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">           
        <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
      </div>        
      <style>
      .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
        background: url(img/b05.png) no-repeat;
        overflow: hidden;
        cursor: pointer;
      }

      .jssorb05 div {
        background-position: -7px -7px;
      }

      .jssorb05 div:hover, .jssorb05 .av:hover {
        background-position: -37px -7px;
      }

      .jssorb05 .av {
        background-position: -67px -7px;
      }

      .jssorb05 .dn, .jssorb05 .dn:hover {
        background-position: -97px -7px;
      }
      .jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
        position: absolute;
        cursor: pointer;
        display: block;
        background: url(img/a12.png) no-repeat;
        overflow: hidden;
      }

      .jssora12l {
        background-position: -16px -37px;
      }

      .jssora12r {
        background-position: -75px -37px;
      }

      .jssora12l:hover {
        background-position: -136px -37px;
      }

      .jssora12r:hover {
        background-position: -195px -37px;
      }

      .jssora12ldn {
        background-position: -256px -37px;
      }

      .jssora12rdn {
        background-position: -315px -37px;
      }
      .captionOrange, .captionBlack {
        color: #fff;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
      }
      .captionOrange {
        background: #EB5100;
        background-color: rgba(235, 81, 0, 0.6);
      }
      .captionBlack {
        font-size:16px;
        background: #000;
        background-color: rgba(0, 0, 0, 0.4);
      }
      a.captionOrange, A.captionOrange:active, A.captionOrange:visited {
        color: #ffffff;
        text-decoration: none;
      }
      a.captionOrange:hover {
        color: #eb5100;
        text-decoration: underline;
        background-color: #eeeeee;
        background-color: rgba(238, 238, 238, 0.7);
      }
      .bricon {
        background: url(img/browser-icons.png);
      }
    </style>       
    <span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;"></span>
    <span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px"></span>        
      <a style="display: none" href="http://www.jssor.com">javascript</a>
    </div>

jQuery code :

jQuery代码:

<script>
    jQuery(document).ready(function ($) {

      var _SlideshowTransitions = [{ $Duration: 1200, $Opacity: 2 }];

      var options = {
        $AutoPlay: 1,                                    
        $AutoPlaySteps: 1,                                  
        $Idle: 3000,                            
        $PauseOnHover: 1,                               
        $ArrowKeyNavigation: true,                          
        $SlideDuration: 500,                                
        $MinDragOffsetToSlide: 20,                          
        $SlideSpacing: 0,                                   
        $Cols: 1,                                  
        $Align: 0,                                
        $UISearchMode: 1,                                   
        $PlayOrientation: 1,                                
        $DragOrientation: 3,                                

        $SlideshowOptions: {                                
          $Class: $JssorSlideshowRunner$,                 
          $Transitions: _SlideshowTransitions,            
          $TransitionsOrder: 1,                           
          $ShowLink: true                                    
        },

        $BulletNavigatorOptions: {                                
          $Class: $JssorBulletNavigator$,                       
          $ChanceToShow: 2,                               
          $Steps: 1,                                      
          $Rows: 1,                                      
          $SpacingX: 10,                                   
          $SpacingY: 10,                                   
          $Orientation: 1                                 
        },

        $ArrowNavigatorOptions: {
          $Class: $JssorArrowNavigator$,              
          $ChanceToShow: 2,                               
          $Steps: 1                                       
        }
      };
      var jssor_slider1 = new $JssorSlider$("slider1_container", options);

      function ScaleSlider() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if (parentWidth)
          jssor_slider1.$ScaleWidth(Math.min(parentWidth, 940));
        else
          window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();

        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
          $(window).bind('resize', ScaleSlider);
        }       
    });
    </script>

3 个解决方案

#1

//Your website
jQuery(document).ready(function ($) { 
   //...
   function ScaleSliderDevices() {
             var bodyWidth = DEVICE.Screen.width();
             if (DEVICE.Screen.osDimVariation()) {
                 bodyWidth = DEVICE.Screen.width() + osWidthOffset();
             }
              jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
         };

    //...
    if (DEVICE.mobile())
    {
        $(window).bind('resize', ScaleSliderDevices);
    }

    //as the resize event may not fire at the beginning sometimes, please scale slider manually after document load
    ScaleSliderDevices();
}

#2

Since you are already using bootstrap, why not use bootstraps built in carousel? All the responsive work is done for you.

既然您已经在使用bootstrap，为什么不使用在carousel中构建的bootstrap呢?所有的响应工作都为您完成了。

plnkr demo

plnkr演示

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

        <div class="item active">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

        <div class="item">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

        <div class="item">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

        <div class="item">
            <img src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
            <div class="carousel-caption">
                slideshow transition twins
            </div>
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

#3

Conclusion: added resize specific per devices see:

结论:增加了每个设备的调整大小:

Added device detection https://github.com/matthewhudson/device.js/blob/master/lib/device.js source inside js with small updates made by me to resolve width and height problems on IOS.

添加了设备检测https://github.com/matthewhudson/device.js/blob/master/lib/device.js源代码，并进行了小的更新，以解决IOS上的宽度和高度问题。

Added Slider Scale to fit body width not parent width, maybe you will need to compute for parent as well width.

添加了滑块比例以适应体宽而不是父宽，您可能需要为父宽计算。

//Your website
jQuery(document).ready(function ($) { 
//...
       function ScaleSliderDevices() {
                 var bodyWidth = DEVICE.Screen.width();
                 if (DEVICE.Screen.osDimVariation()) {
                     bodyWidth = DEVICE.Screen.width() + osWidthOffset();
                 }
                  jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
             };

//...
if (DEVICE.mobile())
        {
            $(window).bind('resize', ScaleSliderDevices);
        }
}

add resize event for devices (roation mainly)

为设备添加调整大小事件(主要是旋转)

JSFIDDLE: example does not run on devices use the code in your local website to test it on devices.

示例不在设备上运行，请使用本地网站中的代码在设备上进行测试。

http://jsfiddle.net/sp75dzaq/13/

You can find comments there with more details.

你可以在那里找到更多细节的评论。

#1

//Your website
jQuery(document).ready(function ($) { 
   //...
   function ScaleSliderDevices() {
             var bodyWidth = DEVICE.Screen.width();
             if (DEVICE.Screen.osDimVariation()) {
                 bodyWidth = DEVICE.Screen.width() + osWidthOffset();
             }
              jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
         };

    //...
    if (DEVICE.mobile())
    {
        $(window).bind('resize', ScaleSliderDevices);
    }

    //as the resize event may not fire at the beginning sometimes, please scale slider manually after document load
    ScaleSliderDevices();
}

#2