Javascript 在引导上创建滑动行

首先，这里是我的

我正试图创造一种与此非常相似的效果。基本上唯一的区别是第二层列不应该像现在这样调整大小。我想实现一种效果，使内柱保持固定的宽度

例如，正如您所看到的，当滑动发生时，文本会大量调整大小和重编。它应该保持固定，并在动画完成时以相同的宽度显示

---

我使用的技术似乎不允许这样。我开始怀疑是否有可能用这么少的js来实现这一点。

我已经更新了你的。您需要使第三列

col-xs-12

开始。每个列的大小都是根据它所在的元素定义的。因此，要填充

col-xs-3

父元素，元素必须是

col-xs-12

。当它扩展为

col-xs-9

父项时，您希望它是总宽度的1/3，或者

col-xs-4

。所以我添加了一个切换

我用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
      }
    }
  ]
});

---

所以你想让这些栏目滑出屏幕？否则，它们怎么能保持相同的宽度呢？是的，这是您想要的效果。您可能希望使用全宽度列，而不涉及引导。在列中设置一个绝对定位的元素，然后简单地操纵它的左位置。我还要再等一天