Bootstrap Carousel - 改变循环方向答案

【问题标题】：Bootstrap Carousel - change cycle directionBootstrap Carousel - 改变循环方向
【发布时间】：2012-09-26 20:59:13
【问题描述】：

twitters bootstrap carousel的循环方向可以改变吗？

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

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

（我有 3 张图片）

第一张图片 |最后（第三张）图片 |第二张图片 | （重新启动）第一张图片 | ...

所以它应该将图像移出我的轮播的右侧，而不是左侧。

谢谢！

【问题讨论】：

标签： jquery twitter twitter-bootstrap carousel

【解决方案1】：

在初始化轮播之前重新排序

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

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

【讨论】：

【解决方案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库的。而且它必须与几个轮播一起工作，所以控制变量是一个数组。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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);

【讨论】：