Hammer.js不起作用

Question

第一次我使用hammer.js使旋转木马触摸左右滑动。这个旋转木马是通过引导-carousel.js构建的。但触控刷卡不起作用。我对js很陌生，所以无法找到解决方案。你能检查一下这里出了什么问题吗？

我试过：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="http://hammerjs.github.io/dist/hammer.min.js"></script>

<script>
$(document).ready(function() {  
        $('.carousel-inner').hammer().on('swipeleft', function(){
            $(this).carousel('prevslide()'); 

        })
        $('.carousel-inner').hammer().on('swiperight', function(){
            $(this).carousel('nextslide()'); 

        })
 });

和

$(window).load(function(){ 
        $('.carousel-inner').hammer().on('swipeleft', function(){
                  $(".carousel-control.left").click() 
        })
        $('.carousel-inner').hammer().on('swiperight', function(){
             $(".carousel-control.right").click()
        })


    });

HTML：

<div class="carousel slide row-fluid" id="testimonials-carousal">
            <!-- Carousel items -->
            <div class="carousel-inner">
               <div ng-repeat="testimonial in testimonials | limitTo : 5" class="item ng-scope" ng-class="{'active' : $index==0}"> 
                    <div ng-class="{'span10':!testimonial.clientImage, 'span8':testimonial.clientImage}" class="offset1 span10">
                        <div class="testiContent">
                            <i class="pt pt-icon-quote-left testiQuoteTop"></i>
                            <i class="pt pt-icon-quote-right testiQuoteBottom"></i>
                            <span ng-bind-html="testimonial.clientComment" class="testiDesContent ng-binding">I purchased a flat through xyz in Pune. I  am highly satisfied with the services provided by abc.</span>                        </div>

                        <div class="testClientInfo ng-binding">Abhishek Prasad
                            <span class="testClientCompInfo ng-binding"></span>
                        </div>
                    </div>
                    <!-- ngIf: testimonial.clientImage -->
                </div><!-- end ngRepeat: testimonial in testimonials | limitTo : 5 --><div ng-repeat="testimonial in testimonials | limitTo : 5" class="item ng-scope" ng-class="{'active' : $index==0}"> 
                    <div ng-class="{'span10':!testimonial.clientImage, 'span8':testimonial.clientImage}" class="offset1 span10">
                        <div class="testiContent">
                            <i class="pt pt-icon-quote-left testiQuoteTop"></i>
                            <i class="pt pt-icon-quote-right testiQuoteBottom"></i>
                            <span ng-bind-html="testimonial.clientComment" class="testiDesContent ng-binding">I purchased a flat through xyz in Pune. I  am highly satisfied with the services provided by abc.</span>                        </div>

                        <div class="testClientInfo ng-binding">Mr. Rajeev Ranjan
                            <span class="testClientCompInfo ng-binding"></span>
                        </div>
                    </div>
                    <!-- ngIf: testimonial.clientImage -->
                </div><!-- end ngRepeat: testimonial in testimonials | limitTo : 5 -->
            </div>
            <!-- Carousel nav -->
            <a ng-click="prevslide()" class="carousel-control left"><i class="pt pt-icon-angle-left"></i></a>
            <a ng-click="nextslide()" class="carousel-control right"><i class="pt pt-icon-angle-right"></i></a>
        </div>

我花了很多时间研究这件事。你们能帮帮我吗

Answer 1

• 根据文档，正确的参数是prev和next
• 在处理程序中，this将引用.carousel-inner而不是被初始化为carousel的实际父元素，因此尝试以下操作 $(.ready).ready(函数(){$(‘..carousel inner’).hammer().on(‘swipeleft’，function(){ $(this).parent().carousel('prev')；}) .on函数(){$(This).parent().carousel(‘next’；}) }；