6

我正在使用这个Basic jQuery Slider (bjqs) 并试图让它响应式地工作。他们的变更日志说它的响应能力处于“测试版”，所以我猜这就是它有点古怪的原因。

这是我正在实现的滑块的网址：http: //test.hetzelcreative.com/hybrid/

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

  1. 图像不按比例加载，也不适合 100%
  2. 当您调整浏览器的大小时，定位变得一团糟，甚至开始复制图像并垂直堆叠它们。页面刷新可以解决这个问题，但这当然是不可接受的

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

4

7 回答 7

2

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

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

width: window.screen.width,

并且不要忘记让它响应：

responsive: true,

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

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

它适用于我最新的 firefox 和 chrome - 未在 IE 和其他东西上测试。

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

$(window).resize(function(){
  $('yourSliderId .bjqs-markers.h-centered').css({'left':0});
});
于 2014-07-24T07:02:11.007 回答
1

我遇到的问题是，除了在较小的屏幕上（例如智能手机）上的初始负载之外，我的所有内容都可以响应式地工作。当我缩小屏幕时，您可以在浏览器中看到问题。不过，当我调整窗口大小时，它会被修复。它只是在初始负载上不起作用。

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

var conf_responsive = function() {

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

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

我在那个声明中放了一些东西if，因为我的动画类型是“幻灯片”。if(settings.animtype === 'fade'){如果您使用淡入淡出，您可能必须对条件执行类似的操作。

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

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

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

于 2014-04-11T15:16:45.037 回答
1

我在几个不同的浏览器中试了一下。我会说它在响应能力方面有不止一两个小错误。

与尝试解决所有问题相比，bjqs 您是否考虑过寻找从一开始就为响应而设计的问题？

  • SequenceJS，看起来非常活跃，并且有大量的 github 关注
  • FlexSlider，也有大量的 github 关注，但问题列表看起来有点长，具体取决于您所针对的浏览器/等
于 2013-03-17T14:50:23.477 回答
0

For those who look for the solution, here it is :

take the solution above to fix the width problem

for the height problem, just apply a x factor existing between the height and the width

example : if your slider images are twice larger than longer then apply this :

$(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        width: $("#banner-slide").width(),
        height: $("#banner-slide").width() /2,
        responsive: true,
        randomstart: true
    });
});
于 2014-11-18T13:49:40.743 回答
0

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

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

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

于 2013-02-27T14:25:10.807 回答
0

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

$(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        height: 445,
        width: $("#banner-slide").width(),
        responsive: true,
        randomstart: true
    });
});
于 2014-08-22T18:07:27.983 回答
0

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

于 2013-03-15T17:23:13.077 回答