创建一个 3 列轮播滑块

【问题标题】：create a 3-column carousel slider创建一个 3 列轮播滑块
【发布时间】：2016-08-09 05:12:26
【问题描述】：

我想创建一个 3 列的轮播滑块。我希望左右图像出现 50%（见图）。有什么想法吗？

【问题讨论】：

您能提供给我们您的代码吗？
我使用链接中的滑块：github.com/michaelsoriano/content-slider 进行一些更改。我还发现了光滑的滑块 (kenwheeler.github.io/slick) 但它不起作用..
我找到了这个引导滑块jsbin.com/jadahetoxi/3/edit?html,css,js 我希望活动项目（居中的图像）具有其他光标类型。我尝试了以下方法： .carousel-inner > .item.active{ cursor:crosshair !important; } 但它不起作用。有什么想法吗？
试试这个css风格：.carousel-inner:hover { cursor: crosshair; }
我试过了，它不起作用..

【解决方案1】：

我遇到了同样的问题并尝试了这个：

$('.owl-carousel').owlCarousel({
        loop: true,              <<-- this
        margin: 24,
        nav: false,
        dots: true,
        responsiveClass: true,
        stagePadding: 100,       <<-- this   
        autoWidth:true,          <<-- this
        center: true,            <<-- this
})

loop: 这样你就有左右邻居了
stagePadding: 在舞台上左右垫脚（可以看到邻居）。
autoWidth: 用于自定义项目宽度
center: 因为你的活跃将在中心

对于 stagePadding，您可以调整所需的大小。资源： https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html

【讨论】：