html - jquery mobile中的响应式网格

Question

我正在尝试使用 Jquery Mobile 创建一个响应式页面。我正在使用 ui-grid 创建 3 列布局（在宽屏上）并使用媒体查询将其显示为移动设备上的 3 行 1 列网格。

但我想要实现的是：在移动设备上而不是 3 行布局上，只应显示第一个网格，在滑动时应显示第二个网格，依此类推（类似于滑块）

有人可以为我提供示例和代码片段以在 Jquery mobile 中实现这一目标吗？

PS：对不起，我是stackoverflow的新手。所以无法在我的问题中添加图片

Answer 1

您可以使用

http://swipejs.com/

在 div 中定义网格

 <div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
  </div>
</div>

脚本

window.mySwipe = Swipe(document.getElementById('slider'));