8

多くの JavaScript または CSS タッチ スワイプ スライダーがありますが、それらはすべて、スライドの垂直方向または水平方向のスワイプしか許可していないようです。1 つのスライドで両方を許可し、1 つのスライドで水平方向と垂直方向にスワイプできるものはありますか?

4

3 に答える 3

4

これがあなたが探しているものかどうかは 100% わかりませんが、非常によく似ています。

iDangero.us スワイパー。

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

別の水平カルーセル/スライダー内で垂直スワップ ボックスを許可します。私はしばらくの間同じものを探していましたが、これは私が探しているものに最も近いプラグインです。少しのハッキング/操作で、おそらく探していることができるようになります。

于 2012-10-26T16:58:06.720 に答える
2

これは、水平および垂直スライダーを作成する簡単な方法です

<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 などです。

于 2014-12-23T09:47:23.030 に答える
1

このデモページに示されているように、fullPage.jsを使用して、説明どおりにスワイプすることができます。

fullPage.js に関する唯一の問題は、1:1 のタッチ移動がないことです。そのため、指が画面上にある限りスワイプを制御する代わりに、スクリプトには、画面の高さ/幅の X パーセントのしきい値のスワイプに達したことを示す構成可能な変数があります。これは機能しますが、1:1 のタッチ動作を行うRoyalSliderのようなものほど快適ではありません。したがって、49% だけスワイプすると、同じセクションにとどまります。つまり、fullPage.js は優れたサポート (IE8+) を備えており、定期的に更新されます。

理想的には、fullPage.js に1:1 のタッチ移動を持たせたいと思っています。作成者はプル リクエストを受け付けていますが、今のところ、JavaScript に関する私の知識は基本的すぎて、このようなものを実装できません。

現在検討中のオプションは、2 つのスライダーを組み合わせて使用​​することです。左右のスワイプにはRoyalSliderを使用し(1:1 のタッチが得られるように)、垂直方向の上下効果には fullPage.js を使用します。

于 2014-03-05T12:50:07.680 に答える