使用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

这里是demo

修改如果您只希望将其应用于移动设备，请参阅移动设备专用代码：

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'));
  }
}

这是另一个demo