自举旋转木马-变化循环方向

Question

是否有可能改变twitters引导旋转木马的循环方向？

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

，我想让它像这样自动播放：

(我有3张照片)

第一张图片:最后一张(第三张)图片第二张图片(重新启动)第一张图片.

所以它应该把图像移出右边，而不是从我的旋转木马的左边。

谢谢!

Answer 1

在初始化旋转木马之前重新订购它们

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

编辑:演示第一行，初始化将需要更多的脚本添加到小提琴。http://jsfiddle.net/b6Y9v/

Answer 2

我需要为按钮获得一个新的功能，其特点是:当鼠标在旋转木马的左边或右边按钮时，旋转木马必须开始移动。

这是很容易做的左按钮，当它是循环向前，但当我必须做同样的反向，旋转木马只移动了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库。它必须与多个carrousels一起工作，因此控制变量是一个数组。

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);

Answer 3

看看我用于旋转木马rtl循环的解决方案，它是一个简单的覆盖：

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