Плагин CarouFredSel с использованием TouchSwipe со ссылками не работает

Я использую потрясающий CarouFredSel плагин карусели JQuery, который включает функции для интеграции JQuery TouchSwipe для карманных устройств.

Элементы карусели - это divs, внутри div - изображение и текст, завернутый в тег <ahref>.

Все работает так, как должно, но я заметил, что если элемент карусели (в данном случае div) содержит ссылку, эффект салфетки на разных мобильных устройствах не работает.

Если я удаляю ссылку вокруг изображения/текста, движение прокрутки отлично работает. Это почти как если бы preventDefault() работает обратным образом. Если я удаляю ссылку вокруг изображения и оставляю текст в качестве ссылки, прокрутка работает для изображения, а не текста.

Я могу легко щелкнуть элемент как ссылку, я просто не могу прокрутить, если это ссылка.

Кто-нибудь испытал эту проблему с CarouFredsel в частности?

Большое спасибо, ТАК.

Ответ 1

Сенсорный экран отключен по умолчанию для элементов.

См. http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html

Из ссылки: По умолчанию значение $.fn.swipe.defaults.excludedElements является "кнопка, вход, выбор, текстовая область, а,.noSwipe". Чтобы заменить или очистить список, установите массив excludedElements. Чтобы добавить к нему, сделайте следующее (не забудьте прочую запятую)...

excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });

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

excludedElements:"button, input, select, textarea, .noSwipe"

Ответ 2

. CarouFredSel с a > не работает для меня хорошо с помощью "внутри". Вы можете использовать excludedElements, но на Ipad вам придется удерживать палец, чтобы использовать <a> (longTap). Это плохо для пользователей. Если вы попытаетесь использовать carouFredSel ({swipe:( option {tap: function... он не будет работать (по крайней мере, в моем случае).

Мое решение - использовать салфетки (touchSwipe) отдельно:

$(".carusel").swipe({
  excludedElements: "button, input, select, textarea, .noSwipe",
  swipeLeft: function() {
    $('.carusel').trigger('next', 4);
  },
  swipeRight: function() {
    $('.carusel').trigger('prev', 4);
  },
  tap: function(event, target) {
    window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
  }
});

Ответ 3

Хорошо, мне очень хотелось бы знать, возможно ли использование ссылок в TouchSwipe и плагин CarouFredSel, но я нашел обходное решение, которое, похоже, работает.

Надеюсь, это поможет кому-то.

В итоге я использовал вторую текстовую библиотеку jQuery, TouchWipe.

Когда, вызывая плагин CarouFredSel, я устанавливаю для параметра swipe значение true:

$('#carousel-slider').carouFredSel({
        width: '100%',
        prev: '#prev-propslider',
        next: '#next-propslider',
        swipe: true
});

Затем, вызывая оба экземпляра TouchSwipe AND Touchwipe (не уверен, если это имеет значение, но я использую обычный параметр TouchSwipe swipe:true для другого слайдера без ссылок), я написал отдельную функцию для вызова пользовательских событий для TouchWipe плагин:

$('#carousel-slider').touchwipe({
        wipeLeft: function() {
            $('#carousel-slider').trigger('next', 1);
        },
        wipeRight: function() {
            $('#carousel-slider').trigger('prev', 1);
        }
});

Надеюсь, это поможет кому-то, но мне очень хотелось бы знать, могут ли TouchSwipe и CarouFredSel работать с тегами <a href>, поскольку я не могу найти какие-либо живые рабочие примеры.

Ответ 4

Caroufredsel уже интегрирован и совместим с сенсорным экраном.

Добавить библиотеку tochswipe js
Добавить события касания в конфигурации карусели.

JAVASCRIPT RESULT

 $(document).ready(function () {
     $('#foo2').carouFredSel({
         auto: false,
         responsive: false,
         items: {
             visible: 3,
             width: 100
         },
         width: 600,
         prev: '#prev2',
         next: '#next2',
         pagination: "#pager2",
         swipe: {
             onMouse: true,
             onTouch: true
         }
     });
 });

Вот рабочая демонстрация

Ответ 5

Спасибо за решения с exceptElements, которые также исправили мою проблему. Никогда не думал об этом.

Но вам не нужно использовать плагин touchwipe отдельно, есть "swipe.options" в качестве опции конфигурации для touchswipe в плагине caroufredsel. См. параметры caroufredsel

Здесь вы можете использовать все параметры плагина touchswipe.

Ответ 6

Вы можете использовать функцию ниже, чтобы включить щелчок после прокрутки.

`$('.class').swipe({
  swipe: function(event, direction, distance, duration, fingerCount) {},
  click: function(event, target) {
    $(target).click();
  },
  threshold: 75
});`

fooobar.com/info/376846/...