Javascript Bootstrap 4 Beta中旋转木马的淡入淡出过渡

我正在尝试修改新的Bootstrap 4 Beta Carousel，以使用渐变而不是滑动动作从幻灯片过渡到幻灯片，并使用CSS。我不能让它工作。我不确定是否需要特殊的Javascript调用

请参见此处的代码笔：

.carousel fade.carousel inner.item{
-webkit转换属性：不透明度；
过渡特性：不透明度；
}
.旋转木马褪色。旋转木马内部。项目，
.旋转木马淡入淡出。旋转木马内部。激活。左侧，
.旋转木马淡入淡出。旋转木马内部。激活。右侧{
不透明度：0；
}
.旋转木马淡入淡出。旋转木马内部。激活，
.旋转木马淡入.旋转木马内部.下一个.左，
.carousel淡入淡出。carousel内部。右上角{
不透明度：1；
}
.旋转木马褪色。旋转木马内部。下一步，
.旋转木马淡入淡出。旋转木马内部。上一页，
.旋转木马淡入淡出。旋转木马内部。激活。左侧，
.旋转木马淡入淡出。旋转木马内部。激活。右侧{
左：0；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.carousel淡入淡出。carousel控制{
z指数：2；
}
html，
身体，
旋转木马
.传送带内，
.旋转木马内部.项目{
身高：100%；
}

这是一个适用于Bootstrap 4 Beta版的解决方案

.carousel淡入淡出。carousel项目{
显示：块；
位置：相对位置；
不透明度：0；
过渡：不透明度。75秒缓进缓出；
}
.行{
宽度：100%；
}
.carousel淡入淡出。carousel-item.active{
不透明度：1；
显示：块；
}
.行{
宽度：100%；
}
旋转木马{
位置：相对位置；
排名：0；
左：0；
背景色：淡天蓝；
}
.旋转木马内部{
背景颜色：粉红色；
身高：100%；
}
.传送带项目{
背景颜色：黄色；
不透明度：.5；/*在此行中添加了克隆*/
}
a、 转盘控制下一个：链接，a.转盘控制上一个：链接{
背景色：透明；
文字装饰：无；
不透明度：.5；
}
a、 转盘控制下一步：悬停，a。转盘控制上一步：悬停{
背景色：透明；
文字装饰：无；
不透明度：1；
}
.carousel控件下一个图标、.carousel控件上一个图标{
位置：相对位置；
背景图像：无；
}    
.carousel控件下一个图标：之前{
排名：0；
左：-5px；
右边填充：10px；
}
.carousel控件上一个图标：之前{
排名：0；
左：-5px；
右边填充：10px；
}
.侧边栏{
背景色：#e1e1；
}

桌头
内容
内容
内容
内容
边栏

这是一个与发布的Bootstrap 4 Stable一起使用的解决方案

从这个主题出发：

#图像1{
背景图像：url（'http://via.placeholder.com/1440x813');
}
#图2{
背景图像：url（'http://via.placeholder.com/1440x813');
}
#图3{
背景图像：url（'http://via.placeholder.com/1440x813');
}
.传送带项目{
高度：100vh；
最小高度：300px；
背景图像：无重复中心滚动；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.旋转木马{
不透明度：1；
}
.carousel.fade.carousel项目{
-moz过渡：不透明度降低，降低0.7秒；
-o型过渡：不透明度缓进缓出。7秒；
-webkit过渡：不透明度降低，输入输出。7秒；
过渡：不透明度缓进缓出。7秒；
左：0！重要；
不透明度：0；
排名：0；
位置：绝对位置；
宽度：100%；
显示：块！重要；
z指数：1；
}
.carousel.fade.carousel项目：第一个孩子{
顶部：自动；
位置：相对位置；
}
.carousel.fade.carousel-item.active{
不透明度：1；
-moz过渡：不透明度降低，降低0.7秒；
-o型过渡：不透明度缓进缓出。7秒；
-webkit过渡：不透明度降低，输入输出。7秒；
过渡：不透明度缓进缓出。7秒；
z指数：2；
}
.旋转木马控制下一步，
.carousel control prev{
z指数：10；
}

完全滑块-启动引导模板













第一张幻灯片
这是第一张幻灯片的说明

第二张幻灯片
这是第二张幻灯片的说明

第三张幻灯片
这是第三张幻灯片的说明

全滑块启动引导
滑块的背景图像使用内嵌CSS直接在HTML中设置。此模板的其余样式包含在
full slider.css
文件。

版权和副本；您的网站2018

是的，谢谢，我反复尝试让那段代码在没有运气的情况下工作。但是谢谢你的鼓励。我发布的链接有工作代码。如果它能工作，你不需要尝试让它工作……告诉你——看看我发布的代码并帮我解决。看起来引导团队在4测试版中对Carousel组件进行了更改。这就解释了为什么你上面提到的代码不起作用（对我来说），也就是说，因为我使用的是4的beta版本。我只是想要这个效果，但我与display:block有冲突，你知道我能做什么吗？不需要这个。Bootstrap stable已具有淡入淡出功能。应用类

c