如何將方向屬性用於引導 4 輪播？

Question

我在引導程序輪播的文檔頁面上看到，事件選項卡下有一個方向屬性，但我不知道使用它的語法，也找不到任何示例，希望有任何幫助。

從引導程序的輪播文檔中：

Bootstrap 的輪播 class 公開了兩個用於掛接到輪播功能的事件。 這兩個事件都具有以下附加屬性：

方向：旋轉木馬滑動的方向（“左”或“右”）。
relatedTarget：作為活動項滑入到位的 DOM 元素。
from：當前項的索引
to：下一項的索引

Answer 1

輪播將發出一個名為slide.bs.carousel的事件（當輪播完成其幻燈片轉換時會觸發此事件）。

該事件 object 具有稱為direction的屬性（其值為“左”或“右”）。

 $(function() { $("#carouselExampleControls").on("slide.bs.carousel", function(e) { console.log(e.direction); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="http://lorempixel.com/800/400/food/" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>