4

Twitterのブートストラップカルーセルのサイクル方向を変更することは可能ですか?

http://twitter.github.com/bootstrap/javascript.html#carousel

次のように自動再生したい：

（私は3つの画像を持っています）

最初の画像 | 最後の (3 番目の) 画像 | 2 番目の画像 | (再起動) 最初の画像 | ...

したがって、カルーセルの左側からではなく、右側から画像を移動する必要があります。

ありがとう！

4

4 に答える 4

1

カルーセルを初期化する前に並べ替えます

[].reverse.apply($('.carousel .item')).appendTo(".carousel .carousel-inner");
$('.carousel').carousel();

編集: 最初の行のデモ。初期化には、フィドルにさらにスクリプトを追加する必要があります。http://jsfiddle.net/b6Y9v/

于 2012-09-26T21:26:01.647 に答える
0

ボタンの新しい機能を取得する必要がありました。その機能は、マウスがカルーセルの左または右のボタンの上にあるときに、カルーセルが動き始める必要があるというものでした。

前方に循環している場合は左ボタンで簡単に実行できましたが、逆方向に同じことを行う必要がある場合、カルーセルは1ステップだけ後退し、1つだけ停止します。

だから私はsetInterval機能で自分自身を助けます

onmouseover 
 control = setInterval( "$('#" + name_carrousel + "_next_button').cyclenext()", 200 );

onmouseleave
            clearInterval( control );
            $('#' + name_carrousel).carousel('pause');

コントロールにも少し変更を加えました。

<!-- Controls -->
<a data-slide="prev" href="#carousel-example-generic" class="left carousel-control" id="carousel-example-generic_prev_button">
  <span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel-example-generic" class="right carousel-control" id="carousel-example-generic_next_button">
  <span class="icon-next"></span>
</a>

変更は であり id="carousel-example-generic_prev_button" 、 id="carousel-example-generic_next_button" その変更はセレクターで見つけるのに役立ちます。

それが以下のコードのベースであり、機能しました。

以下のコードは、jquery ライブラリに関与しているため、理解しにくいものです。また、複数のカルーセルで動作する必要があるため、制御変数は配列です。

globalbootstrap.js

$(function() {


    $(document).ready(function(){

        carousel_params_custom = { name_carrousel: 'carousel-example-generic' , time_interval: 200 };
        $('#' + carousel_params_custom.name_carrousel ).launch_carrousel( carousel_params_custom );

    });



});





jquery.customcarrousel.js


(function($){

    $.fn.extend({
        controlcarrousel: []
        ,
        cyclenext:function(){
            return this.each(function(){
                $('#' + carousel_params_custom.name_carrousel).carousel({
                    interval:  carousel_params_custom.time_interval
                    ,slide:'next'
                    ,wrap:true
                });
                $('#' + carousel_params_custom.name_carrousel).carousel('cycle');                
            });
        }
        ,
        cycleprev:function(){
            return this.each(function(){
                $('#' + carousel_params_custom.name_carrousel).carousel({
                    interval:  carousel_params_custom.time_interval
                    ,slide:'prev'
                    ,wrap:true
                });
                $('#' + carousel_params_custom.name_carrousel).carousel('cycle');                
            });
        }
        ,
        launch_carrousel:function(carousel_params_custom){

           $('#' + carousel_params_custom.name_carrousel + '_prev_button').mouseover(function(){
                $('#' + carousel_params_custom.name_carrousel).controlcarrousel[ carousel_params_custom.name_carrousel ] = setInterval( "$('#" + carousel_params_custom.name_carrousel + "_prev_button').cycleprev()", carousel_params_custom.time_interval );
            });

           $('#' + carousel_params_custom.name_carrousel + '_prev_button').mouseleave(function(){
                clearInterval( $('#' + carousel_params_custom.name_carrousel).controlcarrousel[ carousel_params_custom.name_carrousel ] );
                $('#' + carousel_params_custom.name_carrousel).carousel('pause');
            });


           $('#' + carousel_params_custom.name_carrousel + '_next_button').mouseover(function(){
                $('#' + carousel_params_custom.name_carrousel).controlcarrousel[ carousel_params_custom.name_carrousel ]  = setInterval( "$('#" + carousel_params_custom.name_carrousel + "_next_button').cyclenext()", carousel_params_custom.time_interval );
            });

           $('#' + carousel_params_custom.name_carrousel + '_next_button').mouseleave(function(){
                clearInterval( $('#' + carousel_params_custom.name_carrousel).controlcarrousel[ carousel_params_custom.name_carrousel ] );
                $('#' + carousel_params_custom.name_carrousel).carousel('pause');
            });            

        }
    });

})(jQuery);
于 2013-12-23T18:46:57.207 に答える
0

カルーセルの rtl サイクリングに使用される私のソリューションを確認してください。これは単純なオーバーライドです。

Twitter ブートストラップ カルーセル サイクル アイテムを右から左 (RTL) に反転

于 2014-08-06T22:55:41.010 に答える