2016-10-11 87 views

回答

1

引导旋转木马通过CSS只(从右到左,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); 
       } 
      }