当我尝试在页面上放置多个滑块时，只有第一个有效。有什么办法可以让它们同时工作吗？ 在搜索堆栈溢出后我发现了这个
请按以下方式初始化多个实例，
var jssor_slider1 = new $JssorSlider$("slider1_container", options1);
var jssor_slider2 = new $JssorSlider$("slider2_container", options2);
但是我把这个放在哪里。它会起作用吗，因为这个解决方案没有被接受。也没有其他答案。
【问题讨论】：
每次您在 JSSOR 工作区上开始工作时，它始终不会更改 ID。页面上相同的 id 会相互干扰。因此，在您的 SLIDER OPTION 上，将 ID 从 1 更改为不同的值。就是这样。
【讨论】：
我正在使用 php 从 mysql 数据库中获取信息，它将构建几个容器，这些容器最后都包含一个滑块（使用文件夹中的图像动态构建 - 所以，我不知道有多少个滑块我会的，但我找到了一种快速而肮脏的方法来解决这个问题。
我用 1 个文件加载了所有的 javascript，它被称为 sliders.js
它包含所有原始内容：
jQuery(document).ready(function ($){
//--------------------HERE I ADD AN EACH FUNCTION-------------------
//------------------------------------------------------------------
$(".jsslider").each(function(index){
var SliderID = $(this).attr('id');
// ---- Just for my own reference while troubleshooting ----
// console.log("Index: " + index + " | Created Slider with ID: " + SliderID );
var jssor_1_SlideshowTransitions = [
{$Duration:1200,x:0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:-0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:-0.3,$During:{$Left:[0.3,0.7]},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:-0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:-0.3,$During:{$Top:[0.3,0.7]},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$SlideOut:true,$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Cols:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$Rows:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,y:-0.3,$Cols:2,$SlideOut:true,$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:-0.3,$Rows:2,$SlideOut:true,$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$SlideOut:true,$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:3,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:3,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:12,$Assembly:260,$Easing:{$Clip:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Delay:20,$Clip:12,$SlideOut:true,$Assembly:260,$Easing:{$Clip:$Jease$.$OutCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var jssor_1_options = {
$FillMode: 5,
$AutoPlay: false,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Cols: 10,
$SpacingX: 8,
$SpacingY: 8,
$Align: 360
}
};
//-----------------HERE IS WHERE THE MAGIC HAPPENS--------------
var jssor_1_slider = new $JssorSlider$(SliderID , jssor_1_options);
//--------------------------------------------------------------
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 800);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});
});
所以，当我用 PHP 加载我的 HTML 时，它都是原始 HTML - 除了 ID 是根据我从数据库中获得的信息的 ID 动态设置的，它保持它的唯一性，在我的情况下，ID 类似于“GameID -2784 英寸等
<!-- SLIDER -->
<div class="jsslider" id="'.$g_id.'" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 608px; height: 456px; overflow: hidden; visibility: hidden; background-color: #000;">
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
..........
如前所述，我知道这是一种肮脏的做法，但是如果您使用许多具有相同选项的滑块，并且您只是想给它们一个“类”，那么它非常简单并且效果非常好--- 更重要的是，不知道 ID（因此您可以将它们添加到 java 脚本中。
很高兴听到有人有更简单的解决方案！
【讨论】：
@jcropp：“您如何使用使用 jQuery 的方法设置多个设置？”我不使用 jQuery 和 jssor 滑块，我确实拥有一个没有 jQuery only JS 的滑块，但是：
使用 jQuery 为所有滑块设置一个设置
1.所有<style>...</style> 剪切并放置在最后一个#slider1_container 之后。
之后：
<div id="slider1_container" style="position: relative; width: 600px;
height: 300px; overflow: hidden;">
<!-- content 1 -->
</div>
2.添加：
<div id="slider1_container" style="position: relative; width: 600px;
height: 300px; overflow: hidden;">
<!-- content 2 -->
</div>
//add slider №3,4 and more.
那个：
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600));
else
window.setTimeout(ScaleSlider, 30);
}
3. 被替换为：
al_sldrs=document.querySelectorAll('#slider1_container');
var jssor_slider1 = new $JssorSlider$(al_sldrs[0], options);//add slider №1
var jssor_slider2 = new $JssorSlider$(al_sldrs[1], options);//add slider №2
//add slider №3,4 and more.
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth){
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600));//add slider №1
jssor_slider2.$ScaleWidth(Math.min(parentWidth, 600)) //add slider №2
//add slider №3,4 and more.
}
else
window.setTimeout(ScaleSlider, 30);
}
对于每个成员：为什么不这样做？：
al_sldrs=document.querySelectorAll('#slider1_container');
var jssor_slider1 = new $JssorSlider$(for(i=0;i<al_sldrs.length;i++)al_sldrs[i], options);
for(i=0;i<al_sldrs.length;i++)al_sldrs[i].$ScaleWidth(Math.min(parentWidth, 600));
jssor_slider1.$Elmt=al_sldrs[i];for(i=0;i<al_sldrs.length;i++)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600));
var sldrs = jssor_slider1 || jssor_slider2;sldrs.$ScaleWidth(Math.min(parentWidth, 600));
【讨论】：
没有 jQuery 的所有滑块的一个设置：
<script>
jssor_slider1_starter = function (containerId) {
...
};
</script>
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
...
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
<div id="slider2_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
...
<script>
jssor_slider1_starter('slider2_container');
</script>
</div>
没有jQuery的所有滑块的不同设置：
<script>
jssor_slider1_starter = function (containerId) {
...
};
jssor_slider2_starter = function (containerId) {
...
};
</script>
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
...
<script>
jssor_slider1_starter('slider1_container');
</script>
</div>
<div id="slider2_container" style="position:relative;top:0px;left:0px;width:600px;height:300px">
...
<script>
jssor_slider2_starter('slider2_container');
</script>
</div>
【讨论】：