0

カルーセル内の前のボタンと次のボタンがあるjqueryカルーセル。

通常、カルーセルの左側には前のボタンがあり、右側には次のボタンがあります

カルーセルコンテンツ内の前のボタンと次のボタンがあるjqueryカルーセルはありますか？

一度に1つのスライドが必要です。すべてのスライドには、そのスライドのコンテンツ内に前と次のボタンが必要です。

4

3 に答える 3

0

Nivoスライダー。デモをチェックしてください。http：//nivo.dev7studios.com/demos/

http://nivo.dev7studios.com/support/jquery-plugin-usage/ごとに「directionNav：true」を設定します

于 2012-05-24T07:09:28.373 に答える
0

jquery サイクルを使用すると、これも簡単に実行できます。2 つの方法があります。

プラグインのダウンロード: 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')
});​
于 2012-05-28T16:17:03.203 に答える
0

CSS を使用して、prevおよびnextボタンをスライド内に配置することはできませんか?

于 2012-05-24T07:01:03.683 に答える