Блог

Мне нужно создать слайдер продукта, подобный этому (см. красную область), с помощью слайдера momentum.

Он должен работать на настольном компьютере, iPad и мобильном браузере. Знаете ли вы какой-либо плагин jquery / jquery mobile для достижения этой цели.

Эффект, который я хочу, почти похож на этотhttp://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (но он не совместим с сенсорным управлением)

и точно так же, как раздел «Top 25» в приложении Apple для iPad под названием «Трейлеры»

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

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

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

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

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

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

УДАЧИ!

На вашем месте я бы реализовал свое собственное решение на основе спецификаций события. По сути, что такое прокрутка — это обработка событий касания вниз, перемещения касания, касания вверх. вот выдержка из моей собственной библиотеки для обработки событий 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

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

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

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

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

Удачи!

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

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

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

 scroll : {
wipe: true
}
  

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

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

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

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

Я придумал нечто подобное для одного из своих веб-сайтов, находящихся в стадии разработки.

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

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

И пошаговая карусель перемещают панель вправо или влево с помощью шрифта, чтобы я мог сделать :

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

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

Надеюсь, это поможет вам.

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

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

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

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

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

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

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

Оформить заказ плагина Portfoliojs для jQuery:http://portfoliojs.com

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

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

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