【发布时间】：2018-03-16 16:53:47
【问题描述】：
我多次发现这个问题，但没有答案。
我想让我的 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>【问题讨论】：
-
对于任何在这里寻找完全响应式滑块的人，您所引用的实际上是 Ken Wheeler 的 Slick。
标签： javascript carousel jssor