Мне нужно сделать слайдер товаров, подобный этому (см. красную область), пролистывающийся слайдер с импульсом.
Он должен работать на Desktop, iPad и в мобильном браузере. Знаете ли вы какой-нибудь плагин jquery/jquery mobile для достижения этой цели.
Эффект, который я хочу получить, почти аналогичен этому http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (но он'не совместим с сенсорным экраном).
и точно такой же, как раздел "Топ-25" в приложении Apple'C↩ для iPad под названием "Трейлеры"
По-моему iosSlider - это удивительно. Он работает практически с любого устройства и это хорошо задокументировано. Это's бесплатная для личного использования, а для лицензионных коммерческих сайтов стоит $20.
Также отличный вариант-это touchCarousel или RoyalSlider от одного автора. У этих двоих есть все, что вы'll необходимо, но и не бесплатно и имеет цене $10-12
Я бы также рекомендовал http://cubiq.org/iscroll-4
Но если вы не в курсе, попробуйте этот плагин
http://www.zackgrossbart.com/hackito/touchslider/
Он работает очень хорошо и по умолчанию создает горизонтальную полосу слайдов на рабочем столе - он не так элегантен на рабочем столе, как iscroll-4, но он очень хорошо работает на сенсорных устройствах
УДАЧИ!
Если бы я был тобой, я бы реализовать мое собственное решение, основанное на спецификациях события. В принципе, что салфетки - Это'ы обработки прикосновения, касания двигаться, подправить события. вот отрывок из моих собственных Либ для обработки событий касания iPhone:
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');
}
Я использовал этот код, чтобы "двигаться вещи вокруг и". Но, вместо того, чтобы двигаться, вы можете создать ваш собственный алгоритм для запуск например, перенаправить в другое место, либо вы можете использовать это движение, чтобы "перемещения/удара" и элемент, на котором пальцем на другое место.
таким образом, это действительно помогает понять основы того, как вещи работают, а затем создавать более сложные решения. это может также помочь.
Я использовал это, чтобы создать мое решение:
Вы пробовали iosSlider? Он может делать именно то, что вам нужно.
http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/
Ознакомьтесь с iScroll v4 здесь: http://cubiq.org/iscroll-4.
Может быть, это и не jQuery, но он отлично работает на Desktop Mobile и iPad; я использовал его во многих проектах и совмещал с jQuery.
Удачи!
Это один может соответствовать вашим потребностям:<БР /> http://caroufredsel.frebsite.nl/
Добавить Touchwipe с jQuery Для поддержки сенсорного
Затем в настройках добавить
scroll : {
wipe: true
}
Вы видели FlexSlider от WooThemes? Я'вэ использовал его на нескольких последних проектах с большим успехом. Это's и сенсорный включен, так что он будет работать как мышь на основе браузеров, а также сенсорных браузерах на iOS и Android.
Я сделал somthink как это для одного моего сайта accualy в развитие.
Я использовал StepCarousel для caroussel, потому что он'ы только один я нашел, который может принимать различный размер изображения в той же карусели.
В дополнение к этому, чтобы добавить сенсорный эффект салфетки, я использовал в jQuery.touchswipe плагин;
И stepcarousel двигаться справа или слева панель с обивкой, так что я могу сделать :
$("#slider-actu").touchwipe({
wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
min_move_x: 20
});
Вы можете просмотреть фактические оказывать на этой странице
Надеюсь, что помочь вам.
Я нашел еще один: http://swipejs.com/
кажется, однако хорошо работать, я сталкиваюсь с этим проблема, когда в паре с Bootstrap на OS X версии Хрома. Если полная кросс-браузерная совместимость-это'т-либо вопросу, вы'вновь золотой.
С моего опыта, лучший вариант с открытым кодом будет программирования с использованием 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>
</див>
Плагин проверки Portfoliojs на jQuery: http://portfoliojs.com
Этот плагин поддерживает сенсорные устройства, настольные компьютеры и мобильные браузеры. Кроме того, он имеет поджимать характеристика.
Вы можете быть заинтересованы в следующих:
Я понимаю, что это не решение jQuery, но сенсорный рамках Сенча это очень хорошо для построение целевого пользовательского интерфейса. Пример (нажмите на ссылку врезку Carousel): http://dev.sencha.com/deploy/touch/examples/kitchensink/
Посмотрите на jQuery прокрутки (демо здесь). Здесь является репозиторий Git-концентратор этого экспериментального проекта. Посмотрите на их HTML-код, чтобы увидеть, какие файлы должны быть включены и какие атрибуты, чтобы добавить элементы, которые вы хотите быть с возможностью прокрутки.
Я использовал это, чтобы иметь возможность прокручивать элементы div по горизонтали на сенсорных устройствах.
Это выглядит аналогично и использует jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery.
И демонстрация этого http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html.