javascript - Hammer.js 无法运行

Question

我第一次使用hammer.js 使轮播触摸左右滑动。轮播是由 bootstrap-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

• 根据documentation ，正确的参数是 prev 和 next

• 在处理程序内部，this 将引用 .carousel-inner 而不是初始化为 carousel 的实际父元素，因此请尝试以下操作

  $(document).ready(function() {
  
      $('.carousel-inner').hammer().on('swipeleft', function(){
          $(this).parent().carousel('prev'); 
      })
  
      $('.carousel-inner').hammer().on('swiperight', function(){
          $(this).parent().carousel('next'); 
      })
  
  });