Istnieje wiele suwaków z przesunięciem dotykowym JavaScript lub CSS, ale wszystkie wydają się zezwalać tylko na przesunięcie pionowe lub poziome slajdu. Czy jest coś, co pozwala na oba slajdy, więc mogę przesunąć poziomo i pionowo na jednym slajdzie?Dwukierunkowy suwak do przesuwania dotykowego zarówno w poziomie, jak i w pionie
nie jestem 100% pewien, czy to jest to, czego szukasz, ale wygląda cholernie blisko:
iDangero.us Swiper.
http://www.idangero.us/sliders/swiper/
umożliwia pionowe paski swping w innej poziomej karuzeli/suwaka. Od jakiegoś czasu szukałem tego samego, a to jest najbliższa wtyczka, której znalazłem, czego szukam. Małe hakowanie/manipulacja może sprawić, że zrobi to, czego szukasz.
Możesz użyć fullPage.js, aby przesuwać dokładnie tak, jak opisujesz, jak pokazano na this demo page.
Jedyny problem jaki mam z fullPage.js to brak ruchu dotykowego 1: 1. Zamiast kontrolowanego przeciągnięcia tak długo, jak masz palec na ekranie, skrypt ma konfigurowalną zmienną, która mówi, że po przekroczeniu progu X procent wysokości/szerokości ekranu. To działa, ale nie jest tak przyjemne jak coś takiego, jak RoyalSlider, które ma ruch dotyku 1: 1; więc jeśli przesuniesz tylko o 49% sposobu pozostania w tej samej sekcji. To znaczy, że fullPage.js ma świetne wsparcie (IE8 +) i jest regularnie aktualizowany.
Idealnie chciałbym fullPage.js do have 1:1 touch movement, autor jest otwarty, aby pobierać żądania, ale na razie moja wiedza na temat javascript jest zbyt podstawowa, aby zaimplementować coś takiego.
Opcja, którą rozważam obecnie, wykorzystuje dwa suwaki w połączeniu ze sobą. Zamierzam użyć RoyalSlider dla lewego i prawego suwaka (aby uzyskać ładny dotyk 1: 1) i fullPage.js dla efektu pionowego w górę.
Oto prosty sposób na clreating poziomy i pionowy suwak
<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>
Jeśli spojrzeć na kod tylko kod, który powinien być zmieniany jest MM_effectSlide1, 2, 3, i tak dalej
Any aktualizacje na ten temat? Czy przy takim zachowaniu znalazłeś jakiś suwak? – briler
@briler Natychmiast pomyślałem o [idangero.us swiper] (http://www.idangero.us/sliders/swiper/), ale zostało to już wspomniane w odpowiedzi. Czy mógłbyś opisać to, czego potrzebujesz w trochę więcej szczegółów? Nie jestem w stanie wyobrazić sobie tego, czego szukasz. Dzięki. –