水平和垂直双向触摸滑动滑块

Question

有许多JavaScript或CSS触摸滑动滑块，但它们似乎只允许垂直或水平滑动滑块。 是否有任何东西允许在一张幻灯片上，所以我可以在一张幻灯片上水平和垂直滑动？

Answer 1

如果这是你想要的，我不是百分百肯定，但它看起来很接近：

iDangero.us Swiper。

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

允许在另一个水平转盘/滑块内垂直摆动盒子。 我一直在寻找相同的东西，这是我找到的最接近的插件我正在寻找的东西。 一点点黑客/操纵可能会让它做你想要的。

Answer 2

您可以使用fullPage.js完全按照您的描述进行滑动，如此演示页面所示。

我对fullPage.js唯一的问题是缺少1：1的触摸动作。 因此，只要您将手指放在屏幕上，扫描就不会受到控制，而是脚本有一个可配置的变量，表示一旦达到屏幕高度/宽度的X％的阈值滑动。 这可行，但感觉不像RoyalSlider那样有1：1触摸运动的东西; 所以，如果你只滑动49％的方式保持在同一部分。 那就是说fullPage.js有很大的支持（IE8 +）并定期更新。

理想情况下，我希望fullPage.js 具有1：1的触摸移动，作者可以拉开请求，但是现在我对javascript的了解太基础了，无法实现这样的事情。

我正在考虑的一个选项是使用两个滑块相互组合。 我将使用RoyalSlider进行左右滑动（因此获得良好的1：1触摸）和fullPage.js用于垂直向上滑动效果。

Answer 3

这是一个简单的方式来创建水平和垂直滑块

<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>

如果查看代码，唯一应该更改的代码是MM_effectSlide1,2,3等等

水平和垂直双向触摸滑动滑块

问题描述

3 个解决方案

解决方案1
3 2012-10-26 16:58:06

解决方案2
1 2014-03-05 12:50:07

解决方案3
1 2014-12-23 09:47:23

水平和垂直双向触摸滑动滑块

问题描述

3 个解决方案

解决方案1 3 2012-10-26 16:58:06

解决方案2 1 2014-03-05 12:50:07

解决方案3 1 2014-12-23 09:47:23

解决方案1
3 2012-10-26 16:58:06

解决方案2
1 2014-03-05 12:50:07

解决方案3
1 2014-12-23 09:47:23