在引導程序上創建滑動行

Question

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

我正在嘗試創建一種與此效果非常相似的效果。 基本上，唯一的區別是第二層列的大小不應該像現在這樣調整。 我想實現內部列保持固定寬度的效果。

例如，如您所見，當發生滑動時，文本會調整大小並重新包裝很多。 它應該保持固定，並以與動畫完成時相同的寬度顯示。

我使用的技術似乎不允許這樣做。 我開始懷疑是否有可能用這么少的js做到這一點。

Answer 1

我已經更新了你的小提琴 。 您需要使第三列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
      }
    }
  ]
});