responsive grid in jquery mobile

1
votes

I am trying to create a responsive page using Jquery Mobile. I am using ui-grid to create a 3 column layout (on wide screen) and using media queries I am showing it as 3 row, 1 column grid on a mobile.

But what I want to achieve is: On mobile instead of 3 row layout, only the 1st grid should be displayed and on swipe the second grid should be displayed and so on (Something like a slider)

Can someone provide me samples & code snippets to achieve this in Jquery mobile?

P.S: Sorry, I am new to stackoverflow. So not able to add images to my question

1
htmljquery-mobileresponsive-design

1 Answers

0
votes

you can use

http://swipejs.com/

define the grid in divs

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

script

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