Question

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

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，然后停止它。 / p>

所以我帮助自己使用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 3

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

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

Answer 4

您可以通过拨打＆＃39; next＆＃39;轻松更改引导旋转木马滑动的方向。和之前的＆＃39;在你的jquery / js中。在我的情况下，我每隔5秒从右到左，从左到右改变滑动方向。这是代码。希望这会有所帮助。

"&"

Bootstrap Carousel - 改变循环方向

4 个答案: