【问题标题】: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; }
  • 我试过了,它不起作用..

标签: jquery css slider carousel


【解决方案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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-22
    • 2022-08-18
    • 2016-10-30
    • 1970-01-01
    • 2018-03-29
    相关资源
    最近更新 更多