Twitter bootstrap 具有连续内容的引导传送带

Twitter bootstrap 具有连续内容的引导传送带,twitter-bootstrap,bootstrap-4,Twitter Bootstrap,Bootstrap 4,在Bootstrap 4中,是否可能有一个旋转木马,它没有分离的旋转木马项目,但可见?例如,您可以看到旋转木马项目2和3在第一个项目仍然可见的情况下继续。我的解释很糟糕,所以这里有一张图片可以帮助你: 我如何做到这一点 下面是代码的基本概要,我非常感谢您的建议。多谢各位 头衔 文本在此显示 您可以创建一个多项目旋转木马,并使用伪元素(::before,::after)在上一张幻灯片和下一张幻灯片上放置覆盖图 就是这样!谢谢,齐姆! .carousel, .carousel-inner,

在Bootstrap 4中,是否可能有一个旋转木马,它没有分离的旋转木马项目,但可见?例如,您可以看到旋转木马项目2和3在第一个项目仍然可见的情况下继续。我的解释很糟糕,所以这里有一张图片可以帮助你:

我如何做到这一点

下面是代码的基本概要,我非常感谢您的建议。多谢各位


头衔

文本在此显示


您可以创建一个多项目旋转木马,并使用伪元素(::before,::after)在上一张幻灯片和下一张幻灯片上放置覆盖图


就是这样!谢谢,齐姆!
.carousel,
.carousel-inner,
.carousel-inner > .carousel-item {
    overflow: hidden;
}
.carousel-inner > .carousel-item.active,
.carousel-inner > .carousel-item-next {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
}
.carousel-inner:before {
    position:absolute;
    top:0;
    bottom: 0;
    right: 82%;
    left: 0;
    content:"";
    display:block;
    background-color: #fff;
    z-index: 2;
}
.carousel-inner:after {
    position:absolute;
    top:0;
    bottom:0;
    right: 0;
    left: 82%;
    content:"";
    display:block;
    background-color:#fff;
    z-index: 2;
}