Горизонтальный слайдер с поддержкой jQuery и сенсорных устройств?

Ответ 1

По-моему iosSlider потрясающе. Он работает практически на любом устройстве и хорошо документирован. Это бесплатно для личного использования, но для коммерческих сайтов лицензия стоит 20 долларов.

Также отличный вариант touchCarousel или RoyalSlider от того же автора. У этих двух есть все, что вам понадобится, , но также не бесплатно и цена 10-12 $

Ответ 2

Я бы также рекомендовал http://cubiq.org/iscroll-4

НО, если вы не копаете, попробуйте этот плагин

http://www.zackgrossbart.com/hackito/touchslider/

он работает очень хорошо и по умолчанию используется горизонтальная панель слайдов на рабочем столе - она ​​не такая элегантная на рабочем столе, как iscroll-4, но она отлично работает на сенсорных устройствах

УДАЧА!

Ответ 3

Если бы я был вами, я бы реализовал свое собственное решение на основе спецификаций событий. В основном, что такое салфетки - это управление касанием, касание движения, прикосновение к событиям. вот отрывок из моей собственной библиотеки для обработки событий iPhone touch:

touch_object.prototype.handle_touchstart = function(e){
    if (e.targetTouches.length != 1){
        return false;
    }
    this.obj.style.zIndex = 100;
    e.preventDefault();
    this.startX = e.targetTouches[0].pageX - this.geometry.x;
    this.startY = e.targetTouches[0].pageY - this.geometry.y;
    /* adjust for left /top */
    this.bind_handler('touchmove');
    this.bind_handler('touchend');
}
touch_object.prototype.handle_touchmove = function(e) {
    e.preventDefault();
    if (e.targetTouches.length != 1){
        return false;
    }
    var x=e.targetTouches[0].pageX - this.startX;
    var y=e.targetTouches[0].pageY - this.startY;
    this.move(x,y);

}
touch_object.prototype.handle_touchend = function(e){
    this.obj.style.zIndex = 10;
    this.unbind_handler('touchmove');
    this.unbind_handler('touchend');
}

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

Таким образом, это действительно помогает понять основы того, как все работает, а затем создавать более сложные решения. это также может помочь.

Я использовал это, чтобы создать свое решение:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Ответ 4

Вы пробовали iosSlider? Он может делать именно то, что вам нужно.

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

Ответ 5

Взгляните на iScroll v4 здесь: http://cubiq.org/iscroll-4

Возможно, это не jQuery, но он отлично работает на настольном мобильном устройстве и iPad; Я использовал его во многих проектах и ​​объединил его с jQuery.

Удачи!

Ответ 6

Это может соответствовать вашим потребностям:
http://caroufredsel.frebsite.nl/

Добавить jquery Touchwipe для сенсорной поддержки

Затем в конфигурации добавьте

scroll : {
wipe: true
}

Ответ 7

Вы видели FlexSlider из WooThemes? Я использовал его в нескольких недавних проектах с большим успехом. Он также включен так, что он будет работать как с браузерами на основе мыши, так и с сенсорными браузерами в iOS и Android.

Ответ 8

Я нашел это, надеюсь, что это поможет http://www.zackgrossbart.com/hackito/touchslider/

Ответ 9

Я сделал somthink как это для одного из моего сайта accualy в developpement.

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

В дополнение к этому, чтобы добавить эффект сенсорного салфетки, я использовал jquery.touchswipe плагин;

И stepcarousel переместит панель или выйдет с помощью фильтра, поэтому я могу сделать:

$("#slider-actu").touchwipe({
    wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
    wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
    min_move_x: 20
});

Вы можете просмотреть фактический рендер на этой странице

Надеюсь, что вам помогут.

Ответ 10

Ive нашел другое: http://swipejs.com/

похоже, работает хорошо, однако я столкнулся с проблемой с ним, когда он сопряжен с загрузкой в ​​OS X версии Chrome. Если общая совместимость с несколькими браузерами не является проблемой, значит, вы золотые.

Ответ 11

Это выглядит похоже и использует jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery

И, демонстрация этого http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html

Ответ 12

Посмотрите на просмотр прокрутки jQuery (demo здесь). Здесь - это хранилище концентраторов git для этого экспериментального проекта. Посмотрите их html, чтобы посмотреть, какие файлы необходимо включить и какие атрибуты добавить к элементам, которые вы хотите прокручивать.

Я использовал это, чтобы прокручивать элементы div горизонтально на сенсорных устройствах.

Ответ 13

Вам может быть интересно следующее:

• jQuery Мобильная карусель (github)
• jQuery Mobile

Я понимаю, что это не решение jQuery, но Sencha Touch framework неплохо подходит для создания целевого пользовательского интерфейса. Пример (щелкните ссылку боковой панели карусели): http://dev.sencha.com/deploy/touch/examples/kitchensink/

Ответ 14

Оформить заказ Портфолио jQuery: http://portfoliojs.com

Этот плагин поддерживает Touch Devices, настольные компьютеры и мобильные браузеры. Кроме того, он имеет функцию предварительной загрузки.

Ответ 15

С моим опытом лучший вариант с открытым исходным кодом будет UIKIT с его компонент слайдера uikit. и это очень легко реализовать, например, в вашем случае вы можете сделать что-то вроде этого.

<div data-uk-slider>
<div class="uk-slider-container">
    <ul class="uk-slider uk-grid-width-medium-1-4"> // width of the elements
        <li>...</li> //slide elements
        ...
    </ul>
</div>