Javascript Bootstrap 3旋转木马在滑动时隐藏图像

我正在为一家公司开发一个网站。在网站的某个部分，我使用引导旋转木马来展示一些项目，这是我的问题：

当我单击使旋转木马滑动的按钮时会发生这种情况，单击后，当第一个图像离开旋转木马时，我会看到第一个图像与第三个图像的交换。基本上，我想要的是当用户点击导航按钮时，旋转木马幻灯片只显示四幅图像，并隐藏即将离开的图像

这是我的旋转木马CSS：

    @media all and (transform-3d), (-webkit-transform-3d) {
    .carousel#solutions-carousel > .carousel-inner{
        margin: auto;
        overflow: hidden;
        width: 100%;
    }
    .carousel#solutions-carousel > .carousel-inner .item{
        -webkit-transition: -webkit-transform .6s ease-in-out;
        -o-transition: -o-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        transition-timing-function:linear;
    }
    .carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.right{
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
    }
    .carousel#solutions-carousel > .carousel-inner .item.prev, .carousel#solutions-carousel > .carousel-inner .item.active.left{
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
    }
    .carousel#solutions-carousel > .carousel-inner .item.prev.right,
    .carousel#solutions-carousel > .carousel-inner .item.next.left,
    .carousel#solutions-carousel > .carousel-inner .item.active{
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);    
    }
}
.carousel#solutions-carousel > .carousel-inner .active,
.carousel#solutions-carousel > .carousel-inner .next,
.carousel#solutions-carousel > .carousel-inner .prev{
    display: block;
}
.carousel#solutions-carousel > .carousel-inner .active{
    left:0;
}
.carousel#solutions-carousel > .carousel-inner .next,
.carousel#solutions-carousel > .carousel-inner .prev{
    position: absolute;
    top: 0;
    width: 100%;
}
.carousel#solutions-carousel > .carousel-inner .next{
    left: 75%;
}
.carousel#solutions-carousel > .carousel-inner .prev{
    left: -75%;
}
.carousel#solutions-carousel > .carousel-inner .next.left,
.carousel#solutions-carousel > .carousel-inner .prev.right{
    left: 0;
}
.carousel#solutions-carousel > .carousel-inner .active.left {
left: -75%;
}

.carousel#solutions-carousel > .carousel-inner .active.right {
left: 75%;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info{
    padding-left: 0px;
    padding-right: 0px;
    width: 25%;
    display: inline-block;
    float:left;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info .image-wrapper{
    overflow: hidden;
    background-color: #000000;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info a:hover img{
    opacity: 0.6;
    transform: scale(1.1);
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info img{
    width: 100%;
    background-color: #000000;
    transition:transform .3s ease-in-out, opacity .3s ease-in-out;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info .solution-caption{
    margin-top: 2%;
    left:0%;
}
.carousel#solutions-carousel > .carousel-inner > .item .solution-info a:hover h3{
    color:#8c8c8c;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption{
    position: relative;
    text-shadow: none;
    margin-top: 20px;
    left: 0;
    right: 0;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption > .caption-title h3{
    font-family: "Ubuntu Condensed";
    color:  #000000;
    font-size: 32px;
    font-weight: 400;
    text-align: center;
    color:; .3s ease-in-out;
    text-transform: uppercase;
    margin-top: 30px;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption .caption-body{
    margin-top: 24px;
}
.carousel#solutions-carousel > .carousel-inner > .item .carousel-caption > .caption-body p{
    font-family: "Merriweather", sans-serif;
    color:  #5a5959;
    font-size: 16px;
    font-weight: 300;
    line-height: 26.444px;
    text-align: center;
    margin-left:6%;
    margin-right:6%;
}
.carousel#solutions-carousel .carousel-control#right-btn{
    margin-bottom: 12.7%;
    margin-right: 3%;
}
.carousel#solutions-carousel .carousel-control#left-btn{
    margin-bottom: 12.7%;
    margin-right: 5.6%;
}

$('.carousel#solutions-carousel .item').each(function () {
        console.log("aqui");
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i=0;i<2;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
        }
    });

以下是生成旋转木马的代码（此代码没有问题）：

唯一缺少的是左边的：0；这两种指示都适用

希望这对任何人都有帮助

//转盘自动循环
$（文档）.ready（函数（）{
$（'.carousel'）。carousel({
间隔时间：6000
})
});
/*全局*/
身体{
背景：#3399cc；
填充：40px；
}  
img{最大宽度：100%；}
a{
-webkit转换：所有150ms的易用性；
-moz转换：所有150ms的易用性；
-ms转换：所有150ms的易用性；
-o-过渡：所有150ms的易用性；
过渡：所有150ms缓解；
}
a:悬停{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；/*IE 8*/
过滤器：alpha（不透明度=50）；/*IE7*/
不透明度：0.6；
文字装饰：无；
}
/*容器*/
.容器液体{
背景：#FFFFFF；
利润率：40px自动10px；
填充：20px40px0；
最大宽度：960像素；
长方体阴影：0 1px 1px rgba（0,0,0,0.1）；
}
/*页眉*/
.页眉{
背景#f9f9f9；
利润：-30px-40px-40px；
填充：20px 40px；
边框顶部：4px实心#ccc；
颜色：#999；
文本转换：大写；
}
.页眉h3{
线高：0.88雷姆；
颜色：#000；
}
/*缩略框*/
.标题h4{
字号：1rem；
颜色：#444；
}
.标题p{
字体大小：0.75rem；
颜色：#999；
}
.btn.btn-mini{
字体大小：0.63rem；
}
/*转盘控制*/
.控制箱{
文本对齐：右对齐；
宽度：100%；
}
.传送带控制{
背景:#666；
边界：0px；
边界半径：0px；
显示：内联块；
字体大小：34px；
字号：200；
线高：18px；
不透明度：0.5；
填充：4px10px 0px；
位置：静态；
高度：30px；
宽度：15px；
}
/*页脚*/
.页脚{
保证金：自动；
宽度：100%；
最大宽度：960像素；
显示：块；
字体大小：0.69rem；
}
.footer、.footer a{
颜色：#c9e4f7；
}
p、 对{
浮动：对；
}
/*仅移动*/
@介质（最大宽度：767px）{
.页眉，.控制框{
文本对齐：居中；
} 
}
@介质（最大宽度：479px）{
.标题{
单词break：打破一切；
}
}
/*附加组件
-------------------------------------------------- */
正文：在{content:“小于320px”之后；字体大小：1rem；字体大小：粗体；位置：固定；底部：0；宽度：100%；文本对齐：居中；背景色：hsla（1,60%，40%，0.7）；颜色：fff；高度：20px；顶部填充：0；左边距：0；左侧：0}@仅媒体屏幕和（最小宽度：320px）{正文：在{content:“320到480px”之后；背景色：hsla（90,60%，40%，0.7）；高度：20px；顶部填充：0；左边距：0}}@media-only屏幕和（最小宽度：480px）{body:after{content:“480到768px”；背景色：hsla（180,60%，40%，0.7）；高度：20px；顶部填充：0；左边距：0}}@media-only屏幕和（最小宽度：768px）{body:after{content:“768到980px”；背景色：hsla（270,60%，40%，0.7）；高度：20px；顶部填充：0；左侧空白：0}}@media-only屏幕和（最小宽度：980px）{body:after{content:“980至1024px”；背景色：hsla（300,60%，40%，0.7）；高度：20px；顶部填充：0；左侧空白：0}}@media-only屏幕和（最小宽度：1024px）{body:after{content:“1024及以上”；背景色：hsla（360,60%，40%，0.7）；高度：20px；填充顶部：0；左边距：0}
：：选择{背景：#ff5e99；颜色：#FFFFFF；文本阴影：0；}
：-moz选择{背景：#ff5e99；颜色：#FFFFFF；}
a、 a:焦点，a:活动，a:悬停，对象，嵌入{大纲：无；}
：-moz-any-link:focus{outline:none；}
输入：：-moz焦点内部{border:0；}

独自创立
响应式移动盒子转盘演示



普雷森特康莫多酒店
Nullam调味品Nibh Etiam Sem



普雷森特康莫多酒店
Nullam调味品Nibh Etiam Sem



普雷森特康莫多酒店
Nullam调味品Nibh Etiam Sem



普雷森特康莫多酒店
Nullam调味品Nibh Etiam Sem




$('.carousel#solutions-carousel .item').each(function () {
        console.log("aqui");
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i=0;i<2;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));
        }
    });

.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.right{
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
    }


.carousel#solutions-carousel > .carousel-inner .item.next, .carousel#solutions-carousel > .carousel-inner .item.active.left{
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
    }