显示带有引导轮播的预览（上一张和下一张图片）

Question

I am having an issue showing previews of the previous and next images/slides with bootstrap carousel. I have followed the instructions in the this StackExchange article, but no matter how many times I start again and re-write it, it just wont show properly.

It keeps getting truncated and showing below.

I have created a Fiddle to demonstrate the issue.

I don't want to show much of the next slides, maybe 20px worth either side, mostly just to prompt the user to slide/swipe.

    .carousel {
    overflow: hidden;
}
.carousel-inner {
    width: 150%;
    left: -25%;
}
.carousel-inner > .item.next, 
.carousel-inner > .item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev, 
.carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, 
.carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
}

Any help on where I have gone wrong would be greatly appreciated.

Many Thanks

Anton

Answer 1

I would suggest you not to reinvent the wheel and to choose a slider which already has the functionality you are looking for or at leas something similar.

In my opinion Slick is one of the best sliders and it comes with a huge amount of customisation possibilities. In your case I would have a closer look the Center Mode of Slick .

All you have to do to achieve your goal is change the styling and the slidesToShow property.