Cách tạm dừng băng chuyền Bootstrap ở tiêu điểm đầu vào

Question

Tôi có băng chuyền Bootstrap chứa một biểu mẫu đơn giản. Bạn có thể đặt băng chuyền để tạm dừng khi được di chuột lên. Tuy nhiên, nếu con trỏ rời khỏi khu vực Carousel trong khi nhập trong các yếu tố đầu vào, băng chuyền sẽ chuyển về chu kỳ mặc định và khoảng thời gian 5000ms.

Tôi đang tìm cách đặt nó ở trạng thái tạm dừng trong quá trình lấy nét đầu vào và khởi động lại chu kỳ tập trung vào đầu vào.

<div id="myCarousel" class="carousel slide"> 
<div class="carousel-inner"> 
    <div id="slide1" class="item"> 
     This is a test slide. 
    </div> 
    <div id="slide2" class="item" > 
     <input type="text" placeholder="name" name="full_name" /> 
    </div> 
</div> 

<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 

</div> 

<script> 

!function ($) { 
    $(function(){ 
     $('#myCarousel.slide').carousel({ 
      interval: 5000, 
      pause: "hover" 
     }) 
    }) 
}(window.jQuery) 

$('input').focus(function(){ 
    $("#myCarousel").pause() 
}) /* Will worry about restarting carousel on mouseout if I could get this pause working */ 


</script> 

Dường như khi một băng chuyền đã được ban đầu được gọi là (và một bộ khoảng thời gian), bạn không thể thay đổi mà khoảng thời gian hoặc băng chuyền hành vi.

Mọi thông tin chi tiết đều tuyệt vời.

Answer 1

Bạn cần gọi hàm tạm dừng như sau: $("#myCarousel").carousel('pause');. Đây là cách tất cả các phương thức được gọi trên các thành phần bootstrap, tuân theo quy ước UI của jQuery.

Bạn có thể khởi động lại băng chuyền bằng cách nghe sự kiện blur sau đó gọi phương thức cycle. Bạn cũng cần di chuyển trình xử lý sự kiện của mình bên trong trình bao bọc $(function() {...});. Điều này đảm bảo tất cả các phần tử DOM có mặt và sẵn sàng để được thao tác.

Vì vậy, mã tạm dừng/đi xe đạp của bạn sẽ trông như thế:

$(function(){ 
    $('#myCarousel.slide').carousel({ 
     interval: 5000, 
     pause: "hover" 
    }); 

    $('input').focus(function(){ 
     $("#myCarousel").carousel('pause'); 
    }).blur(function() { 
     $("#myCarousel").carousel('cycle'); 
    }); 
}); 

Working Demo

Answer 2

Đây là cách bạn tạm dừng một băng chuyền

$("#myCarousel").carousel('pause'); 

Answer 3

omg, tôi nghĩ rằng nó sẽ tốt hơn để bắt đầu băng chuyền đúng cách ....

trên di chuột không cho phép chúng tạm dừng và trên đối tượng tạm dừng mouseleave!

thấy điều này

$(".carousel").hover(
      function() { 
       $("#"+this.id).carousel({ 
        interval: 2000, 
        //pause: 'hover' 
        pause: 'none' // disable default option "pause on hover" and set it to none 
       }); 
      }, function() { 
       $("#"+this.id).carousel('pause'); // to set it manually on a spezific carousel id 
      } 
    ); 

Greetz zumi