Bidirectional touch swipe slider for both horizontal and vertical

Asked 24/10, 2012 at 16:40 Answered 23/12, 2014 at 9:47

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?

Skeen answered 24/10, 2012 at 16:40 Comment(2)

Any updates on this? Did you find any slider with this behavior? – Colligate 24/2, 2014 at 8:28

@Colligate I immediately thought of the idangero.us swiper, but that was already mentioned in an answer. Could you describe what it is that you need in a little more detail? I'm not able to conceptualize what you are looking for. Thanks. – Hamel 25/2, 2014 at 20:57

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.

Ponceau answered 26/10, 2012 at 16:58 Comment(2)

Thanks, this is actually what I started with but it only supports either/or not both horizontal and vertical swipe on one slide. – Skeen 26/10, 2012 at 18:35

nice ! It would've had touch behaviors (tap, double tap, etc…), it would have absolutely perfect ! – Ioves 28/12, 2012 at 10:3

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

Continuity answered 23/12, 2014 at 9:47 Comment(0)

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.

Habitforming answered 5/3, 2014 at 12:50 Comment(0)

Recommended topics

Hot tags