Двунаправленный сенсорный слайдер для горизонтального и вертикального перемещения

Существует множество сенсорных слайдеров JavaScript или CSS, но все они, похоже, допускают только вертикальное или горизонтальное смахивание слайда. Есть ли что-нибудь, что позволяет и то, и другое на одном слайде, чтобы я мог проводить по горизонтали и по вертикали на одном слайде?


mobile javascript touch swipe slide
person iwek    schedule 24.10.2012    source источник
comment
Есть новости по этому поводу? Вы нашли слайдер с таким поведением?   -  person briler    schedule 24.02.2014
comment
@briler Я сразу подумал об свайпере idangero.us, но это уже упоминалось в отвечать. Не могли бы вы немного подробнее описать, что именно вам нужно? Я не могу понять, что вы ищете. Спасибо.   -  person Josh Durham    schedule 26.02.2014

Ответы (3)


arrow_upward
4
arrow_downward

Я не уверен на 100%, что это то, что вы ищете, но это выглядит чертовски близко:

iDangero.us Swiper.

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

Позволяет вертикально перемещать блоки внутри другой горизонтальной карусели/ползунка. Я искал то же самое некоторое время, и это самый близкий плагин, который я нашел, к тому, что я ищу. Небольшой взлом / манипуляция, вероятно, может заставить его делать то, что вы ищете.

person Sean Thompson    schedule 26.10.2012
comment
Спасибо, на самом деле это то, с чего я начал, но он поддерживает только горизонтальное и вертикальное смахивание на одном слайде. - person iwek; 26.10.2012
comment
Приятно ! У него было бы сенсорное поведение (касание, двойное касание и т. д.), оно было бы абсолютно идеальным! - person Ben; 28.12.2012

arrow_upward
2
arrow_downward

Вот простой способ создания горизонтального и вертикального слайдера.

<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 и т. д.

person andre    schedule 23.12.2014

arrow_upward
1
arrow_downward

Вы можете использовать fullPage.js, чтобы прокручивать точно так, как вы описываете, как показано на этой демонстрационной страницы.

Единственная проблема, с которой я столкнулся при работе с fullPage.js, — отсутствие сенсорного движения 1:1. Таким образом, вместо управления пролистыванием до тех пор, пока вы держите палец на экране, в скрипте есть настраиваемая переменная, которая сообщает, что после достижения порогового значения пролистывания в X процентов от высоты/ширины экрана. Это работает, но не так хорошо, как что-то вроде RoyalSlider, у которого есть 1: 1 касание; поэтому, если вы проведете только 49% пути, вы останетесь в том же разделе. При этом fullPage.js имеет отличную поддержку (IE8+) и регулярно обновляется.

В идеале я хотел бы, чтобы fullPage.js имело движение касания 1:1, автор открыт для запросов на вытягивание, но на данный момент мои знания javascript слишком базовые, чтобы реализовать что-то подобное.

В настоящее время я рассматриваю вариант использования двух ползунков в сочетании друг с другом. Я собираюсь использовать RoyalSlider для свайпов влево и вправо (так что вы получите хороший 1: 1 касание) и fullPage.js для вертикального эффекта вверх-вниз.

person patrickzdb    schedule 05.03.2014