CODEWITHSUNDEEP
javascriptmobiletouchslideswipe
iwek
iwek

Reputation: 1608

Bidirectional touch swipe slider for both horizontal and vertical

There are many JavaScript or CSS touch swipe sliders out there but all of them seem to only allow either vertical or horizontal swipe of a slide. Is there anything out there that allows both on one slide, so I can swipe horizontally and vertically on one slide?

Upvotes: 8

Views: 9593

Answers (3)

andre
andre

Reputation: 21

Here is an Easy Way of clreating 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 that should be changed is the MM_effectSlide1, 2, 3, and so forth

Upvotes: 2

patrickzdb
patrickzdb

Reputation: 1073

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

The only issue I have with fullPage.js is the lack of 1:1 touch movement. So instead of the swipe being controlled as long as you have your finger on the screen, the script has a configurable variable that says once a threshold swipe of X percent of the screen height/width has been met. This works, but doesn't feel nearly as nice as something like RoyalSlider which does have 1:1 touch movement; so if you swipe only 49% of the way you remain on the same section. That said fullPage.js has great support (IE8+) and is updated regularly.

Ideally I'd like fullPage.js to have 1:1 touch movement, the author is open to pull requests but for now my knowledge of javascript is too basic to implement something like this.

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

Upvotes: 1

Sean Thompson
Sean Thompson

Reputation: 902

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

iDangero.us Swiper.

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

Allows vertical swping boxes within another horizontal carousel/slider. I've been looking for the same thing for awhile, and this is the closest plugin I've found to what I'm looking for. A little hacking/manipulation could probably make it do what you're looking for.

Upvotes: 4

Related Questions