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
• 22,940 points
357 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,480 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,640 points
3,312 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,640 points
753 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
• 22,940 points
58 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
• 22,940 points
149 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
472 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,820 points
10,682 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,820 points
18,384 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,820 points
1,851 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,480 points
89 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,480 points
118 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