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

Question

How can I change the Twitter Bootstrap Carousel loop function to cyclically move elements from right to left, rather than left to right, so that they look normal on Hebrew / Arabic sites?

Answer 1

Just override the loop function with a similar function that calls prev instead of the following:

$(document).ready(function () { $('.carousel').each(function(){ $(this).carousel(); var carousel = $(this).data('bs.carousel'); // or .data('carousel') in bootstrap 2 carousel.pause(); // At first, reverse the order of the items in the carousel because we're moving backwards $(this).find('> .carousel-inner > .item:not(:first-child)').each(function() { $(this).prependTo(this.parentNode); }); // Override the bootstrap carousel prototype function, adding a different one won't work (it'll work only for the first slide) carousel.cycle = function (e) { if (!e) this.paused = false if (this.interval) clearInterval(this.interval); this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.prev, this), this.options.interval)) return this; }; carousel.cycle(); }); }); 

Answer 2

How to undo a Bootstrap carousel using CSS

I have a solution using CSS only. No new scripts. No HTML changes.

• Make your images wide and responsive.
• Reorder the indicators. Return them to the center of the slide.
• Change the direction of the transition.

Check the result:

jsfiddle codepen bootply

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); /* 1 */ #myCarousel img { height: auto; max-width: 100%; width: 100%; } /* 2 */ .carousel-indicators { width: auto; margin-left: 0; transform: translateX(-50%); } .carousel-indicators li { float: right; margin: 1px 4px; } .carousel-indicators .active { margin: 0 3px; } /* 3 */ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } 

 <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="//placehold.it/900x300/c69/f9c/?text=1" alt="First slide"> </div> <div class="item"> <img src="//placehold.it/900x300/9c6/cf9/?text=2" alt="Second slide"> </div> <div class="item"> <img src="//placehold.it/900x300/69c/9cf/?text=3" alt="Third slide"> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

Answer 3

For RTL languages ​​such as Persian, Arabic and Hebrew

In the bootstrap.js file, find and change the following lines:

 var delta = direction == 'prev' ? -1 : 1 

in

 var delta = direction == 'prev' ? 1 : -1 

and

 Carousel.prototype.next = function () { if (this.sliding) return return this.slide('next') } Carousel.prototype.prev = function () { if (this.sliding) return return this.slide('prev') } 

in

 Carousel.prototype.next = function () { if (this.sliding) return return this.slide('prev') } Carousel.prototype.prev = function () { if (this.sliding) return return this.slide('next') } 

Answer 4

I did another thing, was too lazy to stick to your decision (too much for me):

My settings: ASP.NET MVC, culture settings: Hebrew. My copy of the carousel sits under the girl divTopNewsSlider. ".slideshow-prev" and ".slideshow-next" are selectors for my previous and next icons.

Solution Steps:

• Define the culture of the user (I am developing for a content management system, so I need to get the culture settings from the server).

• Use it to determine the direction of the float of carousel elements li.

• Change the functionality of the next and prev carousel to their opposite, respectively.

In Razor:

 @functions { Boolean IsRTL() { return this.CultureDictionary.Language.CultureAlias.ToLower().IndexOf("he-il") > -1; } } 

In JavaScript:

  <script type="text/javascript"> var isRTL = "@IsRTL()".toLowerCase() === 'true'; $(".slideshow .pager li").css("float", isRTL ? "right" : "left"); $(document).ready(function () { if (isRTL) { $(".slideshow-prev").click(function () { $("#divTopNewsSlider").carousel('next'); event.stopPropagation(); }); $(".slideshow-next").click(function () { $("#divTopNewsSlider").carousel('prev'); event.stopPropagation(); }); } }); </script> 

Answer 5

using

 var carousel = $(this).data('bs.carousel'); 

instead

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

in bootstrap 3