Question

我正在使用jquery circular carousel 对于3D旋转木马，使用下一个和上一个按钮旋转它。（一切正常）

我现在想要添加移动设备＆＃39; 刷卡＆＃39;能够旋转旋转木马。旋转木马的结构是：

<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进行测试 - 我可以借用它的时间有限 - 如果没有它，主人似乎迷失了方向; - ）

有人可以帮我理解什么是wromg - 谢谢。

Answer 1

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

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

如何添加＆＃39;轻扫/触摸＆＃39;到一个＆＃39; jquery圆形旋转木马＆＃39;

1 个答案: