我正在为基于 Twitter Bootstrap 的 WordPress 制作一个响应式主题。我在主页上使用FlexSlider幻灯片 jquery 插件。
不幸的是，当我调整浏览器的大小时，FlexSlider 并没有优雅地调整大小。当我变窄时，图像很容易被裁剪掉。如果我变宽，下一张图像的一部分可能会出现在侧面。即使我使用 FlexSlider 网站上的演示代码，也会发生这种情况。它甚至发生在 FlexSlider 演示中。但是 Dany Duchaine 的 [Energized theme][3] 设法随着视口的变化很好地调整 FlexSlider 的大小。任何人都可以解释他是如何做到的，或者提出任何可以改善我的版本行为的方法吗？
谢谢！
您可能有解决方案或在此阶段继续前进，但我想我会在 github 上为访问者指出这个问题：https ://github.com/woothemes/FlexSlider/issues/391 （请注意 patbouche 的回答）。这个解决方案对我有用。我把它放在after:回调中。
var slider1 = $('#slider1').data('flexslider');
slider1.resize();
我结合了其中的几个解决方案，还添加了一个检查以确保滑块首先存在于页面上。
$(function() {
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
flexsliderResize();
}, 250);
});
});
function flexsliderResize(){
if ($('.flexslider').length > 0) {
$('.flexslider').data('flexslider').resize();
}
}
我必须绑定窗口调整大小事件才能使其可靠地工作。由于回调前后的FlexSlider对我不起作用：
$(window).bind('resize', function() {
setTimeout(function(){
var slider = $('#banner').data('flexslider');
slider.resize();
}, 1000);
});
我认为最好把它放在回调之前：
$('.flexslider').flexslider({
// your settings
before: function(slider){
$('.flexslider').resize();
}
});
我也尝试了很多方法，但没有一个真正有效......然后我手动完成了它，现在它可以工作了：在调整窗口大小时保存滑块数据，然后由 flexslider 更改：销毁 flexslider（https://stackoverflow.com /a/16334046/7334422）并完全删除节点，手动添加保存在数据中的原始滑块节点，再次添加并初始化flexslider ...因为这非常昂贵，我还添加了一个调整大小的方法（https://stackoverflow. com/a/40534918/7334422），为了在调整大小时不被执行......是的，它是一些代码，它有点hacky，但它正在工作:)
$.fn.resized = function (callback, timeout) {
$(this).resize(function () {
var $this = $(this);
if ($this.data('resizeTimeout')) {
clearTimeout($this.data('resizeTimeout'));
}
$this.data('resizeTimeout', setTimeout(callback, timeout));
});
};
function myFlexInit(slider){
slider.data("originalslider", slider.parent().html());
slider.flexslider({
animation: "slide",
//... your options here
});
}
$(".flexslider").each(function() {
myFlexInit($(this));
});
$(window).resized(function(){
$(".flexslider").each(function() {
$(this).removeData("flexslider");
parent = $(this).parent();
originalslider = $(this).data("originalslider");
$(this).remove();
parent.append(originalslider);
newslider = parent.children().first();
myFlexInit(newslider);
});
}, 200);
您最好将滑块包装在自己独特的容器中：
<div class="sliderparent">
<div class="flexslider">
<ul class="slides">
</ul>
</div>
</div>
我尝试了很多方法，然后我做到了
if( jQuery('.iframe').length ){
var interval = window.setInterval(function() { jQuery('.flexslider').resize(); }, 100);
window.setTimeout(function(){
clearInterval(interval);
},4000);
}
只是想添加另一种选择，以防有人仍然遇到“flexslider 调整到更高宽度，但不是更低”的问题
用户“PCandtheWeb”建议添加以下内容，以防您有一个包装表，这似乎可以完成工作
.your-table
{
table-layout: fixed
}
我在这里尝试了最受欢迎的答案，但似乎陷入了无限循环。我改为强制更改浏览器调整大小时的 flex-viewport 高度和幻灯片宽度，这似乎已经成功了。
$(window).on('resize', function () {
if ($('.flexslider').length > 0) {
$('.flexslider').each(function () {
$(this).find('.flex-viewport').css('height', 'auto');
$(this).find('>.slides').each(function () {
let height = $(this).css('height');
$(this).find('> li').css('width', height);
});
});
}
});
$(window).load(function(){
var mainslider;
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
mainslider = slider;
}
});
//force resize (carousel mode)
$(window).on("resize", function() {
//carousel resize code, around line 569 of query.flexslider.js
mainslider.update( mainslider.pagingCount);
mainslider.newSlides.width(mainslider.computedW);
mainslider.setProps(mainslider.computedW, "setTotal");
});
});
我不确定这个是否适用于所有情况，但对于一个简单的轮播来说，它是有效的！