To ensure proper functionality, remember to update the id's of each element individually. Failure to do so may result in all events being linked to the first slider.
Check out this example on JSFiddle for reference
<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 second slider -->
<div><!-- A mandatory div utilized by the second slider -->
<!-- Each div below represents a different 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>
Below is the JavaScript code:
$(".slider").diyslider({
width: "400px", // set the slider width
height: "200px", // define the slider height
display: 3, // specify the number of slides to show at once
loop: false // disable slide looping
}); // minimal setup required!
// use buttons for slide navigation
$("#go-left").bind("click", function(){
// Move to previous slide
$(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
// Move to next slide
$(".slider").diyslider("move", "forth");
});
$(".slider2").diyslider({
width: "400px", // set the slider width
height: "200px", // define the slider height
display: 3, // specify the number of slides to show at once
loop: false // disable slide looping
}); // minimal setup required!
// use buttons for slide navigation
$("#go-left2").bind("click", function(){
// Move to previous slide
$(".slider2").diyslider("move", "back");
});
$("#go-right2").bind("click", function(){
// Move to next slide
$(".slider2").diyslider("move", "forth");
});
Hopefully this explanation is helpful!