Bootstrap轮播 - 更改循环方向

Question

是否可以更改Twitter Bootstrap走马灯的循环方向？

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

我希望它像这样自动播放：

（我有3张图片）

第一张图片 | 最后（第三张）图片 | 第二张图片 | （重新开始）第一张图片 | ...

因此，它应该将图像移出右侧，而不是移出我的走马灯的左侧。

谢谢！

- mountbatt

Answer 1

在初始化走马灯之前重新排列它们

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

编辑：第一行的演示需要添加更多的脚本到 fiddle 中进行初始化。http://jsfiddle.net/b6Y9v/

- Kevin B

Answer 2

您可以通过调用jquery/js中的“next”和“previous”轻松更改Bootstrap轮播的滑动方向。在我的情况下，我需要每5秒从右到左和从左到右更改幻灯片方向。以下是该代码。希望这能帮到您。

            var $carousel = $('.carousel');

            var dirFlag = false;

            setInterval(function(){
                dirFlag = !dirFlag;
                if(dirFlag == true) {
                    $carousel.carousel('next');
                } else {
                    $carousel.carousel('prev');
                }
            }, 5000);

- dxpkumar

Answer 3

我需要为按钮添加一个新功能，这个功能是：当鼠标悬停在轮播图的左侧或右侧按钮上时，轮播图必须开始移动。

对于向前循环时的左侧按钮来说，这很容易实现。但是当我要在相反方向上做同样的事情时，轮播图只会向后移动一步，然后就停止了。

因此，我使用了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);

- Herno

Answer 4

看看我的解决方案，用于轮播的rtl循环，这是一个简单的覆盖：

Twitter Bootstrap Carousel cycle items right to left ( RTL ) reversed

- Adam Tal