Bootstrap Carousel - Changing the direction of the loop

Question

Can I change the bootstrap carousel tweeters cycle direction?

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

I want it to start automatically as follows:

(I have 3 images)

First image | Last (third) image | Second image | (reboot) First image | ...

Therefore, it should move the images on the right, and not on the left side of my carousel.

thanks!

Answer 1

Reorder them before initializing the carousel

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

Edit: Demonstration of the first line, initialization will require more scripts added to the script. http://jsfiddle.net/b6Y9v/

Answer 2

I needed to get a new function for the buttons, this function was: when the mouse is above the left or right button in the carousel, the carousel should start moving.

It was easy to make the left button when it moves forward, but when I have to do the same thing in the opposite direction, the carousel moves only 1 step back, and only 1, then it stops it.

So, I will help myself with the setInterval function

 onmouseover control = setInterval( "$('#" + name_carrousel + "_next_button').cyclenext()", 200 ); onmouseleave clearInterval( control ); $('#' + name_carrousel).carousel('pause'); 

I also changed the controls a bit:

 <!-- 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> 

This change id="carousel-example-generic_prev_button" as well as id="carousel-example-generic_next_button" this change helps us find the selector.

This is the base code below and it worked.

The code below is not easy to understand, because it deals with the jquery library. And it should work with several carousels, so the control variable is an array.

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

Check out my solution used to cycle the rtl carousel, this is a simple override:

Twitter Bootstrap Right-to-Left Carousel Elements (RTL) Canceled

Answer 4

You can easily change the direction of the bootstrap carousel to turn by calling "next" and "previous" in your jquery / js. In my case, I have to change the direction of sliding every 5 seconds from right to left and left to right. Here is the code for this. Hope this helps.

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