在bootstrap上创建滑动行

Question

首先，我的http://fiddle.jshell.net/clearblue/47r2Ltsk/2/

我正在尝试创建一个非常类似于此的效果。基本上唯一的区别是第二层列不应该像现在这样调整大小。我希望实现内柱保持固定宽度的效果。

例如，正如您所看到的，当滑动发生时，文本正在调整大小并重新打包。它应保持固定，并以动画完成时的宽度显示。

我使用的技术似乎不允许这样做。我开始怀疑是否有可能用这么几个j来做。

Answer 1

我已更新了您的fiddle。您需要启动第三列col-xs-12。每个列大小都是根据其内部元素定义的。因此，要填充col-xs-3父级，元素必须为col-xs-12。当它扩展为col-xs-9父级时，您希望它是总宽度的1/3，或col-xs-4。所以我为此添加了一个切换。

Answer 2

我通过使用slickjs解决了我的问题

这是js部分：

$('.top-slider').slick({
  dots: true,
  speed: 300,
  infinite: false,
  initialSlide: 3,
  slidesToShow: 3,
  slidesToScroll: 3,
  variableWidth: true,
  responsive: [
    {
      breakpoint: 991,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});