Question

我多次发现这个问题，但没有回答。

我想让我的jssor carousel能够在较小的屏幕上使用少量幻灯片，而不是使用相同数量的幻灯片减少旋转木马的宽度。

有一个例子，我在mattel.com上正在寻找什么，根据屏幕宽度，旋转木马会从四个减少到三个，两个和一个幻灯片。

jssor_2_slider_init = function() {

            var jssor_2_options = {
              $AutoPlay: 1,
              $AutoPlaySteps: 5,
              $SlideDuration: 250,
              $FillMode: 4,
              $PauseOnHover: 3,
              $SlideWidth: 225,
              $SlideHeight: 225,
              $SlideSpacing: 10,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $Steps: 5
				
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $SpacingY: 10
              }
            };

            var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

            /*#region responsive code begin*/

            var MAX_WIDTH = 3000;

            function ScaleSlider() {
                var containerElement = jssor_2_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                    jssor_2_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*#endregion responsive code end*/
        };
        
        jssor_2_slider_init();

/*jssor slider loading skin double-tail-spin css*/
        .jssorl-004-double-tail-spin img {
            animation-name: jssorl-004-double-tail-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-004-double-tail-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /*jssor slider bullet skin 031 css*/
        .jssorb031 {position:absolute;}
        .jssorb031 .i {position:absolute;cursor:pointer;}
        .jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
        .jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
        .jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
        .jssorb031 .i.idn {opacity:.3;}

        /*jssor slider arrow skin 052 css*/
        .jssora052 {display:block;position:absolute;cursor:pointer;}
        .jssora052 .a {fill:none;stroke:#000;stroke-width:360;stroke-miterlimit:10;}
        .jssora052:hover {opacity:.8;}
        .jssora052.jssora052dn {opacity:.5;}
        .jssora052.jssora052ds {opacity:.3;pointer-events:none;}

<script src="https://www.jssor.com/script/jssor.slider-27.1.0.min.js"></script>
<div id="jssor_2" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;visibility:hidden;">
        <!-- 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="img/double-tail-spin.svg" />
        </div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;">
<div style="background:green" data-fillmode="1" data-p="56.25"> </div>
<div style="background:blue" data-fillmode="1" data-p="56.25"> </div>
<div style="background:violet" data-fillmode="1" data-p="56.25"> </div>
<div style="background:red" data-fillmode="1" data-p="56.25"> </div>
<div style="background:orange" data-fillmode="1" data-p="56.25"> </div>
<div style="background:yellow" data-fillmode="1" data-p="56.25"> </div>
<div style="background:cyan" data-fillmode="1" data-p="56.25"> </div>
<div style="background:gray" data-fillmode="1" data-p="56.25"> </div>

        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb031" style="position:absolute;bottom:15px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
        <!-- Arrow Navigator -->
        <div data-u="arrowleft" class="jssora052" style="width:55px;height:55px;top:85px;left:15px;" data-scale="0.75">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
            </svg>
        </div>
        <div data-u="arrowright" class="jssora052" style="width:55px;height:55px;top:85px;right:15px;" data-scale="0.75">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
            </svg>
        </div>
    </div>

Answer 1

好的，我在互联网上找到了解决方案jssor/slider/examples-jquery/auto-center-with-no-scale.html。我不懂javascript，只需稍加修改即可复制替换脚本的响应区域。查看在整页上运行两个代码段并调整窗口浏览器大小的区别。

＆＃13;

jssor_2_slider_init = function() {

            var jssor_2_options = {
              $AutoPlay: 1,
              $AutoPlaySteps: 5,
              $SlideDuration: 250,
              $FillMode: 4,
              $PauseOnHover: 3,
              $SlideWidth: 225,
              $SlideHeight: 225,
              $SlideSpacing: 10,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $Steps: 5
				
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $SpacingY: 10
              }
            };

              var jssor_2_slider = new $JssorSlider$("jssor_2", jssor_2_options);

           //#region responsive code begin
            //the following code is to place slider in the center of parent container with no scale
            function ScaleSlider() {

                var containerElement = jssor_2_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {
                    var expectedWidth = Math.min(containerWidth, jssor_2_slider.$OriginalWidth());

                    //scale the slider to original height with no change
                    jssor_2_slider.$ScaleSize(expectedWidth, jssor_2_slider.$OriginalHeight());

                    /*jssor_2_slider.$Elmt.style.left = ((containerWidth - expectedWidth) / 0) + "px";*/
                }
                else {
                    window.setTimeout(ScaleSlider, 120);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            //#endregion responsive code end
        };

        
        jssor_2_slider_init();

＆＃13;

/*jssor slider loading skin double-tail-spin css*/
        .jssorl-004-double-tail-spin img {
            animation-name: jssorl-004-double-tail-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-004-double-tail-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /*jssor slider bullet skin 031 css*/
        .jssorb031 {position:absolute;}
        .jssorb031 .i {position:absolute;cursor:pointer;}
        .jssorb031 .i .b {fill:#000;fill-opacity:0.5;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.3;}
        .jssorb031 .i:hover .b {fill:#fff;fill-opacity:.7;stroke:#000;stroke-opacity:.5;}
        .jssorb031 .iav .b {fill:#fff;stroke:#000;fill-opacity:1;}
        .jssorb031 .i.idn {opacity:.3;}

        /*jssor slider arrow skin 052 css*/
        .jssora052 {display:block;position:absolute;cursor:pointer;}
        .jssora052 .a {fill:none;stroke:#000;stroke-width:360;stroke-miterlimit:10;}
        .jssora052:hover {opacity:.8;}
        .jssora052.jssora052dn {opacity:.5;}
        .jssora052.jssora052ds {opacity:.3;pointer-events:none;}

＆＃13;

<script src="https://www.jssor.com/script/jssor.slider-27.1.0.min.js"></script>
<div id="jssor_2" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;visibility:hidden;">
        <!-- 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="img/double-tail-spin.svg" />
        </div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:275px;overflow:hidden;">
<div style="background:green" data-fillmode="1" data-p="56.25"> </div>
<div style="background:blue" data-fillmode="1" data-p="56.25"> </div>
<div style="background:violet" data-fillmode="1" data-p="56.25"> </div>
<div style="background:red" data-fillmode="1" data-p="56.25"> </div>
<div style="background:orange" data-fillmode="1" data-p="56.25"> </div>
<div style="background:yellow" data-fillmode="1" data-p="56.25"> </div>
<div style="background:cyan" data-fillmode="1" data-p="56.25"> </div>
<div style="background:gray" data-fillmode="1" data-p="56.25"> </div>

        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb031" style="position:absolute;bottom:15px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:16px;height:16px;">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <circle class="b" cx="8000" cy="8000" r="5800"></circle>
                </svg>
            </div>
        </div>
        <!-- Arrow Navigator -->
        <div data-u="arrowleft" class="jssora052" style="width:55px;height:55px;top:85px;left:15px;" data-scale="0.75">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
            </svg>
        </div>
        <div data-u="arrowright" class="jssora052" style="width:55px;height:55px;top:85px;right:15px;" data-scale="0.75">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
            </svg>
        </div>
    </div>

＆＃13;

jssor响应减少幻灯片的数量

1 个答案: