如何更改引導4輪播過渡時間，而無需修改bootstrap.js

在bootstrap v3.3.7，我可以通過更新CSS過渡時間如何更改引導4輪播過渡時間，而無需修改bootstrap.js

.carousel-inner > .item { 
    -webkit-transition: 1s ease-in-out left; 
    -moz-transition: 1s ease-in-out left; 
    -o-transition: 1s ease-in-out left; 
    transition: 1s ease-in-out left; 
}

和壓倒一切的自舉的Carousel.TRANSITION_DURATION變量在我自己的.js改變轉盤的過渡期文件：

$.fn.carousel.TRANSITION_DURATION = 1000; 

$('.carousel').carousel();

然而，在bootstrap v4的carousel.js文件進行了更新，他們提取TRANSITION_DURATION作爲一個恆定出旋轉木馬類的。所以，上述方法不再適用。

我如何更改引導4輪播過渡期間無需修改bootstrap.js，因爲所有在bootstrap.js的變化會消失，當我在我的項目上運行一個乾淨的構建？

來源

2017-10-11 Thai Ha

我不認爲你可以。如果你需要這種行爲，並且不想修改源代碼，我會建議使用它們來記錄請求。 –

退房我是怎麼做的，https://codepen.io/Thumper/pen/JreoPm

腳本是看每個.carousel項DIV數據間隔=「12000」。將此數字更改爲每張幻燈片所需的間隔。

<div class="carousel-item" data-interval="12000">

在腳本中更改「#myCarousel」以匹配ID或您的傳送帶。

請注意，CSS只是在這裏，因爲我從他們的示例頁面抓住了傳送帶。我也偷走了console.log，並將它放在Bootstrap Alert div中以查看頁面中的每個幻燈片間隔。

var t; 
var start = $("#myCarousel") 
    .find(".active") 
    .data("interval"); 
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", start - 1000); 

$("#myCarousel").on("slid.bs.carousel", function() { 
    clearTimeout(t); 
    var duration = $(this) 
     .find("div.carousel-item.active") 
     .data("interval"); 
    console.log(duration); 

$("#myCarousel").carousel("pause"); 
    t = setTimeout("$('#myCarousel').carousel();", duration - 1000); 
}); 

$(".carousel-control-next").on("click", function() { 
    clearTimeout(t); 
}); 

$(".carousel-control-prev").on("click", function() { 
    clearTimeout(t); 
});

來源

2017-10-18 15:47:25 Thumper

如何更改引導4輪播過渡時間，而無需修改bootstrap.js

回答

相關問題