如何使用相同的prev,下一个按钮控制两张幻灯片?当我点击上一个/下一个按钮时,我希望两个幻灯片都移动..如何实现此功能?
JS Bin:http://jsbin.com/osogig/1/edit
$(function() {
$("#slides, #slides1").slides({
generatePagination : false,
height : 50
});
});
<div id="slides">
<div class="slides_container">
<div>sample text 1</div>
<div>sample text 2</div>
<div>sample text 3</div>
<div>sample text 4</div>
</div>
<a href="#" class="next"> Next </a> <a href="#"
class="prev"> Prev </a>
</div>
<div id="slides1">
<div class="slides_container">
<div>
Lorem ipsum dolor sit amet <br /> Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet <br />
</div>
<div>
Lorem ipsum dolor sit amet <br /> Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet <br />
</div>
<div>
Lorem ipsum dolor sit amet <br /> Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet <br />
</div>
<div>
Lorem ipsum dolor sit amet <br /> Lorem ipsum dolor sit amet <br />
Lorem ipsum dolor sit amet <br />
</div>
</div>
</div>
答案 0 :(得分:1)
将此附加到#slides1:
<a href="#" class="next"> Next </a><a href="#" class="prev"> Prev </a>
将此添加到您的CSS:
#slides1 .next,
#slides1 .prev { display: none; }
将此添加到您的JS:
$('#slides .next').click(function() {
$('#slides1 .next').click();
});
$('#slides .prev').click(function() {
$('#slides1 .prev').click();
});