Как создать несколько элементов управления Flexslider?

Question

Я ищу решение, чтобы иметь несколько manualControls. Чтобы было ясно, два ручных управления.

Идея заключается в том, что я могу переключаться между ручным управлением для рабочего стола и мобильного устройства, поскольку позиция в разметке для мобильного телефона в другом месте, чем на рабочем столе. Если есть другое решение, чтобы получить manualControls div в другое место при изменении размера, дайте мне знать!

Я использую этот код:

$('.flexslider').flexslider({ 
    animation: "slide", 
    slideshowSpeed: 5000, 
    controlsContainer: ".flexslider", 
    manualControls: ".custom-controls li", 
    customDirectionNav: ".custom-direction li a", 
    useCSS: false, /* Chrome fix*/ 
    slideshow: false, 
    start: function(slider){ 
     $('body').removeClass('loading'); 
    } 
}); 

Я попытался это одно:

function flexslider() { 
     if (!isMobile) { 
      $('.flexslider').flexslider({ 
       animation: "slide", 
       slideshowSpeed: 5000, 
       controlsContainer: ".flexslider", 
       manualControls: ".custom-controls li", 
       customDirectionNav: ".custom-direction li a", 
       useCSS: false, /* Chrome fix*/ 
       slideshow: false, 
       start: function(slider){ 
        $('body').removeClass('loading'); 
       } 
      }); 
     } 
     if (isMobile) { 
      $('.flexslider').flexslider({ 
       animation: "slide", 
       slideshowSpeed: 5000, 
       controlsContainer: ".flexslider", 
       manualControls: ".mobile-controls li", 
       customDirectionNav: ".custom-direction li a", 
       useCSS: false, /* Chrome fix*/ 
       slideshow: false, 
       start: function(slider){ 
        $('body').removeClass('loading'); 
       } 
      }); 
     } 
    } 
    setInterval(function(){ flexslider(); }, 3000); 

function resizer() { 
    var w = $(window).width(); 

    if (w <= 768) { 
     isMobile = true; 
     console.log('isMobile'); 
    } else { 
     isMobile = false; 
     console.log('!isMobile'); 
    } 

FlexSlider();

} resizer(); 


$(window).resize(function() { 
    resizer(); 
}); 

Выше сценария будет работать только при обновлении страницы, а не при изменении размера. Спасибо заранее.

Answer 1

Не уверен, что вы можете сделать это с момента инициализации flexslider. Но вы можете использовать метод flexAnimate(id) для перехода на слайд, который вы хотите.

Например, $('.flexslider').data('flexslider').flexAnimate(2) перейдет на третий слайд (первый из них - 0).