我想在单个页面上运行jQuery slicebox的多个实例。我设置了两个实例，但是两个实例都采用了第二个实例的选项。第二个“ $ .Slicebox.defaults”似乎将覆盖第一个“ $ .Slicebox.defaults”。我想使每个实例独立。有人知道如何以编程方式实现这一目标吗？这是我的html和jQuery。如您所见，我试图更改两个组的ID。我将第一个设置为＃sb-slider，第二个设置为＃sb-slider2。但是，这不会隔离每个实例。我希望能得到一些适当的指导。
enter code here
<section id="banners">
<div class="container">
<div class="row">
<div class="banner_box">
<ul id="sb-slider" class="sb-slider">
<li><a href=""><img src="images/image_1.jpg" target="_blank"/></a></li>
<li><a href=""><img src="images/image_2.jpg" target="_blank"/></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="banner_box2">
<ul id="sb-slider2" class="sb-slider">
<li><a href=""><img src="images/image_3.jpg" target="_blank"/></a></li>
<li><a href=""><img src="images/image_4.jpg" target="_blank"/></a></li>
</ul>
</div>
</div>
</div>
</section>
<script>
$(function() {
var Page = (function() {
var $navArrows = $( '#nav-arrows' ).hide(),
$navDots = $( '#nav-dots' ).hide(),
$nav = $navDots.children( 'span' ),
$shadow = $( '#shadow' ).hide(),
slicebox = $( '#sb-slider' ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$shadow.show();
},
onBeforeChange : function( pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
}),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children( ':first' ).on( 'click', function() {
slicebox.next();
return false;
});
$navArrows.children( ':last' ).on( 'click', function() {
slicebox.previous();
return false;
});
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slicebox.isActive()) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slicebox.jump( i + 1 );
return false;
});
});
};
return { init : init };
})();
Page.init();
});
$('#sb-slider').slicebox();
$.Slicebox.defaults = {
// (v)ertical, (h)orizontal or (r)andom
orientation : 'r',
// perspective value
perspective : 1200,
// number of slices / cuboids
// needs to be an odd number 15 => number > 0 (if you want the limit higher,
// change the _validate function).
cuboidsCount : 5,
// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
cuboidsRandom : true,
// the range of possible number of cuboids if cuboidsRandom is true
// it is strongly recommended that you do not set a very large number
maxCuboidsCount : 5,
// each cuboid will move x pixels left / top (depending on orientation).
// The middle cuboid doesn't move. the middle cuboid's neighbors will
// move disperseFactor pixels
disperseFactor : 10,
// color of the hidden sides
colorHiddenSides : '#222222',
// the animation will start from left to right. The left most
// cuboid will be the first one to rotate
// this is the interval between each rotation in ms
sequentialFactor : 150,
// animation speed
// this is the speed that takes "1" cuboid to rotate
speed : 600,
// transition easing
easing : 'ease',
// if true the slicebox will start the animation automatically
autoplay : true,
// time (ms) between each rotation, if autoplay is true
interval: 500,
// the fallback will just fade out / fade in the items
// this is the time fr the fade effect
fallbackFadeSpeed : 300,
// callbacks
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};
</script>
<script>
$(function() {
var Page = (function() {
var $navArrows = $( '#nav-arrows' ).hide(),
$navDots = $( '#nav-dots' ).hide(),
$nav = $navDots.children( 'span' ),
$shadow = $( '#shadow' ).hide(),
slicebox2 = $( '#sb-slider2' ).slicebox( {
onReady : function() {
$navArrows.show();
$navDots.show();
$shadow.show();
},
onBeforeChange : function( pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
}),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children( ':first' ).on( 'click', function() {
slicebox.next();
return false;
});
$navArrows.children( ':last' ).on( 'click', function() {
slicebox.previous();
return false;
});
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slicebox.isActive()) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slicebox.jump( i + 1 );
return false;
});
});
};
return { init : init };
})();
Page.init();
});
$('#sb-slider2').slicebox();
$.Slicebox.defaults = {
// (v)ertical, (h)orizontal or (r)andom
orientation : 'r',
// perspective value
perspective : 1200,
// number of slices / cuboids
// needs to be an odd number 15 => number > 0 (if you want the limit higher,
// change the _validate function).
cuboidsCount : 5,
// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
cuboidsRandom : true,
// the range of possible number of cuboids if cuboidsRandom is true
// it is strongly recommended that you do not set a very large number
maxCuboidsCount : 4,
// each cuboid will move x pixels left / top (depending on orientation).
// The middle cuboid doesn't move. the middle cuboid's neighbors will
// move disperseFactor pixels
disperseFactor : 10,
// color of the hidden sides
colorHiddenSides : '#222222',
// the animation will start from left to right. The left most
// cuboid will be the first one to rotate
// this is the interval between each rotation in ms
sequentialFactor : 150,
// animation speed
// this is the speed that takes "1" cuboid to rotate
speed : 600,
// transition easing
easing : 'ease',
// if true the slicebox will start the animation automatically
autoplay : true,
// time (ms) between each rotation, if autoplay is true
interval: 10000,
// the fallback will just fade out / fade in the items
// this is the time fr the fade effect
fallbackFadeSpeed : 300,
// callbacks
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
答案 0 :(得分：0)
slicebox文档在地面上有些薄，但是它遵循了jquery插件的标准方法：
$.Slicebox = function( options, element ) {
您可以将选项传递给slicebox初始化程序，而不是调用.defaults，例如：
$('#sb-slider').slicebox({
orientation : 'v'
});
$('#sb-slider2').slicebox({
orientation : 'h'
});
请确保在致电.slicebox(options)