Twitter Bootstrap Carousel cycle items right to left ( RTL ) reversed
Solution 1
Just override the cycle function with a similar function that calls prev instead of next:
$(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();
});
});
Solution 2
How to reverse the Bootstrap carousel by CSS
I have a solution by CSS only. No new scripts. No alteration of the HTML.
- Make the images wide and responsive.
- Change the order of the indicators. Return them to the center of the slide.
- Change the direction of the transition.
Please check the result:
@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="https://via.placeholder.com/900x300/c69/f9c/?text=Right%20To%20Left" alt="First slide">
</div>
<div class="item">
<img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="Second slide">
</div>
<div class="item">
<img src="https://via.placeholder.com/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>
Solution 3
For RTL Languages such as Persian, Arabic and Hebrew
In the bootstrap.js file, find & change these lines:
var delta = direction == 'prev' ? -1 : 1
to:
var delta = direction == 'prev' ? 1 : -1
also
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev')
}
to:
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('prev')
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('next')
}
Adam Tal
Adam Tal ( אדם טל ) from Israel. Previously known as Adam Fridental ( אדם פרידנטל ). Family man, web developer and C# programmer. Experienced with javascript (react, nodejs, angular, knockoutjs, jquery), ASP.NET (MVC / Web API) and learning new things. Mostly occupied with web development but with great experience with building windows applications. Used to program for fun, These days I program 24/7 for living.
Updated on June 11, 2022Comments
-
Adam Tal almost 2 years
How can the Twitter Bootstrap Carousel cycle function can be changed to cycle the items from right to left instead of left to right so it'll look normal in hebrew/arabic websites?