如何创建多控件Flexslider？

Question

我正在寻找一个解决方案，以拥有多个manualControls。需要说明的是，两个manualControls。

这背后的想法是我可以在桌面和移动设备的manualControl之间切换，因为标记中的位置是移动设备在另一个地方，而不是桌面上。如果有其他的解决方案，使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)。