2012-10-24 5 views
6

Es gibt viele JavaScript- oder CSS-Touch Swipe-Schieberegler, aber alle scheinen nur entweder vertikal oder horizontal zu wischen. Gibt es da draußen etwas, das beides auf einer Folie erlaubt, sodass ich auf einer Folie horizontal und vertikal wischen kann?Bidirektionaler Touch Swipe-Schieberegler für horizontales und vertikales

+0

Beliebig Updates zu diesem Thema? Haben Sie einen Schieberegler mit diesem Verhalten gefunden? – briler

+0

@briler Ich dachte sofort an die [idangero.us swiper] (http://www.idangero.us/sliders/swiper/), aber das wurde bereits in einer Antwort erwähnt. Können Sie beschreiben, was Sie in etwas mehr Detail benötigen? Ich bin nicht in der Lage zu konzeptualisieren, was Sie suchen. Vielen Dank. –

Antwort

3

Ich bin nicht 100% sicher, ob dies ist, was Sie suchen, aber es sieht verdammt nah:

iDangero.us swiper.

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

Ermöglicht vertikale swping Boxen in einem anderen horizontalen Karussell/Schieber. Ich habe eine Zeitlang nach dem gleichen gesucht, und das ist das nächste Plugin, das ich gefunden habe, wonach ich suche. Ein wenig Hacking/Manipulation könnte es wahrscheinlich tun, was Sie suchen.

+0

Danke, das ist eigentlich, was ich angefangen habe, aber es unterstützt nur entweder/oder nicht beide horizontale und vertikale wischen auf einer Folie. – iwek

+0

schön! Es hätte Touch-Verhalten (Tippen, Doppeltippen, etc ...) gehabt, es wäre absolut perfekt! – Ben

1

Sie können fullPage.js verwenden, um genau wie beschrieben zu wischen, wie auf gezeigt.

Das einzige Problem, das ich mit fullPage.js habe, ist das Fehlen von 1: 1 Touch-Bewegung. Anstatt also den Swipe so lange zu steuern, wie Sie Ihren Finger auf dem Bildschirm haben, hat das Skript eine konfigurierbare Variable, die besagt, dass sobald ein Schwellwert von X Prozent der Bildschirmhöhe/-breite erreicht wurde. Das funktioniert, fühlt sich aber nicht annähernd so gut an wie etwas wie RoyalSlider, das eine 1: 1-Touch-Bewegung hat; Wenn du also nur 49% wischst, bleibst du im selben Abschnitt. Das heißt, dass fullPage.js hat große Unterstützung (IE8 +) und wird regelmäßig aktualisiert.

Idealerweise möchte ich fullPage.js zu have 1:1 touch movement, der Autor ist offen, Anfragen zu ziehen, aber für jetzt ist mein Wissen über Javascript zu einfach, um etwas wie das zu implementieren.

Eine Option, die ich im Moment in Betracht ziehe, ist die Verwendung von zwei Slidern in Kombination miteinander. Ich werde RoyalSlider für die linken und rechten Swipes verwenden (damit Sie die nette 1: 1-Berührung erhalten) und fullPage.js für den vertikalen Up-Down-Effekt. Hier

1

ist eine einfache Möglichkeit von clreating horizontalen und vertikalen Schiebern

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

Wenn Sie den Code anschauen, die nur Code, der geändert werden soll, ist die MM_effectSlide1, 2, 3 und so weiter

Verwandte Themen