引导轮播项目图像产生过渡故障

时间:2018-08-08 15:10:41

标签: html css bootstrap-4 carousel

为什么过渡会在图像项上产生某种重复?轮播效果很好,只是过渡时出现了故障。使用引导程序3.3.7。谢谢

Image transition glitch

CSS

@media (min-width: 992px ) {

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

JS

<script>
$('.carousel[data-type="multi"] .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));

for (var i=0;i<4;i++) {
next=next.next();
if (!next.length) {
    next = $(this).siblings(':first');
}

next.children(':first-child').clone().appendTo($(this));
}
});
</script>

0 个答案:

没有答案