Băng chuyền Bootstrap: hình ảnh ra khỏi div khi trượt

Question

Tôi gặp vấn đề mà tôi không thể tìm ra. Tôi đang sử dụng băng chuyền của bootstrap và mọi thứ hoạt động tốt ngoại trừ chuyển tiếp: các mục tiếp theo xuất hiện từ div myCarousel khi chuyển đổi trượt bắt đầu và các mục hoạt động trước đó trượt ra khỏi div myCarousel khi chúng được thay thế bằng mục tiếp theo của tôi.

Dưới đây là code html của tôi:

<div id="myCarousel" class="carousel slide span6"> 
    <div id="carousel-inner"> 
      <div class="active item"> 
       <img src="img/abstract-landscape-paintings-bursting-sun.jpg" /> 
      </div> 
      <div class="item"> 
        <img src="img/charnwood_forest_landscape.jpg" /> 
      </div> 
     </div> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

tôi chỉ sử dụng kịch bản băng chuyền:

$(document).ready(function() { 
    $(".carousel").carousel({ 
     interval: 5000, 
     pause: "hover", 
    }); 
}); 

Dưới đây là một liên kết đến một ví dụ về vấn đề của tôi, do đó bạn có thể kiểm tra toàn bộ mã của tôi: http://todoapp.nfshost.com/slide

Bất kỳ ai có thể xem vấn đề là gì?

Cảm ơn bạn!

Answer 1

<div id="myCarousel" class="carousel slide span6" style="overflow:hidden"> 
<div id="carousel-inner"> 
     <div class="active item"> 
      <img src="img/abstract-landscape-paintings-bursting-sun.jpg" /> 
     </div> 
     <div class="item"> 
       <img src="img/charnwood_forest_landscape.jpg" /> 
     </div> 
    </div> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

Hey bạn bè thêm tràn ẩn trong id myCarousel.

Answer 2

Bạn có thể thêm này trong css của bạn:

.carousel { overflow: hidden; } 

và

.item { overflow: hidden: } 

Answer 3

chỉ cần thêm width:100%; đến những hình ảnh

img { 
    width: 100%; 
} 

Answer 4

tôi đã cố gắng giải pháp Kader để thiết lập 'overflow: hidden ', nhưng vì lý do nào đó mà chỉ làm việc trên màn hình lớn. Các tràn bên ngoài div vẫn xuất hiện trên màn hình nhỏ hơn.

Cuối cùng, đây là phong cách tôi thêm vào phía trên cùng của trang để khắc phục vấn đề này:

.carousel-inner > .next { 
    display: none; 
} 
.carousel-inner > .prev { 
    display: none; 
} 

Những hình ảnh đến có .next hoặc .prev lớp thêm vào nó trong quá trình chuyển. Bằng cách ẩn phần tử này, nó ngăn chặn vấn đề tràn.

Có lẽ một giải pháp thanh lịch hơn, nhưng điều này nhanh chóng, dễ dàng và hiệu quả.