slidejs：如何使用相同的上一个下一个按钮控制两张幻灯片？ [英] slidejs: how to control two slides with same previous next button?

问题描述

如何使用相同的prev，下一个按钮控制两张幻灯片？当我点击上一个/下一个按钮时我想要两个幻灯片移动..如何实现这个功能？

How to control two slides with same prev, next button? When I click on prev/ next button I want both the slides to move.. How to achieve this functionality?

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> &nbsp; &nbsp; &nbsp; <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>    

推荐答案

将此附加到＃slides1：

Append this to #slides1:

<a href="#" class="next"> Next </a><a href="#" class="prev"> Prev </a>

将此添加到您的CSS：

Add this to your CSS:

#slides1 .next,
#slides1 .prev { display: none; }

将此添加到您的JS：

$('#slides .next').click(function() {
    $('#slides1 .next').click();
});
$('#slides .prev').click(function() {
    $('#slides1 .prev').click();
});

http://jsfiddle.net/samliew/4JjMC/

这篇关于slidejs：如何使用相同的上一个下一个按钮控制两张幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！