javascript - 使用 Bootstrap 创建带有列的滑块

Question

我有一个有 4 列的网站。我想让它具有响应性，但不是像 Bootstrap 的默认方法那样在底部显示列，我希望列是设备的全宽并在它们之间滑动。

这是一个架构：

到目前为止我做了什么：

jsfiddle

@media (max-width: 979px) {
.container {
    max-width: none !important;
}
.column1 {
    width: 100%;
}

}

是否可以使用设备宽度而不是容器宽度使列全宽？我必须使用javascript吗？

Answer 1

如果你不介意使用 javascript，你可以使用Swipe.js

html结构如下：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS 看起来像这样：

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

Javascript 看起来像这样：

window.onload = function() {
  window.mySwipe = Swipe(document.getElementById('slider'));
}

不要忘记包含 javascript 文件： https ://github.com/bradbirdsall/Swipe/blob/master/swipe.js

这是一个演示

编辑如果您只希望这适用于移动设备，这里是移动特定代码：

HTML 会变成这样：

<div id='slider'>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

JavaScript 会变成这样：

window.onload = function() {
  if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var slider = document.getElementById('slider');
    if (slider.classList) {
      slider.classList.add('swipe');
      slider.getElementsByTagName('div')[0].classList.add('swipe-wrap');
    } else {
      slider.className += 'swipe';
      slider.getElementsByTagName('div')[0].className += 'swipe-wrap';
    }
    window.mySwipe = Swipe(document.getElementById('slider'));
  }
}

这是另一个演示