carouFredSel - đặt số lượng hiển thị cho số lượng ảnh thực tế - và vẫn cuộn?

Question

Tôi đang làm việc với cuộn này

http://coolcarousels.frebsite.nl/c/2/

tôi đã thiết lập dưới đây.

Vấn đề của tôi là tôi đặt nó thành visible: 4 và tôi có 4 hình ảnh, vì vậy nó không cuộn. Nếu tôi đặt nó thành visible: 3 thì nó hoạt động như mong đợi. Nhưng tôi muốn hiển thị tất cả 4 hình ảnh trong một màn hình khi bạn mở toàn bộ trình duyệt ở độ phân giải rộng 1920px. Vì vậy, vấn đề dường như là. Nếu tôi đặt hiển thị cho số lượng hình ảnh tôi có thì nó sẽ ngừng hoạt động.

Có cách nào để có tất cả 4 hình ảnh trên màn hình cùng một lúc sau đó vẫn cuộn qua chúng?

$(function() { 
    $('#carousel').carouFredSel({ 

     width: '100%', 
     align: 'left', 

     items: { 
      visible: 4, 
      start: 0, 


     }, 
     scroll: { 
      items: 1, 
      queue   : true, 
      fx: "scroll", 
      easing: "swing", 
      duration: 1000, 
      timeoutDuration: 3000 
     }, 

     prev: '.prev', 
     next: '.next', 


     auto: { 
      easing: "quadratic", 
      button: '.play', 

      pauseOnEvent: 'resume', 
       pauseOnHover: true 
     } 

    }).find(".slide .plusNav").hover(
       function() { $(this).find("div").slideDown(); }, 
       function() { $(this).find("div").slideUp(); } 
    ); 
}); 

Answer 1

tôi đã có thể làm điều này bằng cách chỉnh sửa source:/

Nếu bạn nhận xét ra dòng này 554 & 556 trong jquery.carouFredSel-6.2.0.js như thế này ...

// not enough items 
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1; 
if (minimum > itms.total) 
{ 
    // e.stopImmediatePropagation(); 
    // return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.'); 
} 

... nó có hiệu quả đối với tôi.

Answer 2

thử này

items: { 
    minimum: 0, 
}, 

Answer 3

Truy cập wrapper và thiết lập chiều cao của nó (giả sử tất cả trẻ em có cùng một chiều cao):

var carousel = [your_carousel], 
    carousel_wrapper = carousel.parent(); 

carousel_wrapper.height(function(){ 
    return (carousel.children('[child_selector]').length) * [child_height]; 
}); 

Điều ở đây là, sẽ có một hành vi kỳ lạ khi băng chuyền hoạt hình. Điều này là do chiều cao tối đa đã được thực hiện ((n-1) * child_height) cố ý làm mặt nạ, cùng với luồng tràn : bị ẩn.

Một tùy chọn khác sẽ là sao chép một trong số các trẻ em, nhưng đó không phải là ngữ nghĩa.

Answer 4

Tôi đã giải quyết vấn đề này bằng cách thiết lập minimum để 0.

items: { 
    minimum: 0, 

Trên thực tế, thiết lập các thuộc tính minimum để không buộc thanh cuộn để được hiển thị luôn không phụ thuộc vào số lượng mặt hàng đang hiển thị. Điều này là bắt buộc đối với tôi bởi vì, tự động bật thanh cuộn không hoạt động trên độ phân giải màn hình nhất định- tôi phải thêm 2 mục khác để làm cho thanh cuộn hiển thị không phải là hành vi mong đợi.

Là một công việc xung quanh, tôi đặt minimum: 0 - giải quyết sự cố.