Question

我正在使用这个Basic jQuery Slider（bjqs）并尝试让它以响应方式工作。他们的更新日志说它的响应性是“beta”，所以我猜这就是它的原因。

以下是我正在实施的滑块的网址：http://test.hetzelcreative.com/hybrid/

它基本上有两个问题＆amp;它们都与以小屏幕尺寸（手机宽度）加载页面有关：

图像不按比例加载且不适合100％
当您向上调整浏览器大小时，定位会变得混乱，甚至会开始复制图像并垂直堆叠。页面刷新修复了这个问题，当然这是不可接受的

此外，在bjqs-1.3.min.js中，我的宽度设置为854px，高度设置为481px。它最初设置为400x300或其他东西。我想知道这是否是我问题的根源。如果我删除那些w＆amp; h属性尽管整个事情都不起作用。

Answer 1

我有类似的问题（关于调整浏览器窗口的大小） - 但最后我已修复它（或者黑客，你的名字）：

初始化插件时，您可以定义滑块的尺寸（例如width） - 您应该放置最大可能值，因为它将是最大尺寸您的页面上的单个幻灯片（官方文档没有这样描述的耻辱） - 所以它应该是您的（设备）屏幕大小：

width: window.screen.width,

并且不要忘记让它响应：

responsive: true,

并且在滑块初始化之后（它可以放在文档的末尾）你应该触发resize事件来调整你的滑块大小到当前的浏览器大小（因为如果窗口不会被最大化，滑块将是比它更大，100％不可见）：

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

它适用于我最新的firefox＆amp;铬 - 未在IE＆amp;测试中测试其他的东西。

PS。如果您正在使用滑块分页项目符号而您希望将它们保持水平居中您应该在触发调整大小事件之前添加此代码：

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

Answer 2

我在几个不同的浏览器中试了一下。我说它在响应性方面有一两个以上的小错误。

而不是试图解决bjqs已经考虑过的所有问题，而不是从一开始就考虑寻找一个专为响应性而设计的问题？

SequenceJS ，看起来非常活跃并且有一个大型github跟随
FlexSlider ，也有一个大型github，但问题列表看起来有点长，具体取决于您定位的浏览器/等

Answer 3

我遇到的问题是，除了在较小屏幕上的初始负载（如智能手机）之外，我还是会响应所有工作。当我缩小屏幕时，你可以在我的浏览器中看到问题。当我调整窗口大小时，它将被修复。它只是不适用于初始加载。

我找到了一个适合我的修复程序。我抓住了bjqs-1.3.js的未缩小版本并快速添加了。第175行开始是这样的：

var conf_responsive = function() {

然后在该函数中有一个if语句，说明：

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

我在THAT if语句中添加了一些内容，因为我的动画类型是“幻灯片”。＆＃39;如果您使用淡入淡出，则可能必须为if(settings.animtype === 'fade'){条件执行类似的操作。

但无论如何，如果有条件的话，在$(window).resize(function() {})之下，我这样称呼它：

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

这似乎解决了我遇到的问题。不确定这是与此处发布的完全相同的问题，但它可能有助于某人寻找相关问题的解决方案。

Answer 4

我建议设置滑块类的宽度以匹配插件的最大宽度。

即。在这种情况下，你有100％，它应该是854px。

然后将overflow:hidden;添加到滑块类中，这样就不会得到你所谈论的堆栈效果。

Answer 5

由于时间限制，我没有深入研究剧本。但是，我要做的是确保脚本位于具有设置宽度和宽度的包装器中。高度。然后将脚本设置为100％宽度，高度设置为100％。

Answer 6

要修复宽度问题，您可以在初始化中获取容器div宽度：

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

Answer 7

对于那些寻找解决方案的人来说，这是：

采取上述解决方案来解决宽度问题

对于高度问题，只需应用高度和宽度之间存在的x因子

示例：如果您的滑块图像比长度大两倍，请应用此选项：

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

基本的jQuery Slider（bjqs）响应问题

7 个答案: