Question

我的滑块包含在手风琴元素中时遇到了一些问题。

问题是当您加载网页时关闭手风琴时，bxslider在下一张幻灯片之前不会加载。您可以在此处查看示例www.code-25.com。当您打开“关于部分”时，您应该看到我的问题。

如果我将手风琴的'about'部分设置为在页面上打开，则bxslider可以正常工作，请在此处查看。 www.code-25.com/#1

我想知道是否有人有这个问题/可以帮助我吗？感谢。

这是我用于手风琴的代码：

(function($) {

var allPanels = $('.menu > .page').hide();

$('.title > h3').click(function() {
    allPanels.slideUp("1000");
    if($(this).parent().next().is(':hidden'))
    {
        $(this).parent().next().fadeIn("500");
    }
    return false;
});

这些是我当前的bxslider设置：

$(document).ready(function(){
$('.bxslider').bxSlider({ 
captions: true,
auto:true,  
autoStart:true,
autoControls:true,
mode:'fade',
minSlides: 1,
maxSlides: 2,
adaptiveHeight: true,
slideWidth: 700
});
});

Answer 1

var allPanels = $('.menu > .page').hide();正在设置容纳bxSlider的容器显示：none。因此，滑块中的图像尺寸设置为宽度和高度：0。bxSlider正确加载，但它正在读取隐藏状态下的图像尺寸，并将滑块的高度设置为0.

为了解决这个问题，您可以等到bxSlider完成加载后隐藏您的手风琴内容：

var allPanels = $('.menu > .page');

$('.bxslider').bxSlider({ 
  captions: true,
  auto:true,  
  autoStart:true,
  autoControls:true,
  mode:'fade',
  minSlides: 1,
  maxSlides: 2,
  adaptiveHeight: true,
  slideWidth: 700,
  onSliderLoad: function() {
     allPanels.hide();
  }
});

$('.title > h3').click(function() {
  allPanels.slideUp("1000");

  if($(this).parent().next().is(':hidden')) {
    $(this).parent().next().fadeIn("500");
  }
  return false;
});

手风琴内的Jquery Bxslider问题

1 个答案: