JSSOR比例尺大小：保持子弹和箭的大小

Question

I am using the jssor image slider with jquery. 我正在将jssor图像滑块与jquery一起使用。 It works good, but have an issue with resizing the slider. 效果很好，但是在调整滑块大小方面存在问题。

I want to resize the slider, when window width changes. 当窗口宽度更改时，我想调整滑块的大小。 For that, the jssor-API provides the function $ScaleWidth(newWidth). 为此，jssor-API提供了功能$ ScaleWidth（newWidth）。 But I am not really happy with the result. 但是我对结果并不满意。 After $ScaleWidth is done, it also resizes the arrows and bullets. 在完成$ ScaleWidth之后，它还会调整箭头和项目符号的大小。 That is not good. 这是不好的。

If the slider gets smaller, the clickable area for arrows and bullets gets too small to click on or to be seen. 如果滑块变小，箭头和项目符号的可单击区域将变得太小而无法单击或看不见。

If the slider gets to big, the images become too big, that you see every pixel of the original arrow/bullet image. 如果滑块变大，图像将变得太大，您将看到原始箭头/项目符号图像的每个像素。

Here is the code I have at the moment: 这是我目前的代码：

HTML 的HTML

<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>
   <title></title>
   <style>
        html, body{margin: 0px}
   </style>
</head>
<body>
    <div id="Slider" style="position: relative; top: 0px; left: 0px;">
    <!-- Slides Container -->
    <div id="Slides" u="slides" style="position: absolute; overflow: hidden; left: 0px; top: 0px;">
        [List of DIVs with IMG tags]
    </div>
    <!--#region Arrow Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
    <style>
        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 30px;
            height: 46px;
            cursor: pointer;
            background: url(/templates/SliderCore/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; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }
    </style>
    <!-- Arrow Left -->
    <span id="SliderArrowLeft" u="arrowleft" class="jssora12l" style="top: 102px; left: 0px;">
    </span>
    <!-- Arrow Right -->
    <span id="SliderArrowRight" u="arrowright" class="jssora12r" style="top: 102px; right: 0px;">
    </span>
    <!--#endregion Arrow Navigator Skin End -->

    <!--#region Bullet Navigator Skin Begin -->
    <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
    <style>
        /* jssor slider bullet navigator skin 10 css */
        /*
        .jssorb10 div           (normal)
        .jssorb10 div:hover     (normal mouseover)
        .jssorb10 .av           (active)
        .jssorb10 .av:hover     (active mouseover)
        .jssorb10 .dn           (mousedown)
        */
        .jssorb10 {
            position: absolute;
        }
        .jssorb10 div, .jssorb10 div:hover, .jssorb10 .av {
            position: absolute;
            /* size of bullet elment */
            width: 11px;
            height: 11px;
            background: url(/templates/SliderCore/b10.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb10 div { background-position: -10px -10px; }
        .jssorb10 div:hover, .jssorb10 .av:hover { background-position: -40px -10px; }
        .jssorb10 .av { background-position: -70px -10px; }
        .jssorb10 .dn, .jssorb10 .dn:hover { background-position: -100px -10px; }
    </style>
    <!-- bullet navigator container -->
    <div u="navigator" class="jssorb10" style="bottom: 16px; right: 6px;">
        <!-- bullet navigator item prototype -->
        <div u="prototype"></div>
    </div>
    <!--#endregion Bullet Navigator Skin End -->
</div>
</body>
</html>

JavaScript 的JavaScript

<script src="jquery-2.1.3.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
    $(document).ready(function () {
        var _SlideshowTransitions = [
            {$Duration:1200,$Opacity:2} //Fade
        ];
        var options = {
            $AutoPlay: true,
            $FillMode: 5,
            $DragOrientation: 0,
            $AutoPlayInterval: 3000,
            $LazyLoading: 1,
            $ArrowNavigatorOptions: {                       
                $Class: $JssorArrowNavigator$,              
                $ChanceToShow: 1,                           
                $AutoCenter: 2,
                $Steps: 1 
            },
            $BulletNavigatorOptions: { 
                $Class: $JssorBulletNavigator$,  
                $ChanceToShow: 2,  
                $AutoCenter: 1, 
                $Steps: 1,        
                $Lanes: 1,  
                $SpacingX: 10,       
                $SpacingY: 10,          
                $Orientation: 1           
            },
            $SlideshowOptions: {  
                $Class: $JssorSlideshowRunner$, 
                $Transitions: _SlideshowTransitions, 
                $TransitionsOrder: 1,            
                $ShowLink: false           
            }
        };

        $.clientCoords = function(){
           if ($('html').is('.ie6, .ie7, .ie8, .ie9')){
                return {
                    w:document.documentElement.offsetWidth,
                    h:document.documentElement.offsetHeight
                }
            }
            else
                return {w:window.innerWidth, h:window.innerHeight}
        }

        var MainDiv = $("#Slider");
        var SlidesDiv = $("#Slides");
        var client = $.clientCoords();
        MainDiv.css("height", client.h+ "px").css("width", client.w+"px");
        SlidesDiv.css("height",client.h+ "px").css("width",client.w+"px");

        var Slider = new $JssorSlider$('Slider', options);

        function ScaleSlider() {
            Slider.$ScaleWidth($('#Slider').parent().width());                
        }
        ScaleSlider();

        $(window).bind('resizeEnd', function() {
            ScaleSlider();
        });

        $(window).resize(function() {
            if(this.resizeTO) 
                  clearTimeout(this.resizeTO);
            this.resizeTO = setTimeout(function() {
                $(this).trigger('resizeEnd');
            }, 500);
        });
    });
</script>

Is there any other way to resize the slider area and relocate the arrows/bullets? 还有其他方法可以调整滑块区域的大小并重新定位箭头/子弹吗？

I think relocating the arrows after scaling the slider using jquery will be not the problem. 我认为使用jquery缩放滑块后重新定位箭头将不是问题。 But how to resize the jssor slider while it is on AutoPlay and do no restart? 但是，如何在jssor滑块处于自动播放状态时调整其大小并且不重新启动呢？

I tried to use 我尝试使用

MainDiv.css('width', newWidth+'px').css('height',newHeight+'px');
SlidesDiv.css('width', newWidth+'px').css('height',newHeight+'px');

But this did not effect the running slider. 但这不会影响正在运行的滑块。 It stayed the size it had on Autoplay start. 它保持自动播放开始时的大小。

Answer 1

You can add $Scale: false to your $ArrowNavigatorOptions and $BulletNavigatorOptions to prevent it from resizing. 您可以将$Scale: false添加到$ArrowNavigatorOptions和$BulletNavigatorOptions以防止其调整大小。

$ArrowNavigatorOptions: {                       
    $Class: $JssorArrowNavigator$,              
    $ChanceToShow: 1,                           
    $AutoCenter: 2,
    $Steps: 1,
    $Scale: false
},
$BulletNavigatorOptions: { 
    $Class: $JssorBulletNavigator$,  
    $ChanceToShow: 2,  
    $AutoCenter: 1, 
    $Steps: 1,        
    $Lanes: 1,  
    $SpacingX: 10,       
    $SpacingY: 10,          
    $Orientation: 1,
    $Scale: false
},

I hope it helps. 希望对您有所帮助。

JSSOR比例尺大小：保持子弹和箭的大小

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-09-08 12:09:21

JSSOR比例尺大小：保持子弹和箭的大小

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-08 12:09:21

解决方案1
2 已采纳 2015-09-08 12:09:21