0

誰かが助けてくれることを願っています。

Web サイトのレスポンシブ バージョンを作成していますが、注目の作業スライダーに問題があります。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 に答える