Question

我正在使用DIY 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/ - 这是工作“不工作”的演示。

Answer 1

您所要做的就是更改每个元素的ID。如果您不这样做，只需复制并粘贴html和js，所有事件都将附加到第一个滑块。

http://jsfiddle.net/bj4yZ/788/

<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</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">&laquo;</button> <button id="go-right2">&raquo;</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");
});

希望有所帮助;）

Answer 2

您可以通过滑块调用{/ 1}}安全地分隔内容。

这是working demo

Diyslider在它自己的身上做得太过分了。

Jquery DIY滑块多用途问题

2 个答案: