Vấn đề phản hồi jQuery Slider (bjqs) cơ bản

Question

Tôi đang làm việc với Basic jQuery Slider (bjqs) này và cố gắng làm cho nó hoạt động một cách có trách nhiệm. Thay đổi của họ nói rằng sự đáp ứng của nó là trong "beta", vì vậy tôi đoán đó là lý do tại sao nó là loại flakey.

Đây là url để thanh trượt Tôi đang thực hiện: http://test.hetzelcreative.com/hybrid/

Về cơ bản có hai vấn đề với nó & cả hai đều đã làm với tải trang tại một kích thước màn hình nhỏ (điện thoại di động rộng điện thoại):

1. Hình ảnh không tải tương ứng và không phù hợp 100%
2. Khi bạn thay đổi kích thước trình duyệt, vị trí bị rối loạn và thậm chí bắt đầu sao chép hình ảnh và xếp chồng lên nhau theo chiều dọc. Làm mới trang sửa lỗi này, nhưng tất nhiên điều đó không được chấp nhận

Ngoài ra, trong bjqs-1.3.min.js Tôi có chiều rộng được đặt là 854px và chiều cao đến 481px. Ban đầu nó được đặt thành 400x300 hoặc một cái gì đó. Tôi tự hỏi nếu đây là nguồn gốc của vấn đề của tôi. Nếu tôi loại bỏ những thuộc tính đó, mặc dù toàn bộ mọi thứ không hoạt động.

Answer 1

Tôi khuyên bạn nên đặt chiều rộng của lớp con trượt để khớp với chiều rộng tối đa của plugin.

ví dụ: trong trường hợp này, bạn có nó ở 100%, nó phải là 854px.

Sau đó, thêm overflow:hidden; vào lớp trượt để bạn không nhận được hiệu ứng ngăn xếp mà bạn nói.

Answer 2

Tôi chưa xem xét sâu về tập lệnh do hạn chế về thời gian. Tuy nhiên, những gì tôi sẽ làm là đảm bảo rằng tập lệnh nằm trong trình bao bọc với chiều cao đặt chiều cao là &. Sau đó, đặt tập lệnh thành chiều rộng 100% và chiều cao là 100%.

Answer 3

Tôi đã thử tính năng này trong một vài trình duyệt khác nhau. Tôi muốn nói rằng nó có nhiều hơn một hoặc hai lỗi nhỏ khi nói đến sự đáp ứng.

Thay vì cố gắng sửa chữa tất cả các vấn đề bjqs bạn đã xem xét tìm kiếm một trong đó đã được thiết kế để đáp ứng từ đầu thay thế?

• SequenceJS, trông rất năng động và có một github lớn sau
• FlexSlider, cũng có một github lớn sau nhưng danh sách các vấn đề trông hơi dài tùy thuộc vào trình duyệt bạn đang nhắm mục tiêu/etc

Answer 4

Tôi gặp sự cố khi tôi nhận mọi thứ hoạt động một cách có trách nhiệm, ngoại trừ tải ban đầu trên màn hình nhỏ hơn, như điện thoại thông minh. Bạn có thể thấy vấn đề trong trình duyệt của tôi khi tôi thu nhỏ màn hình xuống. Nó sẽ được cố định khi tôi thay đổi kích thước cửa sổ mặc dù. Nó sẽ không hoạt động trên tải ban đầu.

Tôi đã tìm thấy bản sửa lỗi phù hợp với mình. Tôi đã lấy phiên bản bjqs-1.3.js chưa được rút gọn và bổ sung nhanh chóng.Đường dây 175 bắt đầu ra như thế này:

var conf_responsive = function() { 

Sau đó là một tuyên bố if trong chức năng đó mà nói điều này:

if(settings.animtype === 'slide'){ 

tôi đặt một cái gì đó bên trong RẰNG tuyên bố if vì kích thước của hình ảnh động của tôi là 'trượt. ' Bạn có thể phải làm một cái gì đó tương tự cho các if(settings.animtype === 'fade'){ có điều kiện nếu bạn đang sử dụng phai.

Nhưng dù sao, bên trong đó nếu có điều kiện, bên dưới $(window).resize(function() {}), tôi gọi nó như vậy:

$(document).ready(
function() { 
$(window).trigger('resize'); 
} 
); 

Đó dường như đã khắc phục sự cố tôi gặp phải. Bạn không chắc đây là vấn đề chính xác đã được đăng ở đây, nhưng nó có thể giúp ai đó tìm kiếm giải pháp cho một vấn đề liên quan.

Answer 5

Tôi đã có vấn đề tương tự (về thay đổi kích thước lên cửa sổ trình duyệt) - nhưng cuối cùng tôi đã cố định nó (hoặc hack, Bạn đặt tên cho nó):

Khi Bạn khởi tạo các plugin, Bạn có thể xác định kích thước (ví dụ như width) của thanh trượt - và bạn nên đặt giá trị lớn nhất có thể, bởi vì nó sẽ là kích thước tối đa của trang chiếu đơn trên trang của bạn (xấu hổ rằng tài liệu chính thức không mô tả theo cách này) - vì vậy nó phải là của bạn (thiết bị) kích thước màn hình:

width: window.screen.width, 

và đừng quên làm lại sponsive:

responsive: true, 

và sau khi khởi tạo của thanh trượt (nó có thể được đặt ở phần cuối của tài liệu) Bạn nên kích hoạt resize sự kiện để thay đổi kích thước thanh trượt của bạn để kích thước trình duyệt hiện tại (vì nếu cửa sổ sẽ không được tối đa trượt sẽ lớn hơn so với nó và không hiển thị trong 100%):

$(window).trigger('resize'); 

nó làm việc cho tôi về mới nhất firefox & chrome - không thử nghiệm trên IE & thứ khác.

PS.Trong trường hợp nếu bạn đang sử dụng đạn trượt pagination và Bạn muốn giữ chúng tập trung theo chiều ngang Bạn nên thêm mã này trước khi kích hoạt thay đổi kích thước kiện:

$(window).resize(function(){ 
    $('yourSliderId .bjqs-markers.h-centered').css({'left':0}); 
}); 

Answer 6

Để khắc phục vấn đề chiều rộng bạn có thể lấy chiều rộng chứa div trong initalization:

$(function() { 
    $('#banner-slide').bjqs({ 
     animtype: 'slide', 
     height: 445, 
     width: $("#banner-slide").width(), 
     responsive: true, 
     randomstart: true 
    }); 
}); 

Answer 7

đối với những người tìm kiếm các giải pháp, ở đây nó là:

mất giải pháp trên để khắc phục vấn đề chiều rộng

cho vấn đề chiều cao, chỉ áp dụng yếu tố rìu hiện giữa chiều cao và chiều rộng

dụ: nếu hình ảnh thanh trượt của bạn là hai lần lớn hơn nữa sau đó áp dụng điều này:

$(function() { 
    $('#banner-slide').bjqs({ 
     animtype: 'slide', 
     width: $("#banner-slide").width(), 
     height: $("#banner-slide").width() /2, 
     responsive: true, 
     randomstart: true 
    }); 
});