0

希望有人能帮忙。

我正在创建我的网站的响应版本，并且在使用特色工作滑块时遇到问题。它使用 bxSlider 插件。

我有以下功能非常棒，但是当 iPhone 处于横向模式时，我需要能够更改 slideWidth 选项。我已经尝试了所有我可以通过 CSS 进行的操作，但无济于事。阅读文档，它还指出水平滑块需要 slideWidth - 这是我的。

任何帮助，将不胜感激...

  $('.bxslider').bxSlider({
  minSlides: 1,
  maxSlides: 3,
  slideWidth: 310,
  slideMargin: 20,
  useCSS: false,
  hideControlOnEnd: true,
  infiniteLoop: false,
  easing: 'easeOutBounce',
  speed: 1000,
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  nextText: '>',
  prevText: '<',
  pager: false
});

请注意：我尝试了以下方法：

jQuery(document).ready(function ($) {

// Variable to detect window width.
var windowWidth = $(window).width();

// Trigger function for a certain window width
if (windowWidth<568) {
$('.bxslider').bxSlider({
      minSlides: 1,
      maxSlides: 3,
      slideWidth: XXX,
      slideMargin: 20,
      useCSS: false,
      hideControlOnEnd: true,
      infiniteLoop: false,
      easing: 'easeOutBounce',
      speed: 1000,
      nextSelector: '#slider-next',
      prevSelector: '#slider-prev',
      nextText: '>',
      prevText: '<',
      pager: false
    }); 
     }
});

但主要问题是我仍然需要在所有屏幕尺寸上运行该功能，只是需要更改 slideWidth 属性。当然有一种方法可以改变它以使其成为某种变量？我不确定这是否是正确的术语，我仍在学习 jQuery。

4

1 回答 1

1 
$(function(){
  var w = $(window).width();
  var x = // calculate box Slider width depending on w
  $('.bxslider').bxSlider({
    ...
    slideWidth: x,
    ...
  });
  $(window).resize(function(){
    var w = $(window).width();
    // whatever function to resize your slider if the window is resized (will work if the phone is turned)
});
于 2013-01-31T15:57:59.470 回答