Jquery carousel 每个轮播幻灯片中的上一个和下一个按钮答案

【问题标题】：Jquery carousel where prevoius and next button inside the each carousel slideJquery carousel 每个轮播幻灯片中的上一个和下一个按钮
【发布时间】：2012-05-30 17:52:37
【问题描述】：

一个 jquery carousel，其中 prev 按钮和 next 按钮在 carousel 内。

通常轮播左侧有上一个按钮，右侧有下一个按钮

是否有任何 jquery carousel，其中 prev 和 next 按钮位于 carousel 内容中？

我一次需要一张幻灯片，每张幻灯片都需要在该幻灯片的内容中包含上一个和下一个按钮

【问题讨论】：

标签： jquery carousel

【解决方案1】：

您不能只使用 CSS 将 prev 和 next 按钮定位到幻灯片内吗？

【讨论】：

【解决方案2】：

Nivo 滑块。查看演示..http://nivo.dev7studios.com/demos/

您想根据http://nivo.dev7studios.com/support/jquery-plugin-usage/ 设置“directionNav : true”

【讨论】：

【解决方案3】：

使用 jquery 循环您也可以轻松做到这一点，并且有两种方法。

插件下载：http://jquery.malsup.com/cycle/options.html

演示 1：

为每张幻灯片添加上一个和下一个按钮。下一个和上一个按钮将与幻灯片一起制作动画，因为它们位于幻灯片内部。您想要这样做的唯一原因是如果您想使用幻灯片为这些按钮设置动画。通常情况并非如此（参见示例 2）

http://jsfiddle.net/lucuma/anwvL/1/

html 应该是这样的：

<div id="slideshow">

<div>
    <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
</div>
<div>
    <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" /></div>
<div>
      <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
        <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" /></div>

</div>

JS：

$('#slideshow').cycle({
    fx: 'scrollHorz',
    prev: $('.prev'),
    next: $('.next')
});

演示 2

我们将下一个/上一个按钮放置在幻灯片的顶部，但不在幻灯片内部。您会注意到上一个/下一个按钮不会与幻灯片一起动画，而是在幻灯片之上。这通常是您在大多数幻灯片中看到的内容（如文本或箭头）

http://jsfiddle.net/lucuma/hXxtJ/1/

<div id="sliders">
    <div class="controller">
       <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    </div>
    <div id="slideshow">

        <div>
            <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
        </div>
        <div>
            <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
        </div>
         <div>
            <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
        </div>
    </div>
</div>

JS：

$('#slideshow').cycle({
    fx: 'scrollHorz',
    prev: $('.prev'),
    next: $('.next')
});

【讨论】：