2 行猫头鹰旋转木马或 BX 滑块

Posted

技术标签:

【中文标题】2 行猫头鹰旋转木马或 BX 滑块【英文标题】:2 Rows Owl Carousel or BX Slider 【发布时间】:2016-04-13 23:30:52 【问题描述】:

是否可以使用 Owl Carousel 或 BX Slider 在桌面上制作 2 行滑块并在移动屏幕上变为 1 行?我已经尝试了一些,但在移动设备上仍然是 2 行。你能帮忙吗?

【问题讨论】:

【参考方案1】:

这是猫头鹰轮播2的解决方案,可以控制盒子数量:

$(document).ready(function()
  $('.owl-carousel').owlCarousel(
      autoplay:true,
      responsive: 
        0: 
          items: 1
        ,
        600: 
           items: 2
        ,
        1000: 
          items: 3
        
      
    );
);

这个想法是声明你需要多少不同宽度的盒子。

【讨论】:

非常感谢【参考方案2】:
$('.carousel').slick(
        rows: 2,
        dots: true,
        arrows: false,
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
responsive: [
    
      breakpoint: 640,
      settings: 
        rows: 1,
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      
    ]
);

【讨论】:

以上是关于2 行猫头鹰旋转木马或 BX 滑块的主要内容,如果未能解决你的问题,请参考以下文章

猫头鹰旋转木马上的重叠幻灯片

猫头鹰旋转木马只显示 1 件商品

猫头鹰旋转木马不循环

猫头鹰旋转木马 2 不适用于 wordpress 星空主题

猫头鹰旋转木马2克隆项目点击事件没有开火

如何在猫头鹰旋转木马内居中img?