jssor响应式减少幻灯片数量
jssor responsive reduce number of slides
这个问题我找了好几次都没有答案。
我想让我的 jssor 旋转木马真正响应小屏幕上的少量幻灯片，而不是减少相同数量幻灯片的旋转木马宽度。
在 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>
好的，我在网上找到了解决方案 jssor/slider/examples-jquery/auto-center-with-no-scale.html。我不知道 javascript，只是 copy-replace 脚本的响应区域稍作修改。查看整页上的代码片段 运行 和调整 window 浏览器大小的区别。
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>
这个问题我找了好几次都没有答案。
我想让我的 jssor 旋转木马真正响应小屏幕上的少量幻灯片，而不是减少相同数量幻灯片的旋转木马宽度。
在 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>
好的，我在网上找到了解决方案 jssor/slider/examples-jquery/auto-center-with-no-scale.html。我不知道 javascript，只是 copy-replace 脚本的响应区域稍作修改。查看整页上的代码片段 运行 和调整 window 浏览器大小的区别。
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>