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

• 根據文檔 ，正確的參數是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'); }) });