Băng chuyền đầy đủ chiều rộng đầy đủ với carouFredSel.js

Question

Tôi hiện đang sử dụng carouFredSel.js để phân phối băng chuyền có chiều rộng đầy đủ trên trang web của mình. Tôi đã chọn plugin này vì khả năng chiều rộng đầy đủ của nó với khả năng hiển thị một phần hình ảnh trước đó và tiếp theo ở cạnh trái và phải của màn hình.

Tôi cũng đang sử dụng Bootstrap 3, nhưng không thành công khi đạt được hành vi tương tự, vì vậy đó là lý do tôi chọn sử dụng plugin.

Vấn đề tôi đang gặp phải là làm cho băng chuyền đáp ứng. Các plugin có một tùy chọn để làm cho nó đáp ứng bằng cách thêm 'đáp ứng: đúng' cho các tùy chọn, nhưng khi tôi làm điều đó, nó phá vỡ bố trí.

Mã của tôi có hình ảnh trình giữ chỗ có thể được tìm thấy tại http://jsfiddle.net/vUCZ8/. Tôi sẽ khuyên bạn nên nhìn vào kết quả toàn màn hình ở http://jsfiddle.net/vUCZ8/embedded/result/

#intro { 
      width: 580px; 
      margin: 0 auto; 
     } 
     .wrapper { 
      background-color: white; 
      width: 480px; 
      margin: 40px auto; 
      padding: 50px; 
      box-shadow: 0 0 5px #999; 
     } 
     #carousel img { 
      display: block; 
      float: left; 
     } 
     .main-content ul { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
      display: block; 
     } 
     .main-content li { 
      display: block; 
      float: left; 
     } 
     .main-content li img { 
      margin: 0 20px 0 20px; 
     } 
     .list_carousel.responsive { 
      width: auto; 
      margin-left: 0; 
     } 
     .clearfix { 
      float: none; 
      clear: both; 
     } 
     .prev { 
      float: left; 
      margin-left: 10px; 
     } 
     .next { 
      float: right; 
      margin-right: 10px; 
     } 
     .pager { 
      float: left; 
      width: 300px; 
      text-align: center; 
     } 
     .pager a { 
      margin: 0 5px; 
      text-decoration: none; 
     } 
     .pager a.selected { 
      text-decoration: underline; 
     } 
     .timer { 
      background-color: #999; 
      height: 6px; 
      width: 0px; 
     } 

$(function() { 
    $('#carousel').carouFredSel({ 
     width: '100%', 
     items: { 
      visible: 3, 
      start: -1 
     }, 
     scroll: { 
      items: 1, 
      duration: 1000, 
      timeoutDuration: 3000 
     }, 
     prev: '#prev', 
     next: '#next', 
     pagination: { 
      container: '#pager', 
      deviation: 1 
     } 
    }); 
}); 

<div class="main-content"> 
    <ul id="carousel"> 
     <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
      <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
      <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
       <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
    </ul> 
    <div class="clearfix"></div> 
</div> 

Answer 1

Đây là cách chính xác để thực hiện phản ứng nhanh với plugin này:

responsive: true // you must add this 

Như bạn có thể thấy nó không được phá vỡ và làm việc một cách hoàn hảo. http://jsfiddle.net/3mypa/ Điều này là với mẫu STANDARD.

Tôi tin rằng bạn đang tìm kiếm một mẫu khác, không phải là điều bạn đang tìm kiếm?

http://coolcarousels.frebsite.nl/c/44/coolcarousel.html

Answer 2

Tôi đã nhìn vào vấn đề này như là tốt và tốt nhất mà tôi đã tìm thấy là để xem cho một kích thước cửa sổ và phản ứng phù hợp. Ví dụ

$(window).resize(function(){ 
//listens for window resize 
    var TimeOutFunction; 
    clearTimeout(TimeOutFunction); 
    //To try and make sure this only fires after the window has stopped moving 
    TimeOutFunction=setTimeout(function(){ 
     $('.slides').trigger("destroy",true); 
     //Destroys the current carousel along with all it's settings - extreme but It wouldn't accept setting changes once running 
     if($(window).width()<1170){ 
      //The width should be the width of a single image since I assume your using the same image size for all images on the slider. 
      $(function(){ 
       $('#carousel').find('.slides').carouFredSel({ 
        width:'100%', 
        items:{ 
         visible:1, 
         start:-1 
        }, 
        responsive:true, 
        minimum:3 
       }) 
      }) 
     }else{ 
      $(function(){ 
       $('#carousel').find('.slides').carouFredSel({ 
        width:'100%', 
        items:{ 
         visible:3, 
         start:-1 
        }, 
        responsive:false, 
        minimum:3 
       }) 
      }) 
     } 
    },500) 
}) 

Bằng cách này một lần kích thước cửa sổ nằm dưới độ rộng của hình ảnh và hành động phản ứng nhanh nên kick vào nó nhưng khi nó đã lớn hơn một hình ảnh một lần nữa nó di chuyển trở lại quan điểm cắt ngắn.

Phải thừa nhận rằng nó có thể được dọn dẹp nhiều hơn vì lợi ích của cổng nhưng bạn nên cung cấp cho bạn cơ sở phù hợp để làm việc.