Как сделать лоток для карусели Bootstrap использовать передвижной левый/правый салфетки

Ответ 1

ОБНОВИТЬ:

Я придумал это решение, когда был довольно новичком в веб-дизайне. Теперь, когда я стал старше и мудрее, ответ от Марка Ширальди кажется лучшим вариантом. Смотрите следующий верхний ответ; это более продуктивное решение.

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

Сначала вы должны добавить JQuery Mobile:

http://jquerymobile.com/

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

<script>
$(document).ready(function() {
   $("#myCarousel").swiperight(function() {
      $(this).carousel('prev');
    });
   $("#myCarousel").swipeleft(function() {
      $(this).carousel('next');
   });
});
</script>

Ссылка ниже, где вы можете найти учебник, который я использовал:

http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

Ответ 2

Мне нужно было добавить эту функциональность в проект, над которым я работал недавно, и добавление jQuery Mobile просто для решения этой проблемы, похоже, было излишним, поэтому я придумал решение и поместил его в github: bcSwipe (прокрутка карусельного бутстрапа).

Это легкий плагин jQuery (~ 600 байт minified vs jQuery Mobile touch события на 8kb), и он был протестирован на Android и iOS.

Вот как вы его используете:

$('.carousel').bcSwipe({ threshold: 50 });

Ответ 3

Я немного опаздываю на вечеринку, но здесь немного jQuery, который я использовал:

$(".carousel").on("touchstart", function(event){
        var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function(event){
        var xMove = event.originalEvent.touches[0].pageX;
        if( Math.floor(xClick - xMove) > 5 ){
            $(this).carousel('next');
        }
        else if( Math.floor(xClick - xMove) < -5 ){
            $(this).carousel('prev');
        }
    });
    $(".carousel").on("touchend", function(){
            $(this).off("touchmove");
    });
});

Не нужно использовать jQuery mobile или любые другие плагины. Если вам необходимо настроить чувствительность салфетки, отрегулируйте параметры 5 и -5. Надеюсь, это поможет кому-то.

Ответ 4

Посмотрите это решение: Bootstrap TouchCarousel. Исключительное улучшение для Twitter Bootstrap Carousel (v3), чтобы включить жесты на сенсорных устройствах. http://ixisio.github.io/bootstrap-touch-carousel/

Ответ 5

Если вы не хотите использовать jQuery mobile как я. Вы можете использовать Hammer.js

В основном это как jQuery mobile без ненужного кода.

$(document).ready(function() {
  Hammer(myCarousel).on("swipeleft", function(){
    $(this).carousel('next');
  });
  Hammer(myCarousel).on("swiperight", function(){
    $(this).carousel('prev');
  });
});

Ответ 6

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

touchSwipe

я сказал "почти", потому что этот плагин не поддерживает будущие элементы. поэтому нам пришлось бы повторно инициализировать вызов салфетки, когда содержимое салфетки будет изменено ajax или что-то еще. этот плагин имеет множество возможностей для игры с сенсорными событиями, такими как многодисковое касание, щепотка и т.д.

h ttp://labs.rampinteractive.co.uk/touchSwipe/demos/index.html

решение 1:

$("#myCarousel").swipe( {
            swipe:function(event, direction, distance, duration, fingerCount, fingerData) {

                if(direction=='left'){
                    $(this).carousel('next');
                }else if(direction=='right'){
                    $(this).carousel('prev');
                }

            }
        });

решение 2: (для случая будущего элемента)

function addSwipeTo(selector){
            $(selector).swipe("destroy");
            $(selector).swipe( {
                swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
                    if(direction=='left'){
                        $(this).carousel('next');
                    }else if(direction=='right'){
                        $(this).carousel('prev');
                    }
                }
            });
}
addSwipeTo("#myCarousel");

Ответ 7

Для любого, кто обнаружит это, проведите пальцем по карусели примерно 5 дней назад (20 октября 2018 года) согласно
https://github.com/twbs/bootstrap/pull/25776

https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/

Ответ 8

Такую функциональность я предпочитаю, чем использовать тяжелый jQuery mobile, Carousel Swipe. Я предлагаю напрямую перейти к исходному коду на github и скопировать файл carousel-swipe.js в каталог проекта.

Используйте события swiper, как показано ниже:

$('#carousel-example-generic').carousel({
      interval: false 
  });

Ответ 9

Согласно документу

$('.carousel').carousel({
    interval: false,
    touch: true
  })

Но это не работает, я загружаю файл v4.2.1.js

Есть идеи, почему это не работает?

Ответ 10

С начальной загрузкой 4.2 это теперь очень просто, вам просто нужно передать сенсорную опцию в div карусели как data-touch="true", так как она принимает только логическое значение.

Как и в вашем случае, обновите загрузчик до 4.2 и вставьте (или загрузите исходные файлы) следующее в точном порядке:

    <link rel="stylesheet" href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'; return false;" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

а затем добавьте опцию touch в свой загрузочный карусельный раздел

    <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel" data-touch="true">