フクロウカルーセルを左から右にスライドさせる方法は？

Question

私は複数のスライダー、すなわち行で設定しているが、事は、私はできないイム左から（それがで、デフォルトで）を左に右と奇数のものからスライドさせる偶数行を必要としています図となります。唯一のCSSによる

Answer 1

ブートストラップカルーセル（右から左へ、RTL）

HTML ----------------------------- ------

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="..." alt="..."> 
       <div class="carousel-caption"> 
       ... 
       </div> 
      </div> 
      <div class="item"> 
       <img src="..." alt="..."> 
       <div class="carousel-caption"> 
       ... 
       </div> 
      </div> 
      ... 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
      </a> 
     </div> 

CSS ------------------------------

   /* Make the images wide and responsive. */ 
      #myCarousel img { 
       height: auto; 
       max-width: 100%; 
       width: 100%; 
      } 

      /* Change the order of the indicators. 
       Return them to the center of the slide. */ 
      .carousel-indicators { 
       width: auto; 
       margin-left: 0; 
       transform: translateX(-50%); 
      } 
      .carousel-indicators li { 
       float: right; 
       margin: 1px 4px; 
      } 
      .carousel-indicators .active { 
       margin: 0 3px; 
      } 

      /* Change the direction of the transition. */ 
      @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); 
       } 
      }