Horizontal scrolling and vertical scrolling in JqueryMobile

0 votes

I want to implement horizontal scrolling with vertical sliding .Something like picture given below.enter image description here

For doing the same I search and found this one http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html But the code written in this blog does not make sense to me.

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!

Jun 21 in JQuery by gaurav
• 13,460 points
10 views

1 answer to this question.

0 votes

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;
    }
answered Jun 21 by rajatha
• 4,940 points

Related Questions In JQuery

0 votes
1 answer

addClass and removeClass in jQuery - not removing class

What happens is that your close button ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
31 views
0 votes
1 answer

get_template_directory_uri() in Jquery and CSS

JS files aren't parsed by PHP, so ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
35 views
0 votes
1 answer

Calculate the number of days between a cell and today in excel?

Excel Formula to Calculate Number of Days ...READ MORE

answered Jun 9 in JQuery by gaurav
• 13,460 points
7 views
0 votes
1 answer

Difference between :hidden and :not(:visible) in jQuery

During animations that hide an element, the ...READ MORE

answered Jun 14 in JQuery by gaurav
• 13,460 points
12 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
294 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
8,335 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
15,186 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,720 points
1,186 views
0 votes
1 answer

difference between $ and $() in jQuery

JavaScript: It is a major scripting programming language ...READ MORE

answered Jun 10 in JQuery by rajatha
• 4,940 points
10 views
0 votes
1 answer

How to add and remove classes in Javascript without jQuery

To add or remove a class on ...READ MORE

answered Jun 14 in JQuery by rajatha
• 4,940 points
6 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP