首页 > 解决方案 > 有没有办法改变 bootsrap 4 中轮播的滑动持续时间?

问题描述

我想知道是否有可能改变在旋转木马中滑动的持续时间我说的是这个 时间

有carousel-item-next的时间

enter c.carousel-fade .carousel-inner .carousel-item {
-webkit-transition-property: opacity;
transition-property: opacity;
transition-duration: .5s;
}

.carousel-fade .carousel-inner .carousel-item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

我正在使用这个 css 来制作淡入淡出动画,但是当你按下时,你实际上可以看到由于滑动持续时间,它需要一秒钟才能开始

我要离开一个 jsfiddle https://jsfiddle.net/w3o1y90p/6/

它的格式不正确,但它给出了这个想法

标签: htmlcssbootstrap-4

解决方案


在 HTML 标签中使用内联 CSS,例如:

<div class="slider" style="transition-duration: 5s;"></div>

//添加内联样式覆盖引导 CDN 并手动设置过渡持续时间。


推荐阅读