Horizontal scrolling and vertical scrolling in JqueryMobile

Question

I want to implement horizontal scrolling with vertical sliding .Something like picture given below.

I also downloaded the demo provided at http://www.idangero.us/sliders/swiper/ and try to modified according to my need. But could not able to do the same. If any one have Idea or link or demo project then please help me. Regards!

Answer 1

I'll go through code's main parts for more explanation.

HTML

<div class="wrapper">
  <div class="inner">
    <!-- images go here -->
   </div>
</div>

---

CSS

1. Wrapper - height and width should be adjusted to your need:

   .wrapper {
     overflow: hidden;
     position: relative;
     height: 200px;
     width: 400px;
     margin: 0 auto;
   }
   

2. Inner wrapper - To append images to:

   .inner {
     height: 200px;
     width: auto;
     position: absolute;
     left: 0;
     white-space: nowrap;
   }
   

3. Transition wrappers - Used for images transition in and out:

   .holder, .in, .hidden {
     position: absolute;
   }
   

4. Hide preloaded images:

   .hidden {
     display: none;
   }