Question

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

Answer 1

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

iDangero.us Swiper。

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

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

Answer 2

您可以使用fullPage.js完全按照描述进行滑动，如this demo page所示。

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

理想情况下，我想将fullPage.js改为have 1:1 touch movement，作者可以拉取请求但是现在我对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 个答案: