Question

我需要添加两个动态轮播一页。 minItems和maxItems也不同。另一个我的最小最大值是5,4,2。

如何将两个滑块添加到具有动态更改值的一页中。

我的滑块ID是

1）。＃家滑块四

2）#home-slider-five

任何人都可以帮我解决这个问题。谢谢。

(function() {

  // store the slider in a local variable
  var $window = $(window),
      flexslider2 , flexslider;

  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 1 :
           (window.innerWidth < 1220) ? 3 : 4;
  }
  $(function() {
    SyntaxHighlighter.all();
  });

  $window.load(function() {
    $('#home-slider-four').flexslider({
      animation: "slide",
      animationSpeed: 400,
      animationLoop: false,
      itemWidth: 270,
      itemMargin: 20,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize(), // use function to pull in initial value
      start: function(slider2){
       flexslider2 = slider2;
      }
    });

  });

  // check grid size on resize event
  $window.resize(function() {
    var gridSize = getGridSize();
    flexslider2.vars.minItems = gridSize;
    flexslider2.vars.maxItems = gridSize;

  });
}());

Answer 1

试试这个定义一个函数调用“函数滑块”，并为该函数传递类名或id

function slider(elemname,minIt,maxIt) {



 // store the slider in a local variable
  var $window = $(window),
      flexslider2 , flexslider;

  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 1 :
           (window.innerWidth < 1220) ? minIt : maxIt;
  }



$(function() {
    SyntaxHighlighter.all();
  });


    $(elemname).flexslider({
      animation: "slide",
      animationSpeed: 400,
      animationLoop: false,
      itemWidth: 270,
      itemMargin: 20,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize(), // use function to pull in initial value
      start: function(slider2){
       flexslider2 = slider2;
      }

  });

  // check grid size on resize event
  $window.resize(function() {
    var gridSize = getGridSize();
    flexslider2.vars.minItems = gridSize;
    flexslider2.vars.maxItems = gridSize;

  });
}

并在document.ready函数中调用此函数即。

slider("<Your class name or id name>");

在你的情况下它应该是

slider("#home-slider-four",3,4); and slider("#home-slider-five",4,5);

Answer 2

我用多个演示分配了一个小提琴

<强> Working Demo

<强>的jQuery

  // The slider being synced must be initialized first
  $('#reviews-slider').flexslider({
    animation: "slide",
    //other options
    asNavFor: '#main-slider'
    controlsContainer: '.flex-container'
  });

  $('#main-slider').flexslider({
    //other options
    sync: "#reviews-slider"
  });

请注意选项中的asNavFor，controlsContainer和sync

有关多个滑块的更多信息：http://www.woothemes.com/flexslider/

Answer 3

我从未使用过flex滑块插件，但我使用过其他jQuery驱动的图库/旋转木马。

我想想您真正需要做的就是使用flexslider API选项创建另一个jQuery对象，类似于您使用＃home-slider-four

所做的

示例：

$('#home-slider-four').flexslider({ // options here // });
$('#home-slider-five').flexslider({ // different options here // });

应该这样做。

同样，我从未使用过flex滑块，所以我不确定这是否有用。这种技术适用于RoyalSlider。

祝你好运！

两个动态旋转木马一页flexslider

3 个答案: