引導輪播幻燈片左至右用引導我

移動，這是對這個代碼傳送帶移動從右到我的jsfiddle

代碼左

var direction = type == 'next' ? 'left' : 'right'

我在var中左右變化，但有問題。下一張幻燈片從便又

var direction = type == 'next' ? 'right' : 'left'

我希望你明白我想要什麼進來：d

編輯：

我終於找到了答案：我編輯的嘰嘰喳喳bootstrap.css

I在bootstrap.css中全部左右變換.carousel類

來源

2015-04-30 YuZA

我不認爲這是可能的。 – ketan

生活永遠只是不可能;-) – YuZA

Mr.YuZA，你能分享你的代碼，因爲我需要相同的。請幫我 –

您可以嘗試在.carousel控制HTML代碼

data-slide="prev" 
data-slide="next"

更改爲

data-slide="next" 
data-slide="prev"

來源

2015-04-30 08:47:36

他不需要點擊。他只需要從左至右移動傳送帶。 – ketan

我也改變了.bootstrap css來達到這種效果。我沒有在css中將所有的左派換成權利，而是在inner_carousel類中更改了這一行：

「6s易於進出」;到「6s緩出的權利」;

此外，我在inner_carousel類的所有子類中調用了「100％」到「-100％」和「100％」到「-100％」的所有調用。

來源

2015-08-28 21:42:40 Caro

我忘了提及100％和-100％的變化僅適用於inner_carousel的方向元素，例如「next，prev，left和right class」，當然不是寬度。 – Caro

對不起，Mr.Caro，我試過你的代碼不工作 –

引導旋轉木馬通過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); 
       } 
      }

來源

2017-05-06 12:48:08 ardalanSh

在引導v3.3.7找到 'bootstrap.js' 文件

現在，您可以發現代碼：

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

將其更改爲：

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

然後，找到這些行：

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

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

，並更改到：

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

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

來源

2017-12-28 16:13:13

引導輪播幻燈片左至右用引導我

回答

相關問題