Geek Answers Handbook

Bi-directional touch pad for horizontal and vertical

There are many JavaScript or CSS touch screen sliders, but they all seem to allow you to either scroll vertically or horizontally. Is there anything that allows both on a single slide, so that I can scroll horizontally and vertically on a single slide?

+6
source share
3 answers

I'm not 100% sure if this is what you are looking for, but it looks damn close:

iDangero.us Swiper.

http://www.idangero.us/sliders/swiper/

Allows vertical sweeps within a single horizontal carousel / slider. I have been looking for the same thing for a while, and this is the closest plugin I have found for what I am looking for. A little hack / manipulation might make him do what you are looking for.

+3
source

You can use fullPage.js to scroll exactly as you describe, as shown on this demo page .

The only problem I encountered with fullPage.js is the lack of 1: 1 touch movement. Thus, instead of manipulating a swipe while you have your finger on the screen, the script has a custom variable that says that after a threshold gap of X percent of the height / width of the screen has been reached. It works, but doesn't seem nearly as enjoyable as RoyalSlider , which has a 1: 1 touch movement; so if you spend only 49% of how you stay in the same section. At the same time, fullPage.js has great support (IE8 +) and is regularly updated.

Ideally, I would like fullPage.js to have a 1: 1 touch movement , the author is open to request requests, but at the moment my knowledge of javascript is too simple to implement something like this.

The option that I am considering at the moment is to use two sliders in combination with each other. I'm going to use RoyalSlider for left and right scrolling (so you get a nice 1: 1 touch) and fullPage.js for a vertical up and down effect.

+1
source

Here is an easy way to create a horizontal and vertical slider.

<script> function MM_effectSlide1(targetElement, duration, to, from, slide, toggle) { Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: true, toggle: true}); } function MM_effectSlide2(targetElement, duration, to, from, slide, toggle) { Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: false, toggle: true}); } </script> <body> <div id="socialmedia" class="socialcontainer" onclick="MM_effectSlide1('socialmedia', 1000, '100%', '11%', true, true)"></div>

If you look at the code, the only code to be changed is MM_effectSlide1, 2, 3, etc.

+1
source

More articles:


All Articles