jquery - Bootstrap Carousel - 改变循环方向

Question

是否可以更改 Twitter 引导轮播的循环方向？

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

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

Twitter Bootstrap Carousel 循环项目从右到左 (RTL) 反转

Answer 3

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

左按钮很容易做到，当它向前循环时，但是当我必须反向做同样的事情时，旋转木马只向后移动 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);

Answer 4

您可以通过在 jquery/js 中调用“下一个”和“上一个”来轻松更改引导轮播滑动的方向。在我的情况下，我必须每 5 秒从右到左和从左到右更改一次滑动方向。这是代码。希望这可以帮助。

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

            var dirFlag = false;

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