Reduce number of slides in jssor carrousel

1

I found this question several times but no answer.

How can I reduce the number of images in a jussor carousel for a mobile or tablet screen instead of reducing the width of the carousel while maintaining the same number of images.

I try to achieve the same as in mattel.com where the images vary from four to three, two and one depending on the screen width.

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>
    
asked by Daniel 16.03.2018 в 18:45
source

1 answer

2

I found the solution on the internet jssor / slider / examples-jquery / auto-center-with-no-scale.html . I do not know javascript, I just copied the part that corresponds to the responsive area and replaced it. By running both snippets in full page and reducing the size of the browser window you can see the difference.

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();
        
/*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>
    
answered by 24.03.2018 / 17:16
source