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

Question

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

Answer 1

How to reverse the Bootstrap carousel by CSS

I have a solution by CSS only. No new scripts. No alteration of the HTML.

1. Make the images wide and responsive.
2. Change the order of the indicators. Return them to the center of the slide.
3. Change the direction of the transition.

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

  

    

    

    

  
  

    

      
    
    

      
    
    

      
    
  
  Previous
  Next