Question

在bootstrap v3.3.7中，我可以通过更新css转换时间来更改轮播的转换持续时间

.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;
}

并在我自己的.js文件中覆盖bootstrap的Carousel.TRANSITION_DURATION变量：

$.fn.carousel.TRANSITION_DURATION = 1000;

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

但是，在bootstrap v4中，carousel.js文件已更新，它们将TRANSITION_DURATION提取为Carousel类的常量。因此，上述方法不再适用。

如何在不修改bootstrap.js 的情况下更改 bootstrap 4中的轮播的转换持续时间，因为当我运行干净时bootstrap.js中的所有更改都会消失以我的项目为基础？

Answer 1

查看我是如何做到的，https://codepen.io/Thumper/pen/JreoPm

脚本正在观看data-interval =＆＃34; 12000＆＃34;在每个.carousel-item div上。将此数字更改为每张幻灯片所需的间隔。

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

在脚本中更改＆＃34; #myCarousel＆＃34;匹配ID或您的轮播。

请注意，CSS仅在此处，因为我从他们的示例页面中抓取了Carousel。我还偷了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);
});

如何更改bootstrap 4轮播转换持续时间而不修改bootstrap.js

1 个答案: