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, 2022 in JQuery by gaurav
• 23,260 points
1,177 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, 2022 by rajatha
• 7,640 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, 2022 in JQuery by Edureka
• 13,670 points
8,895 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, 2022 in JQuery by Edureka
• 13,670 points
1,978 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, 2022 in JQuery by gaurav
• 23,260 points
260 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, 2022 in JQuery by gaurav
• 23,260 points
510 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,510 points
955 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,880 points
14,057 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,880 points
22,326 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,880 points
2,922 views
0 votes
1 answer

difference between $ and $() in jQuery

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

answered Jun 10, 2022 in JQuery by rajatha
• 7,640 points
325 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, 2022 in JQuery by rajatha
• 7,640 points
591 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP