jquery - 如何在轮播中启用触摸滑动功能？

Question

我的网页上有一个轮播，但我需要移动设备的触摸滑动功能。我如何启用此功能？我的网站也使用 jQuery UI Touch Punch

http://cdnjs.com/libraries/jquery.caroufredsel

我正在尝试这个

     $ (function () {
      carousel var = $ ('# carouFredSel'). carouFredSel ({   
            circular: true,
            infinite: true,
            swipe: {
                onMouse: true,
                OnTouch: true
            }
        });
});

Answer 1

我一周前实现了同样的事情。你可以看看这里:

https://doclerchat.herokuapp.com/

我正在利用 bootstrap 来制作轮播，对于滑动功能，我使用 jQuery mobile，它非常易于使用。

这是我的 slider :

<div id="photos" class="tab-pane fade">
    <div id="img-slider" class="carousel slide">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active"><img src=http://lorempixel.com/1200/600/city/1/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/2/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/3/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/4/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/5/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/6/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/7/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/8/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/9/></div>
            <div class="item"><img src=http://lorempixel.com/1200/600/city/10/></div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#img-slider" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#img-slider" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>
</div>

这是实现滑动的 jQuery 代码:

   var $slider = $('#img-slider');

   $slider.on( "swipeleft", function(){ // show next image on swipe left
        if($('.carousel-inner .item:last').hasClass('active')){
            $('#img-slider').carousel('pause');
        } else{
            $('#img-slider').carousel('next');
        }

    }).on( "swiperight", function(){ // show prev image on swipe right
        if($('.carousel-inner .item:first').hasClass('active')){
            $('#img-slider').carousel('pause');
        } else{
            $('#img-slider').carousel('prev');
        }
    });

您可以在此处查看完整的应用程序:https://github.com/anshul119/chatapp-source