Две динамические карусели на одной странице flexslider

Question

Мне нужно добавить две динамические карусели на одну страницу. также minItems и maxItems разные. Другие мои минимальные значения - 5,4,2.

Как я могу добавить два ползунка на одну страницу с динамическим значением изменения.

моими ползунками являются

1). # Дом-слайдер четыре

2) # дом-слайдер-пять

Любой может помочь мне это исправил. Спасибо.

(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

Попробуйте это определить функцию вызов «функция слайдер» и для этого имени класса функции пропуска или идентификатора

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

Я никогда не использовал плагин слайдера flex, но я использовал другую галерею/карусели с jQuery.

Я думаю все, что вам действительно нужно сделать, это создать еще один объект JQuery с опциями FlexSlider API, похожий на то, что вы сделали с # дом-слайдер-четыре

Пример:

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

Это должно сделать это.

Опять же, я никогда не пользовался гибким слайдером, поэтому я не уверен, что это сработает. Этот метод работает с RoyalSlider.

Удачи!

Answer 3

Я раздвоенный скрипку с несколькими демо

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 в вариантах

Подробнее о множественном Slider: http://www.woothemes.com/flexslider/