如何将“滑动/触摸”添加到“ jQuery圆形轮播”

Question

我正在使用jquery圆形旋转木马进行3D旋转木马，并使用其下一个和上一个按钮旋转它（一切正常）

现在，我想添加移动设备的“ 滑动 ”功能来旋转转盘。 轮播的结构为：

<link rel="stylesheet" href="css/3D_rotating_carousel/style.css" />
<link rel="stylesheet" href="css//3D_rotating_carousel/jquery.circular-carousel.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="js/jquery.circular-carousel.js"></script> 
    <script src="js/script.js"></script>

<div class="container" style="height:500px;">
  <ol class="carousel">
    <li class="item active">
        <img src="images/guitar10.jpg" alt="" /></li>
    ...
    <li class="item">
        <img src="images/guitar19.jpg" alt="" /></li>
  </ol>
</div>

<div class="controls">
 <a tabindex="4" href="#" class="previous hyperlink" >Previous</a> 
 <a tabindex="5" href="#" class="next hyperlink" >Next</a>
</div>

我现在添加了：

<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"/> <!-- needed for 'touch' on mobiles -->
<script>
    $(document).ready(function() {  
        $(".container").swiperight(function() {  
            $(this).carousel('previous');  
        });  
     $(".container").swipeleft(function() {  
      $(this).carousel('next');  
       });  
    });  
</script>

但是我显然没有正确地理解以上引用，因为“滑动”不起作用。 我还必须借用iPad进行测试-而且借用的时间有限-所有者似乎没有它就迷失了;-)

有人可以帮我了解什么吗-谢谢。

Answer 1

根据轮播的文档/演示，您使用的API错误。 $(this).carousel('previous')不会做任何事情。 该插件仅向jQuery添加了CircularCarousel方法来初始化轮播。 然后，它（对于jQuery来说有点不同）返回一个可以使用其方法的对象。 您需要保存该对象，然后在滑动回调中引用它。 该方法称为cycleActive 。

var carousel = $('.selector').CircularCarousel(options);
$(".selector").swiperight(function() {  
    carousel.cycleActive('previous');  
});