我正在使用 DIY Slider,但有一个我无法处理的问题。当我尝试在一页中多次使用此 slider 时,第二个不会运行。
我尝试了所有可能的想法。
$(".slider").diyslider({
width: "400px", // width of the slider
height: "200px", // height of the slider
display: 1, // number of slides you want it to display at once
loop: false // disable looping on slides
}); // this is all you need!
// use buttons to change slide
$("#go-left").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "forth");
});
http://jsfiddle.net/bj4yZ/155/ - 这是工作中的“不工作”演示。
最佳答案
您所要做的就是更改每个元素的 ID。如果您不这样做,而只是复制并粘贴 html 和 js,所有事件都将附加到第一个 slider 。
http://jsfiddle.net/bj4yZ/788/
<button id="go-left">«</button> <button id="go-right">»</button>
<div class="slider"><!-- The slider -->
<div><!-- A mandatory div used by the slider -->
<!-- Each div below is considered a slide -->
<div class="a">Div #1</div>
<div class="b">Div #2</div>
<div class="c">Div #3</div>
<div class="d">Div #4</div>
<div class="e">Div #5</div>
</div>
</div>
<button id="go-left2">«</button> <button id="go-right2">»</button>
<div class="slider2"><!-- The slider -->
<div><!-- A mandatory div used by the slider -->
<!-- Each div below is considered a slide -->
<div class="a">Div #1</div>
<div class="b">Div #2</div>
<div class="c">Div #3</div>
<div class="d">Div #4</div>
<div class="e">Div #5</div>
</div>
</div>
和js
$(".slider").diyslider({
width: "400px", // width of the slider
height: "200px", // height of the slider
display: 3, // number of slides you want it to display at once
loop: false // disable looping on slides
}); // this is all you need!
// use buttons to change slide
$("#go-left").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "forth");
});
$(".slider2").diyslider({
width: "400px", // width of the slider
height: "200px", // height of the slider
display: 3, // number of slides you want it to display at once
loop: false // disable looping on slides
}); // this is all you need!
// use buttons to change slide
$("#go-left2").bind("click", function(){
// Go to the previous slide
$(".slider2").diyslider("move", "back");
});
$("#go-right2").bind("click", function(){
// Go to the previous slide
$(".slider2").diyslider("move", "forth");
});
希望对您有所帮助 ;)
关于Jquery DIY slider 多次使用问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26133063/