Bootstrap Carousel слайдер и молот библиотека

Question

Я использую молоток, чтобы сделать салфетки в загрузочном слайдере: Я сделал это так:

<script> 
$(document).ready(function() { 
    $("#myCarousel").swiperight(function() { 
     $("#myCarousel").carousel('prev'); 
    }); 
    $("#myCarousel").swipeleft(function() { 
     $("#myCarousel").carousel('next'); 
    }); 
}); 
</script> 

Или так:

<script> 
     $('#myCarousel').hammer().on('swipeleft', function(){ 
      $('#myCarousel').carousel('next'); 
      }) 
      $('#myCarousel').hammer().on('swiperight', function(){ 
      $('#myCarousel').carousel('prev'); 
      }) 
     </script> 

HTML-код :

<div id="carousel" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel" data-slide-to="1" class=""></li> 
     <li data-target="#carousel" data-slide-to="2" class=""></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active" id="mobile-item1"> 
      <img src="http://cdn.jssor.com/demos/img/landscape/01.jpg"/> 
     </div> 
     <div class="item" id="mobile-item2"> 
      <img src="http://cdn.jssor.com/demos/img/landscape/01.jpg"/> 
     </div> 
     <div class="item" id="mobile-item3"> 
      <img src="http://cdn.jssor.com/demos/img/landscape/01.jpg"/> 
     </div> 
    </div> 
</div> 

Так что в основном то, что я хочу сделать, это обнаружить, когда слайд 3 активен, чтобы остановить swipi нг право, или когда первый слайд активен, чтобы остановить ударяя влево, так что я сделал так:

$('.carousel').on('slid.bs.carousel', function() { 
    if ($('#mobile-item3').hasClass('active')) { 
    //disable swiping right 
    } 
    if ($('#mobile-item1').hasClass('active')) { 
    //disable swiping left 
    } 
    }); 

Но я не знаю, как отключить ударяя вправо или влево с библиотекой молотом? Пожалуйста помоги! My JSFIDDLE

Answer 1

Вы можете использовать эту data-wrap="false" на вашей карусели:

<div id="carousel" class="carousel slide" data-ride="carousel" data-wrap="false"> 

Answer 2

Здравствуйте, Просто обновите код до следующего, это предотвратит поведение по умолчанию для проводника.

Официальная документация: https://api.jquery.com/event.preventdefault/

<script> 

$(document).ready(function() { 
$("#myCarousel").swiperight(function(e) { 

     //Log the event object 
     console.log(e); 

     e.preventDefault(); 
     $("#myCarousel").carousel('prev'); 
    }); 
    $("#myCarousel").swipeleft(function(e) { 
     e.preventDefault(); 
     $("#myCarousel").carousel('next'); 
    }); 
}); 

</script> 

Кроме того, если вы хотите, чтобы обнаружить текущий индекс слайда, чем войти объект слайдера, как:

console.log(e) 

Надеется, что это поможет!