Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 416
iwek Avatar asked Oct 24 '12 16:10

iwek


Video Answer


2 Answers

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.

like image 57
Sean Thompson Avatar answered Sep 25 '22 02:09

Sean Thompson


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

like image 35
andre Avatar answered Sep 21 '22 02:09

andre